fix: 登录界面，样式优化。

src/views/login.vue

@@ -24,7 +24,7 @@
             <template #suffix> <img class="userName" src="../assets/images/showPass.png" @click="handleIconClick" /></template>
           </el-input>
         </el-form-item>
-        <el-form-item prop="code" v-if="captchaEnabled">
+        <el-form-item prop="code" v-if="captchaEnabled" style="position: relative; padding-right: 120px">
           <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" @keyup.enter="handleLogin">
             <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
           </el-input>
@@ -38,10 +38,11 @@
             <span v-if="!loading">登 录</span>
             <span v-else>登 录 中...</span>
           </el-button>
-          <div v-if="register">
-            <router-link class="link-type" style="font-size: 20px; font-weight: 400" :to="'/register'">立即注册</router-link>
-          </div>
         </el-form-item>
+        <div v-if="register" class="register-link">
+          <span class="register-text">还没有账号？</span>
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        </div>
       </el-form>
     </div>
   </div>
@@ -185,60 +186,207 @@ getCookie()
   width: 40%;
   height: 100%;
   padding: 3rem 1rem;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   .login-form {
+    width: 100%;
+    max-width: 450px;
+
     .title {
       text-align: center;
-      font-size: 0.4rem;
+      font-size: 32px;
-      font-family: PingFangSC-Heavy, PingFang SC;
+      font-family: 'PingFangSC-Heavy', 'PingFang SC', sans-serif;
       font-weight: 800;
-      color: #202224;
+      color: #1a1a1a;
-      line-height: 0.56rem;
+      line-height: 1.4;
-      letter-spacing: 0.1rem;
+      letter-spacing: 1px;
-      margin-bottom: 0.51rem;
+      margin-bottom: 50px;
-    }
+      position: relative;
-    .userName {
+
-      margin-top: 0.17rem;
+      &::after {
-    }
+        content: '';
-    :deep(.el-input__prefix-inner),
+        position: absolute;
-    :deep(.el-input__suffix) {
+        bottom: -15px;
-      display: block;
+        left: 50%;
-    }
+        transform: translateX(-50%);
-    :deep(.el-input__wrapper) {
+        width: 50px;
-      width: 4.1rem;
+        height: 4px;
-      height: 0.6356rem;
+        background: linear-gradient(90deg, #667eea, #764ba2);
-      border-radius: 0;
+        border-radius: 2px;
-      border: 0;
-      font-family: 'PingFangSC-Regular', 'PingFang SC';
-      border-bottom: solid 0.01rem rgba(216, 216, 216, 1);
-      font-size: 0.18rem;
-      box-shadow: none;
-      margin: 0 auto;
-      .el-input__inner {
-        margin-left: 10px;
       }
     }
-    :deep(.el-checkbox__label) {
+
-      color: rgba(187, 187, 188, 1);
+    .userName {
-      font-size: 0.16rem;
+      width: 20px;
-      line-height: 0.22rem;
+      height: 20px;
-      font-weight: 400;
+      opacity: 0.6;
-      font-family: 'PingFangSC-Regular', 'PingFang SC';
-      letter-spacing: 0.04rem;
     }
+
     :deep(.el-form-item) {
-      margin-bottom: 0rem;
+      margin-bottom: 28px;
     }
+
+    :deep(.el-input__prefix-inner),
+    :deep(.el-input__suffix) {
+      display: flex;
+      align-items: center;
+    }
+
+    :deep(.el-input__wrapper) {
+      width: 100%;
+      height: 52px;
+      border-radius: 12px;
+      border: 2px solid #e8e8e8;
+      background: #fafafa;
+      font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+      font-size: 15px;
+      box-shadow: none;
+      transition: all 0.3s ease;
+      padding: 0 18px;
+
+      &:hover {
+        border-color: #667eea;
+        background: #ffffff;
+      }
+
+      &.is-focus {
+        border-color: #667eea;
+        background: #ffffff;
+        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+      }
+
+      .el-input__inner {
+        color: #333;
+
+        &::placeholder {
+          color: #999;
+        }
+      }
+    }
+
+    // 验证码样式
+    .login-code {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 120px;
+      height: 52px;
+
+      .login-code-img {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        border-radius: 12px;
+        object-fit: cover;
+        transition: all 0.3s ease;
+        border: 2px solid #e8e8e8;
+
+        &:hover {
+          border-color: #667eea;
+          transform: scale(1.02);
+        }
+      }
+    }
+
+    :deep(.el-checkbox) {
+      .el-checkbox__label {
+        color: #666;
+        font-size: 14px;
+        font-weight: 400;
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+      }
+
+      .el-checkbox__inner {
+        border-radius: 4px;
+        width: 18px;
+        height: 18px;
+
+        &::after {
+          left: 6px;
+          top: 2px;
+        }
+      }
+
+      &.is-checked .el-checkbox__inner {
+        background: #667eea;
+        border-color: #667eea;
+      }
+    }
+
+    .mt-16 {
+      margin-top: 16px;
+    }
+
+    .mb-60 {
+      margin-bottom: 35px;
+    }
+
     :deep(.el-button) {
-      margin: 0 auto;
+      width: 100%;
-      width: 4.16rem;
+      height: 52px;
-      height: 0.6rem;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      background: #333fff;
+      border: none;
-      border-radius: 0.05rem;
+      border-radius: 12px;
-      font-size: 0.18rem;
+      font-size: 16px;
-      font-family: 'PingFang-SC-Medium', 'PingFang-SC';
+      font-family: 'PingFang-SC-Medium', 'PingFang-SC', sans-serif;
-      font-weight: 500;
+      font-weight: 600;
       color: #ffffff;
-      line-height: 0.25rem;
+      letter-spacing: 2px;
+      transition: all 0.3s ease;
+      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    }
+
+    .register-link {
+      text-align: center;
+      margin-top: 30px;
+
+      .register-text {
+        color: #999;
+        font-size: 14px;
+        margin-right: 8px;
+      }
+
+      .link-type {
+        display: inline-block;
+        font-size: 14px;
+        font-weight: 600;
+        color: #667eea;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        position: relative;
+        padding-bottom: 2px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(90deg, #667eea, #764ba2);
+          transition: width 0.3s ease;
+        }
+
+        &:hover {
+          color: #764ba2;
+
+          &::after {
+            width: 100%;
+          }
+        }
+      }
     }
   }
 }