web-app-v1/components/pop-up.vue

<template>
	<view class="pop_up" v-if="isShow">
		<view class="pop_con">
			<image src="../static/fangwei/fail_icon.png"></image>
			<view class="con">{{ con }}</view>
			<view class="close_btn" @click="closePop">我知道了（{{ count }}s）</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['con'],
	data() {
		return {
			isShow: true,
			count: 5
		};
	},
	mounted() {
		this.setTime();
	},
	beforeDestroy() {
		//页面关闭时清除定时器
		clearInterval(this.clearTimeSet);
	},
	methods: {
		setTime() {
			//设置定时器
			this.clearTimeSet = setInterval(() => {
				this.count--;
				if (this.count == 0) {
					this.isShow = false;
				}
			}, 1000);
		},
		clearTime() {
			//清除定时器
			clearInterval(this.clearTimeSet);
		},
		closePop() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss">
.pop_up {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	.pop_con {
		width: 598rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		image {
			width: 80rpx;
			height: 80rpx;
		}
		.con {
			padding: 30rpx 0;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		.close_btn {
			width: 430rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: linear-gradient(93deg, #a080ff 0%, #5d6bff 100%);
			opacity: 1;
			border-radius: 44rpx;
			color: #fff;
		}
	}
}
</style>