门禁系统界面提交

longyvfengyun

2023-06-29 a4ef20c04574584076685de32b10b857e25612f3

门禁系统界面提交

 src/assets/style/basic.css

@@ -30,8 +30,18 @@
  flex-direction: row;
}
.flex-layout--body {
  position: relative;
  flex: 1;
}
.flex-layout-absolute {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.center--container {
  display: flex;
  height: 100%;

 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>

 src/views/accessControl/images/menJin.png