uav-uniapp-demo-24-8-18/components/popUpWindow/popUpWindow.vue

<!-- 弹窗组件 -->
<template>
	<view v-if="show" class="popup-windown bx popup-bx">
		<div class="popup-content">
			<uni-icons @click="close" class="popup-close" type="closeempty" size="20" color="#000"></uni-icons>
			<view class="popup-main">
				<div class="bg">
					<image src="../../static/popUpWindow/bg.png" mode="widthFix"></image>
				</div>
				<view class="popup-desc">
					Important note: At present, the number of people who recharge is large, and the recharge will fail
					due to congestion. If payment fails, please contact customer service assistance. Join Tik Tok shop
					and get a part-time allowance. After completing the tasks of regular employees, you can join the
					regular employees and receive at least 100-5000USDT commission and salary income per day.
				</view>
				<view class="popup-btn">
					<view @click="close" class="">ok</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			close() {
				uni.setStorageSync('clickPopUp', {}); //用户是否点击过关闭弹框
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-windown {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		height: 100vh;
		width: 750rpx;
		background: rgba(0, 0, 0, .1);
		left: 0;
		top: 0;
		z-index: 1000;
		margin: 0rpx auto;

		.popup-content {
			position: relative;
			width: 96%;
			margin: 0rpx auto;
			background: white;
			border-radius: 15rpx;

			.popup-close {
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				z-index: 200;
				background: white;
				border-radius: 50%;
			}

			.popup-main {
				border-radius: 15rpx;
				overflow: hidden;
				
				.bg {
					height: 200rpx;
					overflow: hidden;

					image {
						width: 100%;
					}
				}

				.popup-desc {
					box-sizing: border-box;
					padding: 20rpx;
				}

				.popup-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 140rpx;
					box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, .1);

					view {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 96%;
						margin: 0rpx auto;
						height: 80rpx;
						background: $uni-bg-color-app;
						border-radius: 40rpx;
						color: $uni-bg-color;
					}
				}
			}

		}
	}
</style>