Browse Source

弹窗样式

h5_css
蟑螂恶霸 3 years ago
parent
commit
f2597c1793
  1. 76
      subpkg/list/list.vue

76
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;
z-index: 9999;
background-color: #c0b9e1;
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>
Loading…
Cancel
Save