弹窗样式

subpkg/list/list.vue

@@ -23,14 +23,17 @@
 			<view class="search">
 				<view class="search-title">请选择演练场景</view>
 				<view class="my-search-container">
-			  <uni-search-bar class="my-search-box" @confirm="search" @input="input" cancel-button="none"></uni-search-bar>
+					<uni-search-bar class="my-search-box" @confirm="search" @input="input"
+						cancel-button="none"></uni-search-bar>
 				</view>
 			</view>
-		<view class="verify" v-if="showVerify ==true" > 
+			<view class="popup-layer-back" v-if="showVerify ==true">
+				<view class="verify">
 					<label @click="close()" class="close-button"></label>
 					<uni-easyinput type="text" v-model="validateCode" placeholder="请输入场景码" />
 					<button class="uni-button" size="mini" type="" @click="verifyMethod()">确定</button>
 				</view>
+			</view>
 			<!-- 场景区域 -->
 			<view class="nav-list">
 				<view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)">
@@ -49,7 +52,9 @@
 <script>
 	import navigation from "@/components/navigation/navigation.vue";
 	export default {
-		components: {navigation},
+		components: {
+			navigation
+		},
 		data() {
 			return {
 				queryObj: {
@@ -78,7 +83,8 @@
 		},
 		onShow() {
 			if (this.time == 1) {
-				this.time = 2; return;
+				this.time = 2;
+				return;
 			}
 			this.getSwiperList();
 			this.getSceneListReload();
@@ -91,7 +97,9 @@
 			async getSwiperList() {
 				const {
 					data: res
-				} = await uni.$http.post('/small/customImage/listAll',{page:'site'})
+				} = await uni.$http.post('/small/customImage/listAll', {
+					page: 'site'
+				})
 				if (!res.success) return uni.$showMsg()
 
 				res.data.forEach(item => {
@@ -148,9 +156,15 @@
 			},
 			verifyMethod() {
 				if (this.validateCode == null) {
-					return uni.showToast({title:'场景码不能为空',icon:'none'})
+					return uni.showToast({
+						title: '场景码不能为空',
+						icon: 'none'
+					})
 				} else if (parseInt(this.validateCode) !== this.item.code) {
-					return uni.showToast({title:'场景码错误',icon:'none'})
+					return uni.showToast({
+						title: '场景码错误',
+						icon: 'none'
+					})
 				}
 				uni.navigateTo({
 					url: '/subpkg/role/role?guid=' + this.item.guid + '&name=' + this.item.name
@@ -175,7 +189,9 @@
 				if (this.isloading) return
 				this.queryObj.pageNum++
 				this.getSceneList()
-				uni.pageScrollTo({scrollTop: 120})
+				uni.pageScrollTo({
+					scrollTop: 120
+				})
 			}
 		}
 	}
@@ -183,9 +199,11 @@
 
 <style lang="scss">
 	@import url("@/static/base_css.css");
+
 	.wrap {
 		height: 101%;
 	}
+
 	swiper {
 		position: relative;
 		top: 3vh;
@@ -202,6 +220,7 @@
 			border-radius: 20rpx;
 		}
 	}
+
 	.nav-list {
 		position: relative;
 		top: 50rpx;
@@ -220,6 +239,7 @@
 			border-radius: 20rpx;
 			overflow: hidden;
 		}
+
 		.nav-marsk {
 			position: absolute;
 			z-index: 10;
@@ -228,10 +248,12 @@
 			background-color: rgba(0, 0, 0, .45);
 			color: #fff;
 			line-height: 1.5;
+
 			.scename {
 				margin: 10% 0 2% 5%;
 				font-size: 42rpx;
 			}
+
 			.scecount {
 				margin: 1% 0 0 5%;
 				font-size: 28rpx;
@@ -257,38 +279,52 @@
 	.uni-searchbar__box {
 		border: 1px solid #ddd;
 	}
+
+	.popup-layer-back {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 999;
+	}
+
 	.verify {
-    border-radius: 10px;
-	background-color: #c0b9e1;
-	opacity: 0.9;
 		position: absolute;
 		top: 45%;
 		left: 50%;
+		z-index: 9999;
 		-webkit-transform: translate(-50%, -50%);
 		transform: translate(-50%, -50%);
+		padding: 30rpx;
 		width: 400rpx;
 		height: 300rpx;
-  	padding: 30rpx;
+		background-color: #c0b9e1;
-  	z-index: 9999;
+		border-radius: 10px;
+		opacity: 0.9;
 	}
 
 	.uni-button {
-	margin-top: 40rpx;
-  	font-size: 30rpx;
-  	width: 100%;
-  	height: 70rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		position: absolute;
+		bottom: 15%;
+		left: 10%;
+		width: 80%;
+		font-size: 32rpx;
 		background: #1367fe;
 		border-radius: 50rpx;
 		color: #fff;
+		height: 70rpx;
 		line-height: 70rpx;
 	}
+
 	.close-button {
 		position: absolute;
 		top: -60rpx;
-  	right: -10rpx;
+		right: -30rpx;
 		width: 50rpx;
 		height: 50rpx;
 		background-color: rgba(255, 255, 255, .5);
@@ -314,4 +350,8 @@
 		height: 4rpx;
 		width: 24rpx;
 	}
+
+	/deep/ .uni-easyinput {
+		top: 15%;
+	}
 </style>