xinyi/tearoom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a3f28e8053
tearoom/page_fenbaotwo/wifipz.vue

335 lines
6.6 KiB
Vue
Raw Normal View History

茶室
2025-01-04 18:05:32 +08:00
<template>
<view class="page">
<u-navbar title="WIFI配置" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='50' id="navbar">
</u-navbar>
<view class="box">
<view class="orderqx">
<view class="top">
<view class="one">
WIFI设置
</view>
<view class="two" @click="delflag = !delflag">
编辑
</view>
</view>
<view class="toptab">
<view class="">WIFI名称</view>
<view class="">WIFI密码</view>
<view class="" v-if="delflag">操作</view>
</view>
<view class="bottab" v-for="(item,index) in 3" :key="index">
<view class="">chuangteA</view>
<view class="">123456789</view>
<view class="" v-if="delflag">
<text style="color: #000;" @click="btnxg">编辑</text> <text>删除</text>
</view>
</view>
<view class="addpz" @click="flag = true">
添加WIFI
</view>
</view>
<view class="wifilist">
<view class="name">
WIFI配置
</view>
<view class="list_item" v-for="(item,index) in 6" :key="index" @click="btnroom">
<view class="">
房间{{index}}
</view>
<view class="">
chuangteA <u-icon name="arrow-right" color="#7C7C7C" size="28"></u-icon>
</view>
</view>
</view>
</view>
<!-- <view class="anniu">
<view class="">
保存
</view>
</view> -->
<view class="mask" v-if="flag"></view>
<view class="addwifi" v-if="flag">
<view class="name">
添加WIFI
</view>
<view class="one">
<view class="">
WIFI名称
</view>
<input type="text" placeholder="输入WIFI名称"/>
</view>
<view class="one">
<view class="">
WIFI密码
</view>
<input type="text" placeholder="输入WIFI密码"/>
</view>
<view class="baocun">
保存
</view>
<view class="cha" @click="flag = false">×</view>
</view>
<view class="mask" v-if="editflag"></view>
<view class="addwifi" v-if="editflag">
<view class="name">
修改WIFI
</view>
<view class="one">
<view class="">
WIFI名称
</view>
<input type="text" placeholder="输入WIFI名称"/>
</view>
<view class="one">
<view class="">
WIFI密码
</view>
<input type="text" placeholder="输入WIFI密码"/>
</view>
<view class="baocun">
修改
</view>
<view class="cha" @click="editflag = false">×</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
flag:false,
delflag:false,
editflag:false
}
},
onLoad() {
},
methods: {
// 点击修改WIFI
btnxg(){
this.editflag = true
},
// 点击房间或者大厅配置WIFI
btnroom(){
uni.navigateTo({
url:'/page_fenbaotwo/wifixz'
})
}
}
}
</script>
<style lang="scss">
/deep/ .uicon-nav-back,
/deep/ .u-title{
padding-bottom: 20rpx;
}
.addwifi{
width: 750rpx;
height: 598rpx;
background: #FFFFFF;
position: fixed;
left: 0;
bottom: 0;
border-radius: 50rpx 50rpx 0 0;
padding: 0 72rpx;
box-sizing: border-box;
.cha{
color: #3D3D3D;
font-size: 50rpx;
font-weight: 600;
position: absolute;
top: 30rpx;
right: 30rpx;
}
.baocun{
width: 680rpx;
height: 104rpx;
background: #48893B;
font-weight: 600;
font-size: 36rpx;
color: #FFFFFF;
margin: auto;
text-align: center;
line-height: 104rpx;
border-radius: 24rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 32rpx;
}
.one{
display: flex;
justify-content: space-between;
padding-bottom: 34rpx;
border-bottom: 1px solid #D8D8D8;
margin-top: 58rpx;
box-sizing: border-box;
font-size: 32rpx;
color: #3D3D3D;
input{
text-align: right;
}
}
.name{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
width: 100%;
text-align: center;
margin-top: 42rpx;
margin-bottom: 86rpx;
}
}
.mask{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #000;
opacity: .2;
}
.wifilist{
width: 680rpx;
max-height: 111308rpx;
background: #FFFFFF;
margin: auto;
border-radius: 24rpx;
margin-top: 22rpx;
padding: 36rpx 34rpx;
box-sizing: border-box;
.list_item{
display: flex;
justify-content: space-between;
margin-top: 30rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
border-bottom: 1px solid #D8D8D8;
}
.name{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.list_item{
}
}
.box{
height: 86vh;
overflow: scroll;
padding-bottom: 100rpx;
box-sizing: border-box;
}
.anniu{
width: 750rpx;
height: 152rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
border-radius: 0rpx 0rpx 0rpx 0rpx;
position: fixed;
left: 0;
bottom: 0;
padding-top: 24rpx;
box-sizing: border-box;
view{
width: 680rpx;
height: 104rpx;
background: #48893B;
font-weight: 600;
font-size: 36rpx;
color: #FFFFFF;
margin: auto;
text-align: center;
line-height: 104rpx;
border-radius: 24rpx;
}
}
.addpz{
font-size: 28rpx;
color: #48893B;
text-align: center;
line-height: 66rpx;
width: 100%;
height: 66rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
border: 1rpx dashed #48893B;
margin-top: 10rpx;
}
.orderqx{
width: 680rpx;
max-height: 49200rpx;
background: #FFFFFF;
margin: auto;
margin-top: 22rpx;
border-radius: 20rpx;
padding: 36rpx 34rpx;
padding-bottom: 28rpx;
box-sizing: border-box;
.tongzhi{
display: flex;
justify-content: space-between;
margin-top: 34rpx;
padding-bottom: 20rpx;
box-sizing: border-box;
border-bottom: 1px solid #D8D8D8;
}
.bottab{
width: 100%;
height: 76rpx;
line-height: 76rpx;
background: #fff;
border-radius: 6rpx 6rpx 6rpx 6rpx;
display: flex;
view{
width: 50%;
text-align: center;
text{
display: inline-block;
margin-left: 20rpx;
color: red;
}
}
}
.toptab{
margin-top: 24rpx;
width: 100%;
height: 76rpx;
line-height: 76rpx;
background: #F0F0F0;
border-radius: 6rpx 6rpx 6rpx 6rpx;
display: flex;
view{
width: 50%;
text-align: center;
}
}
.top{
display: flex;
justify-content: space-between;
.one{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.two{
font-size: 28rpx;
color: #48893B;
}
}
}
page {
background: #F6F6F6;
}
</style>
Reference in New Issue Copy Permalink