<template> <view class="page"> <u-navbar title="设置" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='36'></u-navbar> <view class="card"> <view class="li"> <view class="tit"> 备注 </view> <view class="info"> <view class="txt"> 无 </view> <view class="iconfont icon-xiangyou1"></view> </view> </view> <view class="li"> <view class="tit"> 分组 </view> <view class="info"> <view class="txt"> 华鑫 </view> <view class="iconfont icon-xiangyou1"></view> </view> </view> <view class="li"> <view class="tit"> 电价设置 </view> <view class="info"> <view class="txt"> 0.5元/度 </view> <view class="iconfont icon-xiangyou1"></view> </view> </view> <view class="li"> <view class="tit"> 欠费断电 </view> <view class="info"> <view class="txt"> 欠费20度断电 </view> <view class="iconfont icon-xiangyou1"></view> </view> </view> <view class="li"> <view class="tit"> S/N </view> <view class="info"> <view class="txt"> TMTM21516232 </view> <!-- <view class="iconfont icon-xiangyou1"></view> --> </view> </view> <view class="li"> <view class="tit"> 类型 </view> <view class="info"> <view class="txt"> TC002电表 </view> <!-- <view class="iconfont icon-xiangyou1"></view> --> </view> </view> <view class="li"> <view class="tit"> Wifi配网 </view> <view class="info"> <view class="txt"> ESP2001 </view> <!-- <view class="iconfont icon-xiangyou1"></view> --> </view> </view> </view> <u-mask :show="showloading"></u-mask> <view class="fz" v-show="showfz"> <view class="fz_top"> <view class="iconfont icon-shanchu"> </view> <view class="tit"> 设备分组 </view> <view class="txt"> 管理 </view> </view> <view class="card_cont"> <view class="cards" v-for="item in 10" :key="item"> <view class="txt"> 全部 </view> <view class="num"> 1 </view> </view> <view class="zhanwei" style="width: 100%;height: 100rpx;"> </view> </view> </view> <view class="dd"> <u-select v-model="show" :list="list" title='欠费断电'></u-select> </view> <view class="btn"> 解除绑定 </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#F7FAFE", }, showloading: true, showfz: false, show: true, list: [{ value: '1', label: '欠费立即断电' }, { value: '2', label: '欠费不断点' } ], } }, methods: { } } </script> <style lang="scss"> page { background-color: #F7FAFE; } .page { width: 750rpx; .card { padding: 16rpx 38rpx; margin: 60rpx auto 0; width: 654rpx; // height: 734rpx; background: #FFFFFF; border-radius: 30rpx; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1); opacity: 1; .li { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; height: 94rpx; border-bottom: #E5E5E5 solid 2rpx; .tit { font-size: 32rpx; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400; color: #000000; } .info { display: flex; flex-wrap: nowrap; align-items: center; .txt { font-size: 32rpx; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400; color: #95989D; } .icon-xiangyou1 { margin-left: 6rpx; color: #95989D; } } } } .btn { display: flex; align-items: center; justify-content: center; margin: 52rpx auto 0; width: 654rpx; height: 100rpx; background: #FF4F4F; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1); opacity: 1; border-radius: 30rpx; font-size: 32rpx; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400; color: #FFFFFF; } .fz { position: fixed; bottom: 0; width: 750rpx; height: 1152rpx; background: #F7FAFE; border-radius: 30rpx 30rpx 0 0; z-index: 10071; .fz_top { margin: 18rpx 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-between; .icon-shanchu { margin-left: 40rpx; font-size: 50rpx; } .tit { font-size: 36rpx; font-family: Source Han Sans, Source Han Sans; font-weight: 400; color: #000000; } .txt { margin-right: 40rpx; font-size: 36rpx; font-family: Source Han Sans, Source Han Sans; font-weight: 400; color: #2A82E4; } } .card_cont { width: 750rpx; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; height: 1030rpx; overflow-y: auto; overflow-x: hidden; .cards { margin-top: 32rpx; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0 40rpx; width: 682rpx; border-radius: 30rpx; height: 114rpx; background: #FFFFFF; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1); .txt { font-size: 36rpx; font-family: Source Han Sans, Source Han Sans; font-weight: 400; color: #000000; } .num { font-size: 36rpx; font-family: Source Han Sans, Source Han Sans; font-weight: 400; color: #000000; } } } } } </style>