login form

src/components/LoginForm.vue

@@ -1,16 +1,112 @@
 <template>
-  <div class="login_modal"></div>
+  <div class="login_modal">
+    <img :src="showPassword ? Open : Eye" class="eye" @click="handleEye" />
+    <p class="tips">{{ tip }}</p>
+    <input
+      type="text"
+      v-model="username"
+      class="username"
+      placeholder="请输入用户名"
+    />
+    <input
+      :type="showPassword ? 'text' : 'password'"
+      class="password"
+      v-model="password"
+      placeholder="请输入设备密码"
+    />
+    <div class="login_btn" @click="handleLogin"></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'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const showPassword = ref(false)
+const username = ref('')
+const password = ref('')
+const tip = ref('')
+
+const handleEye = () => {
+  showPassword.value = !showPassword.value
+}
+
+const handleLogin = () => {
+  if (username.value == '') {
+    tip.value = '用户名不能为空'
+    return
+  }
+  if (password.value == '') {
+    tip.value = '密码不能为空'
+    return
+  }
+  tip.value = ''
+  router.push('/')
+}
+</script>
 
 <style lang="scss" scoped>
 .login_modal {
   width: 476px;
   height: 414px;
   border-radius: 16px;
-  background: #fff;
+  overflow: hidden;
+  background: url(../assets/img/login/login.png) no-repeat;
+  background-size: 100% 100%;
   box-sizing: border-box;
-  padding: 48px 73px 62px 73px;
+  position: relative;
+  .eye {
+    width: 16px;
+    height: 13px;
+    position: absolute;
+    right: 78.04px;
+    top: 211px;
+  }
+  .tips {
+    font-family: Source Han Sans CN;
+    font-size: 12px;
+    font-weight: 350;
+    letter-spacing: 0.06em;
+    color: #fa1c1c;
+    position: absolute;
+    left: 73px;
+    bottom: 143px;
+  }
+  .username {
+    border: none;
+    outline: none;
+    width: 253px;
+    height: 17px;
+    position: absolute;
+    left: 120px;
+    top: 142px;
+    font-family: Source Han Sans CN;
+    font-size: 12px;
+    font-weight: 350;
+    letter-spacing: 0.06em;
+  }
+  .password {
+    border: none;
+    outline: none;
+    width: 253px;
+    height: 17px;
+    position: absolute;
+    left: 120px;
+    top: 209px;
+    font-family: Source Han Sans CN;
+    font-size: 12px;
+    font-weight: 350;
+    letter-spacing: 0.06em;
+  }
+  .login_btn {
+    position: absolute;
+    width: 340px;
+    height: 68px;
+    left: 68px;
+    bottom: 62px;
+  }
 }
 </style>

src/components/Operator.vue

@@ -25,7 +25,8 @@
         <div class="num">000/100</div>
       </div>
     </div>
-    <WarnModal />
+    <!-- <WarnModal /> -->
+    <!-- <LogPicker /> -->
   </div>
 </template>