保存进度！

企业级管理系统/前端/admin_system/src/views/account/Login.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:23:54
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-14 21:23:51
+ * @LastEditTime: 2022-12-14 22:39:54
  * @FilePath: \admin_system\src\views\account\Login.vue
  * @Description: 
  * 
@@ -20,11 +20,15 @@
       <el-form ref="form" :model="form">
         <el-form-item>
           <label class="form-label">用户名</label>
-          <el-input type="text" v-model="loginForm.username"></el-input>
+          <el-input type="text" v-model.lazy.trim="loginForm.username"></el-input>
         </el-form-item>
         <el-form-item>
           <label class="form-label">密码</label>
-          <el-input type="password" v-model="loginForm.password"></el-input>
+          <el-input type="password" v-model.lazy.trim="loginForm.password"></el-input>
+        </el-form-item>
+        <el-form-item v-show="current_menu === tab_menu[1].type">
+          <label class="form-label">确认密码</label>
+          <el-input type="password" v-model.lazy.trim="loginForm.confirm_password"></el-input>
         </el-form-item>
         <el-form-item>
           <label class="form-label">验证码</label>
@@ -47,7 +51,6 @@
 
 <script>
 // import { ref } from "vue";
-
 export default {
   name: "loginPage",
   data() {
@@ -55,12 +58,13 @@ export default {
       loginForm: {
         username: "",
         password: "",
+        confirm_password: "",
       },
       tab_menu: [
         { type: "login", label: "登录" },
         { type: "regiester", label: "注册" },
       ],
-      current_menu: "login",
+      current_menu: "",
     }
   },
   methods: {
@@ -68,10 +72,14 @@ export default {
       this.current_menu = type;
     }
   },
+  created() {
+    //初始化菜单选项
+    this.current_menu = this.tab_menu[0].type;
+  }
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 #login {
   height: 100vh;
   background-color: #344a5f;
@@ -86,7 +94,7 @@ export default {
   border-radius: 5px;
 }
 
-.menu-tab {
+/*.menu-tab {
   text-align: center;
   margin-bottom: 15px;
 
@@ -103,6 +111,24 @@ export default {
       background-color: rgba(0, 0, 0, 0.1);
     }
   }
+}*/
+.menu-tab {
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.menu-tab li {
+  display: inline-block;
+  padding: 10px 24px;
+  margin: 0 10px;
+  color: #fff;
+  font-size: 16px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.menu-tab .current {
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .form-label {
@@ -112,7 +138,6 @@ export default {
 }
 
 .el-button-block {
-  // display: block;
   width: 100%;
 }
 </style>