Tiktok actual combat ~ number of likes pop-up box

Components
stay components Next new ge-popup.vue

<template>
	<view>
		<view class="mask"></view>
		<!-- Bind wechat -->
		<view class="wxbox">
			<view class="weixin">
				<image src="../static/dz.jpg"></image>
			</view>
			<view class="tips">"{
    {nickName}}" Get... Together {
    {
    likeNum}} A great </view>
			<view class="tips" @click="close"> determine </view>
		</view>
	</view>
</template>

<script>
	export default {
    
		props: {
    
			nickName: {
    
				type: String,
				default: ' The source of Xinze '
			},
			likeNum: {
    
				type: Number,
				default: 1
			}
		},
		data() {
    
			return {
    };
		},
		methods: {
    
			close() {
    
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss">
	.mask {
    
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 888;
		background-color: rgba(0, 0, 0, 0.6);
	}

	// Wechat pop up 
	.wxbox {
    
		position: absolute;
		top: 20%;
		z-index: 998;
		width: 80%;
		left: 10%;
		background-color: #fff;
		.weixin {
    
			text-align: center;

			image {
    
				width: 100%;
				height: 120px;
			}
		}

		.tips {
    
			padding: 10rpx 20rpx;
			text-align: center;
			font-size: 35rpx;
			color: #333;
		}
	}
</style>

Use

<template>

	<view>
		<popup v-show="isMask" :nickName="nickName" :likeNum="likeNum" @close="closeMask()"></popup>
	</view>
</template>

<script>
	import popup from "@/components/ge-popup.vue";
	export default {
    
		components: {
    
			popup
		},
		data() {
    
			return {
    
				nickName: " The source of Xinze 2",
				isMask: true,
				likeNum: 10
			}
		},
		onLoad() {
    

		},
		methods: {
    
			closeMask() {
     // Close the pop-up window 
			console.log("isMask")
				this.isMask = false;
			},
			update() {
    
				console.log(' update operation ');
			}
		}
	}
</script>

<style>
</style>