From a4ef20c04574584076685de32b10b857e25612f3 Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期四, 29 六月 2023 10:07:04 +0800
Subject: [PATCH] 门禁系统界面提交
---
src/assets/style/basic.css | 10 +++++
src/views/accessControl/accessControl.vue | 73 +++++++++++++++++++++++++++++++++++-
src/views/accessControl/images/menJin.png | 0
3 files changed, 80 insertions(+), 3 deletions(-)
diff --git a/src/assets/style/basic.css b/src/assets/style/basic.css
index 2c1bbe9..164a729 100644
--- a/src/assets/style/basic.css
+++ b/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%;
diff --git a/src/views/accessControl/accessControl.vue b/src/views/accessControl/accessControl.vue
index 771921e..0f602e3 100644
--- a/src/views/accessControl/accessControl.vue
+++ b/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>
diff --git a/src/views/accessControl/images/menJin.png b/src/views/accessControl/images/menJin.png
new file mode 100644
index 0000000..00f9a30
--- /dev/null
+++ b/src/views/accessControl/images/menJin.png
Binary files differ
--
Gitblit v1.9.1