页面完善

2024-11-07 17:06:51 +08:00
parent d375616372
commit ca1a2e11b5
58 changed files with 5467 additions and 837 deletions
@@ -0,0 +1,86 @@
+<template>
+  <div class="container_box">
+    <!-- 头部 -->
+    <tab-bar :active="2"></tab-bar>
+    <div class="table_box">
+      <el-table :data="userList">
+        <el-table-column prop="ID" label="序号"></el-table-column>
+        <el-table-column prop="userName" label="用户名"></el-table-column>
+        <el-table-column prop="role" label="用户组"></el-table-column>
+        <el-table-column prop="logintime" label="最后登录时间"></el-table-column>
+        <el-table-column prop="status" label="状态">
+          <template slot-scope="scope">
+            <div class="table_status" :class="{'table_status1': scope.row.status === 1}">{{ scope.row.status === 1 ? '在线' : '离线' }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import TabBar from '@/components/tabBar/tabBar.vue';
+
+export default {
+  name: 'User',
+  components: { TabBar },
+  data() {
+    return {
+      userList: [
+        {
+          ID: '1',
+          userName: 'admin',
+          role: 'administrator',
+          logintime: '2024-10-06 18:12:10',
+          status: 1
+        },
+        {
+          ID: '2',
+          userName: '卡树测试',
+          role: 'test',
+          logintime: '2024-10-05 19:06:45',
+          status: 0
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['name', 'roles'])
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.container_box {
+  height: 100vh;
+  .table_box {
+    padding: 32px;
+    .el-table {
+      ::v-deep {
+        th.el-table__cell {
+          background-color: #F2F9F4;
+        }
+        .el-table__cell {
+          padding: 6px 0;
+        }
+        .cell {
+          line-height: 28px;
+          font-size: 12px;
+          color: #000000;
+        }
+      }
+    }
+    .table_status {
+      font-weight: 500;
+      color: #000000;
+    }
+    .table_status1 {
+      color: #00C325;
+    }
+  }
+}
+</style>