no message

src/views/Login.vue

@@ -1,25 +1,34 @@
+
 <template>
   <div class="login">
     <div class="tab">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="账号登陆" name="first">
-          <div class="input-div">
-            <img src="./img/phone.png" alt="" class="phone-img">
-            <el-input class="phone" v-model="input" placeholder="请输入手机号/邮箱"></el-input>
+        <div style="width: 100%;text-align: center">
+          <div class="tab-wrapper">
+            <img alt="" style="display: inline-block;position: absolute;top:50px;" :class="flag1? 'active1':'active2'" src="./img/img_2.png">
+            <div @click="handleChange" class="tab1" :class="flag1? 'active':''">账号登陆</div>
+            <img alt="" style="display: inline-block;position: absolute;top:-12px;" src="./img/split.png">
+            <div @click="handleChange" class="tab2" :class="flag2? 'active':''">人脸识别</div>
           </div>
-          <div class="input-div">
-            <img src="./img/password.png" alt="" class="password-img">
-            <el-input v-model="password" class="password" placeholder="请输入登陆密码"></el-input>
+          <div v-if="flag1">
+            <div class="input-div">
+              <img src="./img/phone.png" alt="" class="phone-img">
+              <el-input class="phone" v-model="input" placeholder="请输入手机号/邮箱"></el-input>
+            </div>
+            <div class="input-div">
+              <img src="./img/password.png" alt="" class="password-img">
+              <el-input v-model="password" class="password" placeholder="请输入登陆密码"></el-input>
+            </div>
+            <div style="text-align: left">
+            <el-checkbox v-model="checked">记住密码</el-checkbox>
+            </div>
           </div>
-          <el-checkbox v-model="checked">记住密码</el-checkbox>
-        </el-tab-pane>
-        <el-tab-pane label="人脸识别" name="second">
-          <div class="code">
-            人脸扫描
+          <div v-if="flag2">
+            <div class="code">
+              人脸扫描
+            </div>
           </div>
-        </el-tab-pane>
-      </el-tabs>
-      <div v-if="activeName === 'first'">
+        </div>
+      <div v-if="activeName === 'first'" class="button-div">
         <el-button type="primary">登陆</el-button>
         <el-button>取消</el-button>
       </div>
@@ -41,12 +50,18 @@ export default {
       activeName: 'first',
       input: '',
       password: '',
-      checked: false
+      checked: false,
+      flag1: true,
+      flag2: false
     };
   },
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
+    },
+    handleChange() {
+      this.flag1 = !this.flag1
+      this.flag2 = !this.flag2
     }
   }
 }
@@ -63,10 +78,66 @@ export default {
   background-size: cover;
 }
 
+
+
+
+/deep/ .el-tabs__nav {
+  float: none;
+}
+
+
+/deep/ .el-tabs__active-bar {
+  display: none;
+}
+
 /deep/ .el-tabs__item {
-  font-size: 30px !important;
-  padding-bottom: 10px;
-  height: 50px;
+
+}
+
+.tab-wrapper {
+  width: 500px;
+  text-align: center;
+
+  .tab2 {
+    margin-left: 33px;
+  }
+  .tab1 {
+    margin-right: 33px;
+  }
+
+  .tab1,.tab2 {
+    width: 104px;
+    font-size: 24px !important;
+    font-weight: 1000;
+    height: 50px;
+    color: white;
+    display: inline;
+
+
+    &:hover {
+      cursor: pointer
+    }
+  }
+
+  .active {
+
+  }
+  .active1{
+    left: 147px;
+  }
+
+  .active2{
+    left: 310px;
+  }
+
+
+
+
+  .line {
+    width: 2px;
+    height: 20px;
+    background-color: #000;
+  }
 }
 
 .tab {
@@ -85,19 +156,23 @@ export default {
     position: absolute;
     width: 22px;
     height: 28px;
-    top: 69px;
+    top: 100px;
   }
 
   .password-img {
     width: 21px;
     height: 21px;
     position: absolute;
-    top: 191px;
+    top: 223px;
   }
 
 
 }
 
+.button-div {
+  text-align: left;
+}
+
 .input-div {
 }
 
@@ -112,6 +187,7 @@ export default {
   color: #fff;
   bottom: 15px;
   font-size: 20px;
+  color: rgb(0, 255, 231);
 }
 
 .left {
@@ -157,6 +233,8 @@ export default {
   width: 25px;
   height: 25px;
   font-size: 20px;
+  border-radius: 5px;
+  background-image: url("./img/img2.png")
 }
 
 /deep/ .el-button {
@@ -169,11 +247,14 @@ export default {
 }
 
 /deep/ .el-button--default {
-  margin-left: 93px;
+  margin-left: 46px !important;
+  border: 3px solid rgb(23, 73, 146);
+  background-color: rgb(8, 38, 88);
 }
 
 /deep/ .el-button--primary {
   margin-left: 18px;
+  background-image: url("./img/img.png")
 }
 
 </style>