新增弹窗

components/popUpWindow/popUpWindow.vue

@@ -0,0 +1,107 @@
+<!-- 弹窗组件 -->
+<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>

pages/home/home.vue

@@ -85,6 +85,9 @@
 
 		<!-- 客服列表 -->
 		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
+		
+		<!-- 弹窗 -->
+		<popUpWindow :show="showPopUp" @close="closePopUp"></popUpWindow>
 
 	</view>
 </template>
@@ -93,12 +96,14 @@
 	import sTabbar from '@/components/base/tabBar.vue'
 	import center from '@/components/center/center.vue'
 	import serviceList from '@/components/serviceList/serviceList.vue'
+	import popUpWindow from '../../components/popUpWindow/popUpWindow.vue'
 
 	export default {
 		components: {
 			sTabbar,
 			center,
-			serviceList
+			serviceList,
+			popUpWindow
 		},
 		data() {
 			return {
@@ -118,6 +123,7 @@
 					es: "keySpanish",
 					"zh": "keyChinese"
 				},
+				showPopUp : true
 			}
 		},
 		onShow() {
@@ -242,6 +248,11 @@
 				uni.navigateTo({
 					url: '/pages/signIn/signIn'
 				})
+			},
+			
+			//关闭弹框
+			closePopUp(){
+				this.showPopUp = false
 			}
 
 		}