From ccdf5cc8e9bc83f6952bd3abd0ae65a0d18b6010 Mon Sep 17 00:00:00 2001
From: dengj <209192278@qq.com>
Date: Mon, 18 Dec 2023 18:02:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=9B=8F=E5=BD=A2=E5=8F=8Acheckbox=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss |  22 ++-
 src/router/index.js          |   9 ++
 src/views/tunnel/index.vue   |   2 +
 src/views/user/index.vue     | 256 +++++++++++++++++++++++++++++++++++
 4 files changed, 284 insertions(+), 5 deletions(-)
 create mode 100644 src/views/user/index.vue

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 323c29f..8540b3c 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -186,7 +186,7 @@ body,
   background-image: url("../images/topAndDown/sp_dbbj.png");
 
   .el-carousel__mask {
-    display: none;
+    display: none
   }
 
   .el-carousel {
@@ -526,16 +526,28 @@ input[type="number"] {
   width: 40px !important;
   height: 40px !important;
   border-radius: 25px !important;
+  border: 4px solid #05FEFF!important;
+  background-color: transparent!important;
 }
 
 .el-checkbox__input.is-checked .el-checkbox__inner {
-  width: 25px;
-  height: 25px;
-  background-color: #05FEFF !important;
+  //background-color: #05FEFF !important;
 }
 
 .el-checkbox__input.is-checked .el-checkbox__inner::after {
-  display: none;
+  //display: none;
+  width: 18px;
+  height: 18px;
+  border-width: 3px;
+  //border-left: 0;
+  //border-top: 0;
+  border-radius: 25px;
+  top: 6px;
+  left:6px;
+  //left: 12px;
+  font-size: 30px;
+  background: #05FEFF;
+  border-color: transparent!important;
 }
 
 //取消 确定按钮
diff --git a/src/router/index.js b/src/router/index.js
index eaa1354..eaf44cd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -50,6 +50,15 @@ const routes = [
       breadcrumb: true
     }
   },
+  {
+    path: '/user',
+    name: 'user',
+    component: () => import('@/views/user/index.vue'),
+    meta: {
+      title: 'user',
+      breadcrumb: true
+    }
+  },
   {
     path: '/tunnel/:siteId(\\d+)',
     name: 'tunnel',
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index f3f4e7f..48e2a87 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -163,6 +163,8 @@ const manageSelect = (index) => {
     router.push("/site");
   } else if (index === 1) {
     router.push("/tunnel/1");
+  }else if (index === 2) {
+    router.push("/user");
   }
 };
 const handleCommand=(item)=>{
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
new file mode 100644
index 0000000..d01563d
--- /dev/null
+++ b/src/views/user/index.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="router.push('/')">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="tunnel-title"></div>
+      <div class="all-del-btn">
+        <div class="all-btn">
+          全选
+        </div>
+        <div class="all-btn del-btn" @click="handleMoreDelete">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="user-content">
+      <div class="user-box">
+        <div class="user-top">
+          <div class="search-box">
+            <div>
+              <el-input
+                  v-model="username"
+                  placeholder="输入搜索内容"
+              />
+            </div>
+            <el-button type="primary" :icon="Search" style="margin-left: 20px">搜索</el-button>
+          </div>
+          <div>用户管理</div>
+          <div class="add-btn">添加用户</div>
+        </div>
+        <div class="device-table">
+          <el-table stripe
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                    :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="userData">
+            <el-table-column type="selection" width="80" />
+            <el-table-column prop="account" label="账户" align="center"/>
+            <el-table-column prop="password" label="密码" align="center"/>
+            <el-table-column prop="identity" label="身份" align="center"/>
+            <el-table-column label="操作" align="center">
+              <template #default>
+                <el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;">修改</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {Search} from '@element-plus/icons-vue'
+const router = useRouter()
+const username = ref()
+const userData = ref([
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  }
+])
+</script>
+
+<style scoped lang="scss">
+.tunnel-bgc {
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 38px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .user-content {
+    display: flex;
+    justify-content: center;
+    margin-top: 247px;
+
+    .user-box {
+      display: flex;
+      flex-direction: column;
+      width: 2194px;
+      height: 1321px;
+      background: #064B66;
+      border-radius: 20px;
+      border: 2px solid #05FEFF;
+      box-sizing: border-box;
+      padding: 73px 98px;
+
+      .user-top {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        > div:nth-child(2) {
+          margin-left: -250px;
+          height: 61px;
+          font-size: 46px;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 61px;
+        }
+
+        .add-btn {
+          width: 150px;
+          height: 50px;
+          line-height: 50px;
+          background: #08B7B8;
+          border-radius: 6px;
+          color: #FFFFFF;
+          font-size: 28px;
+          padding-left: 19px;
+        }
+
+        .search-box {
+          display: flex;
+
+          :deep(.el-button) {
+            width: 130px;
+            height: 50px;
+            background: #08B7B8;
+            border-radius: 6px;
+            border: none;
+            font-size: 28px;
+            color: #FFFFFF;
+          }
+
+          :deep(.el-input__wrapper) {
+            width: 292px;
+            height: 50px;
+            border-radius: 6px;
+            border: 1px solid #05FEFF;
+            background-color: transparent;
+            font-size: 28px;
+          }
+        }
+      }
+
+      :deep(.el-table--fit) {
+        width: 2000px !important;
+      }
+
+      :deep(.cell) {
+        height: 80px;
+        line-height: 80px;
+        color: #fff;
+        font-size: 38px;
+      }
+
+      :deep(.el-table tr) {
+        background-color: #1C5971;
+      }
+
+      :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+        background-color: #1C5971;
+      }
+
+      :deep(.el-table__row--striped) {
+        background-color: #13849C !important;
+      }
+
+      :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+        background-color: #13849C !important;
+      }
+
+      :deep(.el-table__cell) {
+        .el-input {
+          width: 180px;
+          height: 53px;
+        }
+
+        .el-input__wrapper {
+          border-radius: 6px;
+          border: 1px solid #05FEFF;
+          background-color: transparent;
+
+          .el-input__inner {
+            color: #FFFFFF;
+            font-size: 40px;
+          }
+        }
+      }
+
+      :deep(.el-table__inner-wrapper::before) {
+        display: none;
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file