用户管理

src/components/Setting.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="setting_contaienr">
-    <div class="left_container"></div>
-    <div class="right_container"></div>
-  </div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped>
-.setting_contaienr {
-  display: flex;
-  align-items: center;
-  margin-bottom: 30px;
-  height: 580px;
-  box-sizing: border-box;
-  .left_container {
-    height: 580px;
-    width: 424px;
-    margin-right: 30px;
-    box-sizing: border-box;
-    border-radius: 16px;
-    background: #ffffff;
-  }
-  .right_container {
-    height: 580px;
-    flex: 1;
-    box-sizing: border-box;
-    border-radius: 16px;
-    background: #ffffff;
-  }
-}
-</style>

src/components/Setting/components/Date.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>da</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/components/Setting/components/Device.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="device_container">
+    <div class="row_wrap">
+      <p class="title">加液蠕动泵</p>
+      <p class="num">000/000</p>
+      <div class="btn">设置</div>
+    </div>
+    <div class="row_wrap">
+      <p class="title">喷液蠕动泵</p>
+      <p class="num">000/000</p>
+      <div class="btn">设置</div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.device_container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  padding-bottom: 380px;
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(1, 1fr);
+  row-gap: 20px;
+  .row_wrap {
+    width: 726px;
+    height: 80px;
+    border-radius: 14px;
+    background: #f6f6f6;
+    box-sizing: border-box;
+    padding: 0 18px 0 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title {
+      font-family: Zona Pro;
+      font-size: 20px;
+      font-weight: normal;
+      letter-spacing: 0.06em;
+      color: #000000;
+    }
+    .num {
+      font-family: Source Han Sans CN;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      color: #000000;
+    }
+    .btn {
+      width: 87px;
+      height: 45px;
+      border-radius: 23px;
+      background: #06518b;
+      font-family: Source Han Sans CN;
+      font-size: 14px;
+      font-weight: normal;
+      letter-spacing: 0.1em;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>

src/components/Setting/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="setting_contaienr">
+    <div class="left_container">
+      <div class="tab_wrap">
+        <p class="active_line" v-show="activeTab == 1"></p>
+        <p :class="activeTab == 1 ? 'title active' : 'title'">设备参数配置</p>
+        <div class="btn" @click="changeActiveTab(1)">配置</div>
+      </div>
+      <div class="tab_wrap">
+        <p class="active_line" v-show="activeTab == 2"></p>
+        <p :class="activeTab == 2 ? 'title active' : 'title'">修改管理员密码</p>
+        <div class="btn" @click="changeActiveTab(2)">修改</div>
+      </div>
+      <div class="tab_wrap">
+        <p class="active_line" v-show="activeTab == 3"></p>
+        <p :class="activeTab == 3 ? 'title active' : 'title'">用户管理</p>
+        <div class="btn" @click="changeActiveTab(3)">管理</div>
+      </div>
+      <div class="tab_wrap">
+        <p class="active_line" v-show="activeTab == 4"></p>
+        <p :class="activeTab == 4 ? 'title active' : 'title'">日期/时间设置</p>
+        <div class="btn" @click="changeActiveTab(4)">配置</div>
+      </div>
+    </div>
+    <div class="right_container">
+      <Admin v-if="activeTab == 2" />
+      <Date v-if="activeTab == 4" />
+      <Device v-if="activeTab == 1" />
+      <User v-if="activeTab == 3" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Admin from './components/Admin.vue'
+import Date from './components/Date.vue'
+import Device from './components/Device.vue'
+import User from './components/User.vue'
+
+const activeTab = ref(1)
+
+const changeActiveTab = index => {
+  activeTab.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.setting_contaienr {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  height: 580px;
+  box-sizing: border-box;
+  .left_container {
+    height: 580px;
+    width: 424px;
+    margin-right: 30px;
+    box-sizing: border-box;
+    border-radius: 16px;
+    background: #ffffff;
+    padding: 20px;
+    padding-bottom: 180px;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    row-gap: 20px;
+    .tab_wrap {
+      width: 384px;
+      height: 80px;
+      border-radius: 14px;
+      background: #f6f6f6;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 18px;
+      padding-left: 37px;
+      position: relative;
+      .title {
+        font-family: Zona Pro;
+        font-size: 18px;
+        font-weight: normal;
+        letter-spacing: 0.06em;
+        color: #000000;
+      }
+      .active {
+        color: #06518b;
+      }
+      .btn {
+        width: 87px;
+        height: 45px;
+        border-radius: 23px;
+        background: #06518b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Source Han Sans CN;
+        font-size: 14px;
+        font-weight: normal;
+        letter-spacing: 0.1em;
+        color: #ffffff;
+      }
+      .active_line {
+        position: absolute;
+        left: 20px;
+        top: 24px;
+        width: 4px;
+        height: 32px;
+        border-radius: 2px;
+        background: #06518b;
+      }
+    }
+  }
+  .right_container {
+    height: 580px;
+    flex: 1;
+    box-sizing: border-box;
+    border-radius: 16px;
+    background: #ffffff;
+    overflow: hidden;
+  }
+}
+</style>