11

src/views/index/login/Login.vue

 <template>
   <div class="container">
     <div class="flex title_Login">
-      <div @click="toLogin">
-        <div class="title">账号密码登录</div>
-        <div class="line"></div>
+       <div class="title" style="width: 30%" @click="toCodeLogin">
+        <div :class="changeLogin == 2 ? 'change_login' : ''">验证码登录</div>
       </div>
-      <div class="codeLogin" @click="toCodeLogin">
-        <div class="title">验证码登录</div>
-        <div class="line"></div>
+      <div class="title" style="width: 35%" @click="toLogin">
+        <div :class="changeLogin == 1 ? 'change_codelogin' : ''">
+          账号密码登录
         </div>
       </div>
+     
+    </div>
     <div>
       <el-form
         :model="loginForm"
@@ -173,7 +174,7 @@ export default {
           { min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
         ],
       },
-      changeLogin: 1,
+      changeLogin: 2,
     };
   }, 
   created() {
@@ -259,7 +260,6 @@ export default {
     // 登录
     submitForm() {
       this.$refs["loginFormRef"].validate((valid) => {
-       
         if (!valid) return;
         let obj = {};
         if (this.changeLogin == 1) {
@@ -311,28 +311,25 @@ export default {
   overflow: hidden;
   .title_Login {
     justify-content: space-between;
+    margin: 19px 0 0 0;
     .title {
-      margin: 19px 0 6px 0;
-      width: 132px;
       height: 20px;
       font-size: 22px;
       font-weight: 500;
       color: var(--color);
       line-height: 20px;
     }
-    .line {
-      width: 125px;
-      height: 3px;
-      background: var(--color);
-      border-radius: 2px;
-    }
-    .codeLogin {
-      .title {
-        font-size: 18px !important;
-      }
-      .line {
-        width: 100px;
+    .change_login {
+      width: 100%;
+      font-size: 19px;
+      margin-top: 8px;
+      border-bottom: 2px solid var(--color);
     }
+    .change_codelogin {
+      width: 100%;
+      font-size: 17px;
+      margin-top: 8px;
+      border-bottom: 2px solid var(--color);
     }
   }