kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

弹窗样式

h5_css
蟑螂恶霸 2 years ago
parent
17777b476f
commit
f2597c1793
1 changed files with 223 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 406
      subpkg/list/list.vue

406
subpkg/list/list.vue
View File

@ -7,41 +7,44 @@
</view> --> </view> -->
<navigation title="场景演练"></navigation> <navigation title="场景演练"></navigation>
<view class="mainwrap3"> <view class="mainwrap3">
<!-- 轮播图 --> <!-- 轮播图 -->
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true"> <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item, i) in swiperList" :key="i"> <swiper-item v-for="(item, i) in swiperList" :key="i">
<!-- <view class="swiper-item"> <!-- <view class="swiper-item">
<image :src="item.image_src"></image> <image :src="item.image_src"></image>
</view> --> </view> -->
<navigator class="swiper-item"> <navigator class="swiper-item">
<image :src="item.uploadPath"></image> <image :src="item.uploadPath"></image>
</navigator> </navigator>
</swiper-item> </swiper-item>
</swiper> </swiper>
<!-- 搜索 --> <!-- 搜索 -->
<!-- <my-search></my-search> --> <!-- <my-search></my-search> -->
<view class="search"> <view class="search">
<view class="search-title">请选择演练场景</view> <view class="search-title">请选择演练场景</view>
<view class="my-search-container"> <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>
</view> <view class="popup-layer-back" v-if="showVerify ==true">
<view class="verify" v-if="showVerify ==true" > <view class="verify">
<label @click="close()" class="close-button"></label> <label @click="close()" class="close-button"></label>
<uni-easyinput type="text" v-model="validateCode" placeholder="请输入场景码"/> <uni-easyinput type="text" v-model="validateCode" placeholder="请输入场景码" />
<button class="uni-button" size="mini" type="" @click="verifyMethod()">确定</button> <button class="uni-button" size="mini" type="" @click="verifyMethod()">确定</button>
</view> </view>
<!-- 场景区域 --> </view>
<view class="nav-list"> <!-- 场景区域 -->
<view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)"> <view class="nav-list">
<view class="nav-marsk"> <view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)">
<view class="scename">{{item.name}}</view> <view class="nav-marsk">
<view class="scecount">演练角色：{{item.roleTotal}}</view> <view class="scename">{{item.name}}</view>
<view class="scecount">演练人次：{{item.useTotal}}</view> <view class="scecount">演练角色：{{item.roleTotal}}</view>
<view class="scecount">演练人次：{{item.useTotal}}</view>
</view>
<image :src="item.uploadPath" class="nav-img"></image>
</view>
</view> </view>
<image :src="item.uploadPath" class="nav-img"></image>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -49,22 +52,24 @@
<script> <script>
import navigation from "@/components/navigation/navigation.vue"; import navigation from "@/components/navigation/navigation.vue";
export default { export default {
components: {navigation}, components: {
navigation
},
data() { data() {
return { return {
queryObj:{ queryObj: {
name:"", name: "",
isOpen:0, isOpen: 0,
pageNum:1, pageNum: 1,
pageSize:10 pageSize: 10
}, },
time:1, time: 1,
total:0, total: 0,
showVerify:false, showVerify: false,
validateCode:null, validateCode: null,
search: false, search: false,
isloading:false, isloading: false,
item:null, item: null,
//轮播图数据列表 //轮播图数据列表
swiperList: [], swiperList: [],
//场景数据列表 //场景数据列表
@ -78,7 +83,8 @@
}, },
onShow() { onShow() {
if (this.time == 1) { if (this.time == 1) {
this.time = 2; return; this.time = 2;
return;
} }
this.getSwiperList(); this.getSwiperList();
this.getSceneListReload(); this.getSceneListReload();
@ -91,11 +97,13 @@
async getSwiperList() { async getSwiperList() {
const { const {
data: res 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() if (!res.success) return uni.$showMsg()
res.data.forEach(item=>{ res.data.forEach(item => {
item.uploadPath = uni.$http.baseUrl +item.uploadPath item.uploadPath = uni.$http.baseUrl + item.uploadPath
}) })
this.swiperList = res.data this.swiperList = res.data
// uni.$showMsg('数据请求成功！') // uni.$showMsg('数据请求成功！')
@ -104,17 +112,17 @@
this.isloading = true this.isloading = true
const { const {
data: res data: res
} = await uni.$http.post('/small/scene/manage/listApp',this.queryObj) } = await uni.$http.post('/small/scene/manage/listApp', this.queryObj)
this.isloading = false this.isloading = false
res.rows.forEach(item=>{ res.rows.forEach(item => {
item.uploadPath = uni.$http.baseUrl +item.uploadPath item.uploadPath = uni.$http.baseUrl + item.uploadPath
}) })
if (this.search) { if (this.search) {
this.sceneList = res.rows this.sceneList = res.rows
this.search = false this.search = false
} else { } else {
this.sceneList =[...this.sceneList,...res.rows] this.sceneList = [...this.sceneList, ...res.rows]
} }
this.total = res.total this.total = res.total
// uni.$showMsg('数据请求成功！') // uni.$showMsg('数据请求成功！')
@ -122,60 +130,68 @@
async getSceneListReload() { async getSceneListReload() {
const { const {
data: res data: res
} = await uni.$http.post('/small/scene/manage/listApp',this.queryObj) } = await uni.$http.post('/small/scene/manage/listApp', this.queryObj)
res.rows.forEach(item=>{ res.rows.forEach(item => {
item.uploadPath = uni.$http.baseUrl +item.uploadPath item.uploadPath = uni.$http.baseUrl + item.uploadPath
}) })
this.sceneList = res.rows this.sceneList = res.rows
this.total = res.total this.total = res.total
// uni.$showMsg('数据请求成功！') // uni.$showMsg('数据请求成功！')
}, },
navClickHandler(item) { navClickHandler(item) {
if(item !== ""){ if (item !== "") {
if(this.queryObj.isOpen == 1){ if (this.queryObj.isOpen == 1) {
this.showVerify = true this.showVerify = true
this.item = item this.item = item
} else{ } else {
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/role/role?guid=' + item.guid+'&name='+item.name url: '/subpkg/role/role?guid=' + item.guid + '&name=' + item.name
}) })
} }
} }
}, },
close(){ close() {
this.showVerify = false this.showVerify = false
}, },
verifyMethod(){ verifyMethod() {
if (this.validateCode == null){ if (this.validateCode == null) {
return uni.showToast({title:'场景码不能为空',icon:'none'}) return uni.showToast({
} else if(parseInt(this.validateCode)!== this.item.code){ title: '场景码不能为空',
return uni.showToast({title:'场景码错误',icon:'none'}) icon: 'none'
})
} else if (parseInt(this.validateCode) !== this.item.code) {
return uni.showToast({
title: '场景码错误',
icon: 'none'
})
} }
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/role/role?guid=' + this.item.guid+'&name='+this.item.name url: '/subpkg/role/role?guid=' + this.item.guid + '&name=' + this.item.name
}) })
}, },
input(e){ input(e) {
clearTimeout(this.timer) clearTimeout(this.timer)
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.queryObj.name = e this.queryObj.name = e
this.search = true this.search = true
this.getSceneList() this.getSceneList()
}, 500) }, 500)
}, },
back(){ back() {
uni.navigateBack({ uni.navigateBack({
delta:1,//返回层数，2则上上页 delta: 1, //返回层数，2则上上页
}) })
}, },
onReachBottom(){ onReachBottom() {
if(this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有场景') if (this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有场景')
if(this.isloading) return if (this.isloading) return
this.queryObj.pageNum++ this.queryObj.pageNum++
this.getSceneList() this.getSceneList()
uni.pageScrollTo({scrollTop: 120}) uni.pageScrollTo({
scrollTop: 120
})
} }
} }
} }
@ -183,26 +199,29 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.wrap { .wrap {
height: 101%; height: 101%;
} }
swiper {
swiper {
position: relative; position: relative;
top: 3vh; top: 3vh;
margin: 0 3%; margin: 0 3%;
width: 94%; width: 94%;
height: 18vh; height: 18vh;
.swiper-item, .swiper-item,
image { image {
width: 99.8%; width: 99.8%;
margin-left: 0.1%; margin-left: 0.1%;
height: 100%; height: 100%;
align-items: center; align-items: center;
border-radius: 20rpx; border-radius: 20rpx;
} }
} }
.nav-list {
.nav-list {
position: relative; position: relative;
top: 50rpx; top: 50rpx;
justify-content: space-around; justify-content: space-around;
@ -217,101 +236,122 @@
margin-bottom: 20rpx; margin-bottom: 20rpx;
width: 100%; width: 100%;
height: 280rpx; height: 280rpx;
border-radius: 20rpx; border-radius: 20rpx;
overflow: hidden; overflow: hidden;
} }
.nav-marsk { .nav-marsk {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, .45); background-color: rgba(0, 0, 0, .45);
color: #fff; color: #fff;
line-height: 1.5; line-height: 1.5;
.scename {
margin: 10% 0 2% 5%; .scename {
font-size: 42rpx; margin: 10% 0 2% 5%;
} font-size: 42rpx;
.scecount {
margin: 1% 0 0 5%;
font-size: 28rpx;
}
} }
.nav-img { .scecount {
width: 100%; margin: 1% 0 0 5%;
height: 100%; font-size: 28rpx;
} }
} }
.search { .nav-img {
position: relative; width: 100%;
top: 70rpx; height: 100%;
} }
}
.search-title{
color: #67676a; .search {
margin: 3% 0 0 3%; position: relative;
} top: 70rpx;
}
.search-title {
color: #67676a;
margin: 3% 0 0 3%;
}
.uni-searchbar__box { .uni-searchbar__box {
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.verify {
border-radius: 10px; .popup-layer-back {
background-color: #c0b9e1; position: absolute;
opacity: 0.9; top: 0;
position: absolute; left: 0;
top: 45%; width: 100%;
left: 50%; height: 100%;
-webkit-transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.5);
transform: translate(-50%, -50%); z-index: 999;
width: 400rpx; }
height: 300rpx;
padding: 30rpx; .verify {
z-index: 9999; position: absolute;
} top: 45%;
left: 50%;
.uni-button { z-index: 9999;
margin-top: 40rpx; -webkit-transform: translate(-50%, -50%);
font-size: 30rpx; transform: translate(-50%, -50%);
width: 100%; padding: 30rpx;
height: 70rpx; width: 400rpx;
display: flex; height: 300rpx;
align-items: center; background-color: #c0b9e1;
justify-content: center; border-radius: 10px;
background: #1367fe; opacity: 0.9;
border-radius: 50rpx; }
color: #fff;
line-height: 70rpx; .uni-button {
} display: flex;
.close-button { align-items: center;
position: absolute; justify-content: center;
top: -60rpx; position: absolute;
right: -10rpx; bottom: 15%;
width: 50rpx; left: 10%;
height: 50rpx; width: 80%;
background-color: rgba(255, 255, 255, .5); font-size: 32rpx;
border: 1rpx solid rgba(255, 255, 255, .7); background: #1367fe;
border-radius: 50%; border-radius: 50rpx;
transform: rotate(45deg); color: #fff;
} height: 70rpx;
line-height: 70rpx;
.close-button:before, }
.close-button:after {
content: ''; .close-button {
position: absolute; position: absolute;
top: 50%; top: -60rpx;
left: 50%; right: -30rpx;
background: #333; width: 50rpx;
border-radius: 50%; height: 50rpx;
transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, .5);
height: 24rpx; border: 1rpx solid rgba(255, 255, 255, .7);
width: 4rpx; border-radius: 50%;
} transform: rotate(45deg);
}
.close-button:after {
height: 4rpx; .close-button:before,
width: 24rpx; .close-button:after {
} content: '';
</style> position: absolute;
top: 50%;
left: 50%;
background: #333;
border-radius: 50%;
transform: translate(-50%, -50%);
height: 24rpx;
width: 4rpx;
}
.close-button:after {
height: 4rpx;
width: 24rpx;
}
/deep/ .uni-easyinput {
top: 15%;
}
</style>
Write Preview
Loading…
Cancel
Save