123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
- <cus-header title='门禁管理'></cus-header>
- <div class="boxs" v-if="list.length">
- <div class="box" v-for="(item,index) in list" :key="index">
- <div class="info">
- <text>{{item.title}}</text>
- <text class="no">{{item.no}}</text>
- </div>
- <div class="btns">
- <div class="pre line">开启</div>
- <div class="pre line">关闭</div>
- <div class="pre line">常开</div>
- <div class="pre">常关</div>
- </div>
- <div class="status" :class="item.status==1?'on':(item.status==2?'off':'mr')">
- {{item.status==1?'在线':(item.status==2?'离线':'异常')}}
- </div>
- </div>
- </div>
- <template v-else>
- <page-empty :height="'calc(100vh - 100px)'"></page-empty>
- </template>
- </view>
- </template>
- <script>
- import pageEmpty from '@/components/pageEmpty/index.vue'
- export default {
- components:{
- pageEmpty
- },
- data(){
- return {
- list:[
- {
- title:'谷锐特前台门禁',
- no:'F11149069',
- status:1
- },
- {
- title:'办公室门禁',
- no:'F11149078',
- status:2
- }
- ]
- }
- },
- methods:{
-
- }
- }
- </script>
- <style scoped lang="less">
- .page{
- background: #F4F8FB;
- padding: 0 24rpx 20rpx;
- box-sizing: border-box;
- .boxs{
- width: 100%;
- .box{
- width: 100%;
- background: #FFFFFF;
- box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(0,0,0,0.08);
- border-radius: 16rpx;
- position: relative;
- margin-top: 20rpx;
- .info{
- width: 100%;
- padding: 40rpx 24rpx;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- text{
- font-family: PingFang-SC, PingFang-SC;
- font-weight: bold;
- font-size: 36rpx;
- color: #1D2129;
- line-height: 36rpx;
- text-align: left;
- &.no{
- font-weight: 400;
- font-size: 32rpx;
- color: #657588;
- margin-top: 24rpx;
- }
- }
- }
- .btns{
- width: 100%;
- background: #F5F9FF;
- border-radius: 0rpx 0rpx 16rpx 16rpx;
- display: flex;
- .pre{
- width: 25%;
- padding: 26rpx 0;
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 30rpx;
- color: #198CFF;
- line-height: 36rpx;
- text-align: center;
- position: relative;
- &.line::after{
- content: '';
- width: 1rpx;
- height: 48rpx;
- background: #B9C0C8;
- position: absolute;
- right: 0;
- top: 50%;
- margin-top: -24rpx;
- }
- }
- }
- .status{
- width: 90rpx;
- height: 48rpx;
- border-radius: 0rpx 16rpx 0rpx 16rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 26rpx;
- color: #FFFFFF;
- line-height: 48rpx;
- text-align: center;
- position: absolute;
- top: 0;
- right: 0;
- &.on{
- background: #14CC8C;
- }
- &.off{
- background: #CCCCCC;
- }
- &.mr{
- background: #666666;
- }
- }
- }
- }
- }
- </style>
|