登录样式更改

components/header.vue

@@ -73,7 +73,6 @@
   left:980px;
   cursor:pointer;
   font-size: 10px;
-  background: #bfa;
 }
   .bg {}
 

pages/login/user.vue

@@ -2,7 +2,9 @@
   <div class="user">
     <div class="user-login">
       <div class="login-type flex">
-        <div class="pos">{{message}}</div>
+        <!-- <div class="pos">{{message}}</div> -->
+        <div @click="change" :class='[type==0?"active":""]' >密码登录</div>
+        <div @click="change" :class='[type==2?"active":""]' >手机验证码登录</div>
       </div>
       <div class="el-form">
         <!-- 密码登录 -->
@@ -38,7 +40,7 @@
           <div @click="forget" class="handle">忘记密码</div>
           <div @click="examine" class="handle">我要注册</div>
         </div>
-        <div class="code-login handle" @click="changephone">{{changemessage}}</div>
+        <!-- <div class="code-login handle" @click="changephone">{{changemessage}}</div> -->
       </div>
     </div>
   </div>
@@ -89,6 +91,9 @@
     created() {
      },
     methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
       //发送短信验证码
       async getPhoneCode(){
         let message = {}
@@ -164,23 +169,23 @@
           console.log(err);
         }
       },
-      changephone() {
+      /* changephone() {
         let type = this.type;
-        if (type == '0' || type == '1') {
+        if (type == '0' || type == '2') {
           this.type = 2;
-          this.changemessage = "密码登录"
-          this.message = "手机验证码登录"
-        } else if (type == '2') {
-          this.type = 0;
           this.changemessage = "手机验证码登录"
           this.message = "密码登录"
+        } else if (type == '2') {
+          this.type = 0;
+          this.changemessage = "密码登录"
+          this.message = "手机验证码登录"
         }
-      },
+      }, */
       change() {
         let type = this.type;
         if (type == '0') {
-          this.type = 1
-        } else if (type == '1') {
+          this.type = 2
+        } else if (type == '2') {
           this.type = 0
         }
       },
@@ -247,15 +252,19 @@
   .login-type {
     width: 100%;
     height: .77rem;
-    border-bottom: 2px solid rgba(4, 134, 254, 1);
+
   }
   
+  .login-type .active{
+    border-bottom: 2px solid rgba(4, 134, 254, 1);
+    color: rgba(4, 134, 254, 1);
+  }
   .login-type>div {
     height: 0.77rem;
     width: 1.9rem;
     text-align: center;
     line-height: 0.77rem;
-    color: rgba(4, 134, 254, 1);
+    color: gray;
     font-size: .2rem;
   }