5.14

src/components/Login/index.vue

@@ -20,8 +20,8 @@
           v-if="formFlog===0"
         >
           <div class="loginTitle">
-            <h3 class="title" @click="loginTob(0)">账户登录</h3>
-            <h3 class="title" @click="loginTob(1)">短信登录</h3>
+            <h3 class="title" :class="index==0?'active':''"  @click="loginTob(0)" >账户登录</h3>
+            <h3 class="title" :class="index!=0?'active':''"  @click="loginTob(1)">短信登录</h3>
           </div>
           <el-form-item prop="username" v-if="loginTitle === 0">
             <el-input
@@ -220,6 +220,7 @@ export default {
       countDown: "00",
       loginTitle: 0,
       formFlog:0,
+       index:0,
       mobileFlog:'',
       loginForm: {
         username: "",
@@ -316,6 +317,7 @@ export default {
         .catch((err) => {});
     },
     loginTob(type){
+      this.index=type;
       this.loginTitle=type
       this.$refs.loginForm.clearValidate()
       this.loginForm={
@@ -480,6 +482,13 @@ div /deep/.mobileItem .el-input__inner{
   @include position(fixed, 0, 0, 0, 0, 1000);
   background: rgba(4, 112, 204, 0.05);
 }
+.title {
+   padding-bottom: 20px;
+}
+.active{
+  color:#F56C6C;
+  border-bottom: 1px solid #F56C6C;
+}
 
 .slide-fade-enter-active {
   transition: all 0.3s ease;
@@ -495,8 +504,9 @@ div /deep/.mobileItem .el-input__inner{
   display: flex;
   justify-content: space-around;
   h3:hover {
-    text-decoration: underline;
-    cursor: default;
+    // text-decoration: underline;
+    color: #F56C6C ;
+    cursor: pointer;
   }
 }
 

src/views/login/index.vue

@@ -22,7 +22,7 @@
           auto-complete="on"
           label-position="left"
         >
-          <h3 class="title">账户登录</h3>
+          <h3 class="title active">账户登录</h3>
           <el-form-item prop="username">
             <el-input
               ref="username"
@@ -280,6 +280,7 @@ export default {
     }
   }
 }
+
 </style>
 <style lang="scss">
 @import '@/styles/variables.scss';