登录页优化

web/src/views/Login/index.vue

@@ -11,7 +11,9 @@
           ref="loginFormRef"
           :model="loginForm"
           :rules="loginRules"
-          label-width="80px"
+          label-position="top"
+          label-width="0"
+          class="login-form"
           @submit.prevent="handleLogin"
         >
           <el-form-item label="手机号" prop="phone">
@@ -25,18 +27,24 @@
           </el-form-item>
 
           <el-form-item label="短信验证码" prop="smsCode">
-            <div class="flex gap-2 w-full">
+            <div class="sms-code-row">
               <el-input
                 v-model="loginForm.smsCode"
                 placeholder="请输入6位验证码"
                 :prefix-icon="Key"
                 clearable
-                class="flex-1"
+                class="flex-1 sms-code-input"
                 @keyup.enter="handleLogin"
                 maxlength="6"
                 show-word-limit
               />
-              <el-button type="primary" plain @click="handleSendSmsCode" :disabled="smsSending || countdown > 0">
+              <el-button
+                type="primary"
+                plain
+                class="sms-code-button"
+                @click="handleSendSmsCode"
+                :disabled="smsSending || countdown > 0"
+              >
                 {{ countdown > 0 ? `${countdown}s` : (smsSending ? '发送中...' : '获取验证码') }}
               </el-button>
             </div>
@@ -227,6 +235,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 2rem 1rem;
 }
 
 .container {
@@ -245,6 +254,22 @@ onMounted(() => {
   box-shadow: none;
 }
 
+.login-form {
+  margin-top: 0.5rem;
+}
+
+.sms-code-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.sms-code-button {
+  white-space: nowrap;
+  min-width: 110px;
+}
+
 .captcha-container {
   width: 120px;
   height: 40px;
@@ -395,5 +420,16 @@ onMounted(() => {
   .social-login {
     flex-direction: column;
   }
+
+  .sms-code-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .sms-code-button {
+    width: 100%;
+    text-align: center;
+  }
 }
 </style>