updata

f/web-kboss/src/views/login/indexNew.vue

@@ -42,45 +42,31 @@
 
             <!-- 登录容器 -->
             <div class="login-container login-form-style">
-              <!-- 登录类型切换：账号登录/手机号登录 -->
-              <div class="login-type">
-                <span :class="{ activeType: loginType === '0' }" @click="changeLoginType('0')">账号登录</span>
-                <span :class="{ activeType: loginType === '1' }" @click="changeLoginType('1')">手机号登录</span>
-              </div>
-
-              <!-- Element UI 标签页组件 -->
-              <el-tabs v-model="activeName" @tab-click="handleClick">
-                <!-- 登录表单 -->
               <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form-l" autocomplete="on"
                 label-position="left">
 
-                  <!-- 用户名/手机号输入框 -->
                 <el-form-item prop="username"
                   style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
                   <div class="user-input">
                     <span class="svg-container icon-box">
-                        <!-- 用户图标 -->
                       <img src="../../assets/kyy/用户.svg" alt="">
                     </span>
-                      <el-input id="uesr-name-id" ref="username" v-model="loginForm.username" placeholder="请输入用户名/手机号"
+                    <el-input id="uesr-name-id" ref="username" v-model="loginForm.username" placeholder="请输入账户"
                       name="username" type="text" class="userInput" />
                   </div>
                 </el-form-item>
 
-                  <!-- 密码输入框（仅在账号登录模式下显示） -->
+                <el-tooltip v-model="capsTooltip" style="margin-bottom: 7px"
-                  <el-tooltip v-if="loginType === '0'" v-model="capsTooltip" style="margin-bottom: 7px"
                   content="Caps lock is On" placement="right" manual>
                   <el-form-item prop="password" class="password-mobile"
                     style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
                     <div class="user-input">
                       <span class="svg-container icon-box" style="padding: 2px;color: #9699a0;">
-                          <!-- 密码图标 -->
                         <img src="./svg/密码.svg" style="color: #6c7079" alt="">
                       </span>
                       <el-input id="passwordId" :key="passwordType" ref="password" v-model="loginForm.password"
                         :type="passwordType" placeholder="请输入密码" name="password" @keyup.native="checkCapslock"
                         @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
-                        <!-- 显示/隐藏密码按钮 -->
                       <span class="show-pwd" @click="showPwd">
                         <svg-icon style="margin-right: 10px;cursor: pointer"
                           :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
@@ -89,47 +75,42 @@
                   </el-form-item>
                 </el-tooltip>
 
-                  <!-- 验证码输入框（仅在手机号登录模式下显示） -->
+                <el-form-item prop="mobile"
-                  <div v-else style="display:flex;margin-top:20px;">
+                  style="background-color: white; border: 1px solid #d9d9d9;width: 300px;">
-                    <el-form-item prop="" class="invitecode"
+                  <div class="user-input">
+                    <span class="svg-container icon-box">
+                      <img src="../../assets/kyy/用户.svg" alt="">
+                    </span>
+                    <el-input v-model="loginForm.mobile" placeholder="请输入手机号" name="mobile" type="text"
+                      class="userInput" />
+                  </div>
+                </el-form-item>
+
+                <div style="display:flex;margin-top:20px;">
+                  <el-form-item prop="vcode" class="invitecode"
                     style="background-color: white; border: 1px solid #d9d9d9;">
                     <div class="user-input">
                       <span class="svg-container icon-box">
-                          <!-- 验证码图标 -->
                         <img src="./svg/密码.svg" style="color: #6c7079;width: 19px;height: 17px;" alt="">
                       </span>
                       <el-input ref="vcode" v-model="loginForm.vcode" placeholder="请输入验证码" name="vcode" type="text" />
                     </div>
                   </el-form-item>
-                    <!-- 获取验证码按钮 - 添加防抖功能 -->
                   <span :disabled="isDisabled || isGettingCode" class="getCodeStyleNew"
                     style="height:40px;margin-left:10px" @click="debouncedGetCode">
                     {{ SendCode_text }}
                   </span>
                 </div>
 
-                  <!-- 登录按钮 -->
                 <div style="display:flex;">
                   <el-button @keyup.enter.native="handleLogin('loginForm')" :loading="loading" type="primary"
-                      style="width: 300px;margin-top: 30px;margin-bottom: 10px" class="login-btn"
+                    style="width: 300px; display: flex; align-items: center; justify-content: center;" class="login-btn"
                     @click.native.prevent="handleLogin('loginForm')">
                     立即登录
                   </el-button>
                 </div>
 
-                  <!-- 微信登录按钮 -->
-                  <!-- <div style="display:flex;margin-bottom: 30px">
-                    <el-button style="width: 300px;margin-top: 10px;color: #1890ff" class="login-btn"
-                      @click.native.prevent="wxBtn">
-                      微信登录
-                    </el-button>
-                  </div> -->
-
-                  <!-- 底部链接：忘记密码和注册 -->
                 <div class="two-btn">
-                    <!-- <span type="text" class="forget-password" @click="resetPassword()">
-                      忘记密码?
-                    </span> -->
                   <i></i>
                   <span :loading="loading" type="primary" class="go-register"
                     style="width: 127px; margin-bottom: 30px; margin-left: 0px" @click.native.prevent="handleRegister"
@@ -138,7 +119,6 @@
                   </span>
                 </div>
               </el-form>
-              </el-tabs>
 
               <!-- 重置密码对话框 -->
               <el-dialog title="重置密码" :visible.sync="dialogVisible" width="25%" class="myDialog">
@@ -261,8 +241,9 @@ export default {
 
       // 登录表单数据
       loginForm: {
-        username: "",  // 用户名/手机号
+        username: "",  // 账户
         password: "",  // 密码
+        mobile: "",    // 手机号
         vcode: "",     // 验证码
         codeid: ""     // 验证码ID
       },
@@ -271,8 +252,12 @@ export default {
 
       // 表单验证规则
       rules: {
-        username: [{ required: true, message: "请输入用户名/手机号", trigger: "blur" }],
+        username: [{ required: true, message: "请输入账户", trigger: "blur" }],
         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        mobile: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
+        ],
         vcode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
       },
 
@@ -1048,7 +1033,6 @@ $dark_gray: #889aa4;
   width: 1400px;
   justify-content: space-around;
   align-items: center;
-  // align-items: center;
   margin-top: -60px;
 
   .left {
@@ -1074,252 +1058,182 @@ $dark_gray: #889aa4;
   }
 }
 
-
+/* 统一登录表单容器 */
-::v-deep .el-input__inner {
-  padding: 0 !important;
-  border: 1px solid red;
-}
-
 .login-form {
-  padding-left: 52px;
+  padding: 40px 50px;
-  padding-right: 49px;
-
-  //width: 481px;
-  //height: 521px;
   mix-blend-mode: normal;
   background-color: white;
   border-radius: 24px;
+  box-sizing: border-box;
 }
 
-.user-input {
+/* 登录标题统一间距 */
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-}
-
 .login-text {
-  margin-top: 20px;
+  display: block;
-  mix-blend-mode: normal;
+  text-align: center;
-  color: rgba(0, 0, 0, 1);
+  margin-bottom: 30px;
   font-family: PingFang SC;
   font-size: 24px;
-  letter-spacing: 1.1px;
+  font-weight: 500;
+  color: #333;
 }
 
-.el-tabs__nav-wrap::after {
+/* 统一输入框容器样式 */
-  content: "";
+.user-input {
-  position: absolute;
+  display: flex;
-  left: 0;
+  align-items: center;
-  bottom: 0;
+  width: 100%;
-  width: 0;
+  height: 40px;
-  height: 0;
-  background-color: #dfe4ed;
-  z-index: -999;
 }
 
+/* 统一图标容器 */
 .icon-box {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 28px;
+  width: 24px;
-  height: 21px;
+  height: 24px;
-  margin-top: 8px;
+  margin: 0 8px;
-  margin-left: 5px;
+  flex-shrink: 0;
-  margin-right: 5px;
 }
 
-.userInput .el-input__inner {
+/* 统一表单项目样式 + 边距 */
-  background-color: white;
+::v-deep .el-form-item {
+  margin-bottom: 24px !important; /* 给错误提示预留空间 */
 }
 
-.login-form-style {
+/* 统一输入框外框 */
-  background-color: transparent;
+::v-deep .el-input,
-
+::v-deep .el-input__inner {
-  .el-input {
+  width: 100%;
-    input {
+  height: 40px;
-      border: 0px;
+  line-height: 40px;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      caret-color: $cursor;
-
-      &:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-        -webkit-text-fill-color: $cursor !important;
-      }
-    }
-  }
-
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
-  }
-}
-
-.el-input ::v-deep .el-input__inner {
   border: none;
-  background-color: white;
+  background: transparent;
+  padding: 0 10px !important;
+  box-sizing: border-box;
+  font-size: 14px;
+}
 
-  &:-webkit-autofill {
+/* 统一表单输入框外层容器 */
-    background-color: white;
+.login-form-style {
-    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
+  .el-form-item {
-    -webkit-text-fill-color: $cursor !important;
+    border: 1px solid #d9d9d9;
+    background: #fff;
+    border-radius: 4px;
+    min-height: 40px;
+    overflow: visible;
+    position: relative;
+  }
+
+  /* 密码框提示样式 */
+  .el-tooltip {
+    display: block;
+  }
+
+  /* 验证码输入框宽度 */
+  .invitecode {
+    width: 180px !important;
   }
 }
 
-.tip-word {
+::v-deep .el-form-item__error {
-  mix-blend-mode: normal;
+  padding-top: 6px;
-  color: rgba(65, 70, 79, 1);
-  font-family: PingFang SC;
   font-size: 12px;
-  margin-top: 10px;
+  line-height: 1.4;
-  line-height: 17px;
-  text-indent: 0.5em;
 }
 
+/* 自动填充背景色覆盖 */
+::v-deep .el-input__inner:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
+  -webkit-text-fill-color: #333 !important;
+}
+
+/* 密码显示隐藏按钮 */
+.show-pwd {
+  display: flex;
+  align-items: center;
+  padding-right: 10px;
+  cursor: pointer;
+}
+
+/* 验证码按钮统一样式 */
+.getCodeStyleNew {
+  width: 110px;
+  height: 40px;
+  font-size: 13px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #41464f;
+  border: 1px solid #dde2e9;
+  background: #f6f8fa;
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &:hover {
+    cursor: pointer;
+    border-color: #4281ff;
+    background: #fafbfc;
+  }
+}
+
+/* 登录按钮统一间距 */
+.login-btn {
+  height: 42px;
+  line-height: 42px;
+  font-size: 16px;
+  margin-top: 10px !important;
+  margin-bottom: 20px !important;
+}
+
+/* 底部按钮区域统一 */
 .two-btn {
-  margin-top: 20px;
   width: 300px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
-}
+  margin-top: 0;
-
-.forget-password {
-  mix-blend-mode: normal;
-  color: rgba(65, 70, 79, 1);
-  font-family: PingFang SC;
-  font-size: 14px;
-  height: 100%;
-  padding-left: 7px;
 }
 
 .go-register {
-  padding-right: 7px;
-  mix-blend-mode: normal;
-  text-align: center;
-  color: rgba(0, 0, 0, 1);
-  font-family: PingFang SC;
   font-size: 14px;
-  letter-spacing: 0.7px;
+  color: #333;
-}
 
-.go-register:hover {
+  .go-register-btn {
-  cursor: default;
+    color: #409eff;
-}
+    border-bottom: 1px solid #409eff;
-
-.forget-password:hover {
-  color: blue;
     cursor: pointer;
+    margin-left: 4px;
+  }
 }
 
-.login-btn {
+/* 弹窗样式统一 */
-  mix-blend-mode: normal;
-  text-align: center;
-  color: rgba(255, 255, 255, 1);
-  font-family: PingFang SC;
-  font-size: 16px;
-}
-
-.main-content-box {
-  margin-top: -10px;
-}
-
-.login-container {
-  margin-top: 10px;
-}
-
-.login-container ::v-deep .el-tabs__nav-wrap::after {
-  height: 0;
-}
-
-.go-register-btn {
-  display: inline-block;
-  color: blue;
-  border-bottom: 2px solid blue !important;
-  cursor: pointer;
-}
-
-#uesr-name-id:-webkit-autofill {
-  background-color: white;
-  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-  -webkit-text-fill-color: $cursor !important;
-}
-
-.rePassword {
-  background-color: white;
-}
-
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
-  align-items: center;
+  padding-top: 10px;
-  padding-bottom: 15px;
 }
 
+/* Logo 定位统一 */
 .logo-top {
   width: 200px !important;
   height: 70px !important;
   position: absolute;
-  top: 2%;
+  top: 20px;
-  left: 2%;
+  left: 20px;
 }
-
 .logo-top1 {
   width: 260px !important;
   height: 80px !important;
   position: absolute;
-  top: 3%;
+  top: 20px;
-  left: 3%;
+  left: 20px;
-}
-
-::v-deep .el-tabs__nav-scroll {
-  height: 0px;
-}
-
-@media screen and(max-width: 760px) {
-
-  .login-form {
-    width: 90% !important;
-    position: absolute;
-    top: 13%;
-    right: 5%;
-  }
-
-  .go-register {
-    padding-right: 10px;
-    width: 174px;
-  }
-}
-
-.ad-dialog {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: pink;
-  width: 500px;
-  height: 500px;
-  border: 1px solid red;
-  z-index: 999999999999;
-}
-
-.showAdImg {
-  width: 100%;
-  height: 100%;
-  background-color: green;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-image: url("./images/ad.jpg");
-  background-size: cover;
 }
 
+/* 底部信息 */
 .message-footer {
-  flex-wrap: wrap;
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   height: 50px;
@@ -1328,94 +1242,37 @@ $dark_gray: #889aa4;
   bottom: 0;
   z-index: 10;
   color: #000;
+  font-size: 12px;
 
-  item {
+  .item {
     display: flex;
-    justify-content: center;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
   }
-
   span {
     margin: 0 10px;
-    font-size: 12px;
   }
 }
 
 .goPAge {
-  transition: all .3s ease-in-out;
+  cursor: pointer;
+  transition: color 0.3s;
 
   &:hover {
-    cursor: pointer;
+    color: #409eff;
-    color: blue;
   }
 }
 
-.login-type {
+/* 隐藏不需要的下划线 */
-  display: flex;
+::v-deep .el-tabs__nav-wrap::after {
-  justify-content: flex-start;
+  display: none;
-  align-items: center;
-  color: #41464f;
-  font-size: 16px;
-  margin: 25px 0 10px;
-
-  span {
-    position: relative;
-    padding-bottom: 3px;
-    display: inline-block;
-    margin-right: 20px;
-
-    &:hover {
-      cursor: pointer;
-      color: rgb(22, 100, 255);
-    }
-
-    &:before {
-      transition: all .2s ease-in-out;
-      content: "";
-      position: absolute;
-      bottom: 0;
-      width: 0;
-      height: 2px;
-      background: rgb(22, 100, 255);
-    }
-  }
 }
 
-.activeType {
+/* 响应式 */
-  color: rgb(22, 100, 255);
+@media screen and (max-width: 760px) {
-
+  .login-form {
-  &:before {
+    width: 90% !important;
-    content: "";
+    padding: 30px 20px;
-    position: absolute;
-    bottom: 0;
-    width: 100% !important;
-    height: 2px;
-    background: rgb(22, 100, 255);
-    transition: all .2s ease-in-out;
-  }
-}
-
-.getCodeStyleNew {
-  font-size: 13px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 10px;
-  color: #41464f;
-  border: 1px solid #dde2e9;
-  background: #f6f8fa;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
-  border-radius: 4px;
-  transition: all .1s linear;
-
-  &:hover {
-    transition: all .1s linear;
-    cursor: pointer;
-    box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
-    color: #41464f;
-    border-color: rgb(66, 129, 255);
-    background: #fafbfc;
   }
 }
 </style>