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

<!-- 弹窗组件 -->
<template>
	<view v-if="show" class="popup-windown">
		<div class="popup-content">
			<div class="popup-close">x</div>
			<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>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		props : {
			show : {
				type : Boolean,
				default : false
			}
		},
		methods : {
			close(){
				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;
		
		.popup-content{
			position: relative;
			width: 96%;
			margin: 0rpx auto;
			background: white;
			border-radius: 15rpx;
			overflow: hidden;
			
			.popup-close{
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				width: 20rpx;
				height: 20rpx;
				background: pink;
				border-radius: 50%;
				z-index: 200;
			}
			
			.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>