门禁系统界面提交

longyvfengyun

2023-06-29 a4ef20c04574584076685de32b10b857e25612f3

 src/views/accessControl/accessControl.vue

@@ -1,11 +1,78 @@
<script setup>

import FlexBox from "@/components/FlexBox.vue";
import {reactive} from "vue";
const nums = reactive([]);
for(let i=0; i<10; i++) {
   nums.push(i);
}
</script>

<template>
   <div>门禁</div>
   <div class="flex-layout--container">
      <div class="flex-layout--body">
         <div class="flex-layout-absolute">
            <div class="access-control-list">
               <el-row>
                  <el-col :span="4" v-for="item in nums" :key="item">
                     <div class="access-control-item">
                        <flex-box>
                           <div class="access-control-img">
                              <img src="./images/menJin.png" alt="">
                           </div>
                           <div class="access-control-text update-time">
                              2023-06-29 00:00:00
                           </div>
                           <div class="access-control-text home-number">401</div>
                           <div class="access-control-text state">关闭状态</div>
                        </flex-box>
                     </div>
                  </el-col>
               </el-row>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped>
<style lang="less" scoped>
.access-control-list {
   height: 100%;
   padding-top: 16px;
   padding-right: 16px;
   padding-bottom: 16px;
   overflow-y: auto;
}
.access-control-item {
   margin-left: 16px;
   margin-bottom: 16px;
   text-align: center;
}
.access-control-img {
   display: inline-block;
   padding: 16px 0 8px;
   width: 22%;
   img {
      width: 100%;
      height: auto;
   }
}
.access-control-text {
   color: #ffffff;
   text-align: center;
   &.update-time {
      padding: 4px 0;
      font-size: 14px;
   }

   &.home-number {
      font-weight: bold;
      font-size: 18px;
   }

   &.state {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 8px;
   }
}
</style>