fission-star-applet-250304/components/home/popupAuditMsg.vue

<template>
	<uv-popup ref="popup" :overlayOpacity="0.8" :customStyle="{
      backgroundColor: 'transparent',
    }">
		<view class="popup">
			<image class="popup-bg" src="@/static/image/home/bg-audit-pass.png"></image>
			<view class="popup-content flex">
				<text class="value">{{ count }}</text>
				<image class="unit" src="@/static/image/home/text-share.png"></image>
			</view>
			<view class="flex popup-btns">
				<button plain class="btn-simple" @click="close">
					<image class="popup-btn" src="@/static/image/home/cancel.png"></image>
				</button>
				<button plain class="btn-simple" @click="go">
					<image class="popup-btn" src="@/static/image/home/go.png"></image>
				</button>
			</view>
		</view>
	</uv-popup>
</template>

<script>
	export default {
		props: {
			count: {
				type: Number,
				default: 15
			}
		},
		data() {
			return {}
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			go() {
				uni.reLaunch({
					url: `/pages/index/record`
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.popup {
		position: relative;
		width: 578rpx;

		&-bg {
			width: 578rpx;
			height: 317rpx;
		}

		&-content {
			position: absolute;
			top: 123rpx;
			left: 50%;
			transform: translateX(-50%);

			.value {
				color: #FF2323;
				font-size: 102rpx;
				font-weight: 700;
				line-height: 125rpx;
			}

			.unit {
				width: 299rpx;
				height: 77rpx;
				margin-left: 9rpx;
			}
		}

		&-btns {
			justify-content: space-between;
			margin-top: 56rpx;
		}

		&-btn {
			width: 265rpx;
			height: 84rpx;
		}
	}
</style>