add user

src/components/Setting/components/User.vue

@@ -2,7 +2,20 @@
   <div class="user_manage_container">
     <div v-if="userFormVisible" class="add_user_form">
       <p class="title">添加新用户</p>
-      <div class="form_wrap"></div>
+      <div class="form_wrap">
+        <input type="text" class="username_form" />
+        <input
+          :type="showAddPassword ? 'text' : 'password'"
+          class="password_form"
+        />
+        <img
+          :src="showAddPassword ? Open : Eye"
+          class="eye"
+          @click="handleAddPasswordShow"
+        />
+        <p class="username_tips">*用户名限制信息</p>
+        <p class="password_tips">*用户名限制信息</p>
+      </div>
       <div class="btns">
         <div class="btn" @click="returnList">返回</div>
         <div class="btn">添加</div>
@@ -81,10 +94,18 @@
 <script setup>
 import { ref } from 'vue'
 import UserModal from 'cpns/dialogs/UserModal'
+import Eye from '@/assets/img/login/eye.png'
+import Open from '@/assets/img/login/open.png'
 const userFormVisible = ref(false)
 const changePasswordVisible = ref(false)
 const userModalVisible = ref(false)
 
+const showAddPassword = ref(false)
+
+const handleAddPasswordShow = () => {
+  showAddPassword.value = !showAddPassword.value
+}
+
 const showUpdatePassword = () => {
   changePasswordVisible.value = true
 }
@@ -207,6 +228,68 @@ const hideUserModal = () => {
       height: 150px;
       box-sizing: border-box;
       margin-bottom: 48px;
+      background: url(../../../assets/img/admin/add.png) no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .username_form {
+        position: absolute;
+        left: 47px;
+        top: 0;
+        width: 243px;
+        height: 17px;
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: 350;
+        letter-spacing: 0.06em;
+        color: #dfdfdf;
+        border: none;
+        outline: none;
+      }
+      .password_form {
+        position: absolute;
+        border: none;
+        outline: none;
+        left: 47px;
+        bottom: 41px;
+        width: 243px;
+        height: 17px;
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: 350;
+        letter-spacing: 0.06em;
+        color: #dfdfdf;
+      }
+      .eye {
+        width: 16px;
+        height: 13px;
+        right: 5px;
+        bottom: 46px;
+        position: absolute;
+      }
+      .username_tips {
+        position: absolute;
+        left: 9px;
+        top: 44px;
+        width: 320px;
+        height: 17px;
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: 350;
+        letter-spacing: 0.06em;
+        color: #fa1c1c;
+      }
+      .password_tips {
+        position: absolute;
+        left: 9px;
+        bottom: 0;
+        width: 320px;
+        height: 17px;
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: 350;
+        letter-spacing: 0.06em;
+        color: #fa1c1c;
+      }
     }
     .btns {
       width: 187px;
@@ -253,6 +336,8 @@ const hideUserModal = () => {
       width: 330px;
       height: 57px;
       margin-bottom: 59px;
+      background: url(../../../assets/img/admin/password.png) no-repeat;
+      background-size: 100% 100%;
     }
     .btns {
       width: 187px;

src/components/Test.vue

@@ -58,8 +58,18 @@
       <p class="title">风机</p>
       <p class="num">000/000</p>
       <div class="btn_wrap">
-        <div :class="testStore.draughtFan ? 'close' : 'open'">打开</div>
-        <div :class="!testStore.draughtFan ? 'close' : 'open'">关闭</div>
+        <div
+          :class="testStore.draughtFan ? 'close' : 'open'"
+          @click="changeDraughtStatus(1)"
+        >
+          打开
+        </div>
+        <div
+          :class="!testStore.draughtFan ? 'close' : 'open'"
+          @click="changeDraughtStatus(2)"
+        >
+          关闭
+        </div>
       </div>
     </div>
     <div class="common_set update_wrap">
@@ -134,6 +144,18 @@ const changeAirStatus = flag => {
     }
   }
 }
+
+const changeDraughtStatus = flag => {
+  if (flag == 1) {
+    if (!testStore.draughtFan) {
+      testStore.updateDraughtFan(true)
+    }
+  } else {
+    if (testStore.draughtFan) {
+      testStore.updateDraughtFan(false)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>