修改管理员密码

src/components/Operator.vue

@@ -17,8 +17,11 @@
         <p>消毒设置</p>
         <p>SET</p>
       </div>
-      <div class="set_form"></div>
-      <div class="start">开始消毒</div>
+      <div class="set_form">
+        <input type="number" v-model="roomSize" class="room_size" />
+        <div class="log">12</div>
+      </div>
+      <div class="start" @click="startDisinfect">开始消毒</div>
       <div class="progress">
         <p class="title">消毒进度</p>
         <div class="tube"></div>
@@ -33,6 +36,13 @@
 <script setup>
 import LogPicker from 'cpns/dialogs/LogPicker'
 import WarnModal from 'cpns/dialogs/WarnModal'
+import { ref } from 'vue'
+
+const roomSize = ref(0)
+
+const startDisinfect = () => {
+  console.log('开始消毒')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -130,6 +140,36 @@ import WarnModal from 'cpns/dialogs/WarnModal'
       height: 190px;
       box-sizing: border-box;
       margin-bottom: 41px;
+      overflow: hidden;
+      background: url(../assets/img/operator/form.png) no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .room_size {
+        position: absolute;
+        top: 45px;
+        left: 23px;
+        width: 189px;
+        height: 20px;
+        text-align: center;
+        border: none;
+        outline: none;
+      }
+      .log {
+        position: absolute;
+        top: 145px;
+        left: 0px;
+        width: 240px;
+        height: 42px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Source Han Sans CN;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: 0.06em;
+        color: #0e0e0e;
+      }
     }
     .start {
       margin-bottom: 30px;

src/components/Setting/components/Admin.vue

@@ -30,14 +30,77 @@
         </g>
       </svg>
     </div>
-    <div class="form_wrap"></div>
+    <div class="form_wrap">
+      <input
+        :type="initShowPassword ? 'text' : 'password'"
+        class="init_password"
+        v-model="initPassword"
+        placeholder="请输入初始密码"
+      />
+      <img
+        :src="initShowPassword ? Open : Eye"
+        class="init_eye"
+        @click="handleInitEye"
+      />
+      <p class="init_tip">{{ initTip }}</p>
+
+      <input
+        :type="updateShowPassword ? 'text' : 'password'"
+        class="update_password"
+        v-model="updatePassword"
+        placeholder="请输入更改密码"
+      />
+      <img
+        :src="updateShowPassword ? Open : Eye"
+        class="update_eye"
+        @click="handleUpdateEye"
+      />
+      <p class="update_tip">{{ updateTip }}</p>
+    </div>
     <div class="btn_wrap">
-      <div class="btn">修改</div>
+      <div class="btn" @click="handleUpdatePassword">修改</div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Eye from '@/assets/img/login/eye.png'
+import Open from '@/assets/img/login/open.png'
+import { ref } from 'vue'
+
+const initShowPassword = ref(false)
+const updateShowPassword = ref(false)
+const initPassword = ref('')
+const updatePassword = ref('')
+const initTip = ref('')
+const updateTip = ref('')
+
+const handleInitEye = () => {
+  initShowPassword.value = !initShowPassword.value
+}
+
+const handleUpdateEye = () => {
+  updateShowPassword.value = !updateShowPassword.value
+}
+
+const handleUpdatePassword = () => {
+  if (initPassword.value == '') {
+    initTip.value = '初始密码不能为空'
+    return
+  }
+  if (updatePassword.value == '') {
+    updateTip.value = '更改密码不能为空'
+    return
+  }
+  if (initPassword.value == updatePassword.value) {
+    initTip.value = ''
+    updateTip.value = '更改密码不能与初始密码相同'
+    return
+  }
+  initTip.value = ''
+  updateTip.value = ''
+}
+</script>
 
 <style lang="scss" scoped>
 .admin_password_container {
@@ -55,6 +118,76 @@
     width: 330px;
     height: 151px;
     box-sizing: border-box;
+    background: url(../../../assets/img/admin/form.png) no-repeat;
+    background-size: 330px 126px;
+    overflow: hidden;
+    position: relative;
+    .init_password {
+      position: absolute;
+      width: 234px;
+      height: 17px;
+      left: 47px;
+      top: 2px;
+      font-family: Source Han Sans CN;
+      font-size: 12px;
+      font-weight: 350;
+      letter-spacing: 0.06em;
+      color: #06518b;
+      border: none;
+      outline: none;
+    }
+    .update_password {
+      position: absolute;
+      width: 234px;
+      height: 17px;
+      left: 47px;
+      top: 93px;
+      font-family: Source Han Sans CN;
+      font-size: 12px;
+      font-weight: 350;
+      letter-spacing: 0.06em;
+      color: #06518b;
+      border: none;
+      outline: none;
+    }
+    .init_eye {
+      position: absolute;
+      width: 16px;
+      height: 13px;
+      right: 5px;
+      top: 5px;
+    }
+    .update_eye {
+      position: absolute;
+      width: 16px;
+      height: 13px;
+      right: 5px;
+      bottom: 41px;
+    }
+    .init_tip {
+      position: absolute;
+      width: 323px;
+      height: 17px;
+      left: 6px;
+      top: 44px;
+      font-family: Source Han Sans CN;
+      font-size: 12px;
+      font-weight: 350;
+      letter-spacing: 0.06em;
+      color: #fa1c1c;
+    }
+    .update_tip {
+      position: absolute;
+      width: 323px;
+      height: 17px;
+      left: 6px;
+      bottom: 2px;
+      font-family: Source Han Sans CN;
+      font-size: 12px;
+      font-weight: 350;
+      letter-spacing: 0.06em;
+      color: #fa1c1c;
+    }
   }
   .btn_wrap {
     display: flex;