提交

src/views/Login/Login.vue

@@ -5,9 +5,9 @@
                 <div class="tab-wrapper">
                     <img :class="flag1? 'active1':'active2'" alt=""
                          src="img/img_2.png" style="display: inline-block;position: absolute;top:50px;">
-                    <div :class="flag1? 'active':''" class="tab1" @click="handleChange">账号登陆</div>
+                    <div :class="flag1? 'active':''" class="tab1" @click="handleChange">账号登录</div>
                     <img alt="" src="./img/split.png" style="display: inline-block;position: absolute;top:-12px;">
-                    <div :class="flag2? 'active':''" class="tab2" @click="handleChange">人脸识别</div>
+                    <div :class="flag2? 'active':''" class="tab2" @click="handleChange1">人脸识别</div>
                 </div>
                 <div v-if="flag1">
                     <div class="input-div">
@@ -16,7 +16,8 @@
                     </div>
                     <div class="input-div">
                         <img alt="" class="password-img" src="./img/password.png">
-                        <el-input v-model="password" class="password" placeholder="请输入登陆密码"></el-input>
+                        <el-input v-model="password" class="password" placeholder="请输入登陆密码"
+                                  show-password></el-input>
                     </div>
                     <div style="text-align: left">
                         <el-checkbox v-model="checked" class="rememberMe">记住密码</el-checkbox>
@@ -84,7 +85,9 @@ export default {
                         localStorage.removeItem("password");
                     }
                     this.$message.success("登录成功")
-                    this.$router.push('/table1');
+                    setTimeout(() => {
+                        this.$router.push('/xndc');
+                    }, 400);
                 }
             }
         },
@@ -96,8 +99,12 @@ export default {
             console.log(tab, event);
         },
         handleChange() {
-            this.flag1 = !this.flag1
-            this.flag2 = !this.flag2
+            this.flag1 = true
+            this.flag2 = false
+        },
+        handleChange1() {
+            this.flag1 = false
+            this.flag2 = true
         }
     }
 }
@@ -138,6 +145,7 @@ export default {
 
   .tab1 {
     margin-right: 33px;
+
   }
 
   .tab1, .tab2 {
@@ -145,7 +153,7 @@ export default {
     font-size: 24px !important;
     font-weight: 1000;
     height: 50px;
-    color: white;
+    color: #c4c4c4;
     display: inline;
 
 
@@ -155,7 +163,10 @@ export default {
   }
 
   .active {
-
+    color: white;
+    background: url('./img/img_3.png') no-repeat;
+    background-position-y: bottom;
+    background-position-x: 50%;
   }
 
   .active1 {
@@ -166,7 +177,6 @@ export default {
     left: 310px;
   }
 
-
   .line {
     width: 2px;
     height: 20px;
@@ -174,6 +184,7 @@ export default {
   }
 }
 
+
 .tab {
   width: 500px;
   height: 603px;
@@ -271,6 +282,16 @@ export default {
   background-image: url("./img/img2.png")
 }
 
+/deep/ .el-input__clear {
+  height: 163px;
+  font-size: 20px;
+}
+
+/deep/ .el-icon-view:before {
+  content: "\e6ce";
+  font-size: 25px;
+}
+
 /deep/ .el-button {
   height: 50px;
   width: 188px;