chore: 📌 优化登录页面样式

frontend/src/views/admin/Login.vue

@@ -10,7 +10,9 @@
         ref="loginFormRef"
         :model="loginForm"
         :rules="loginRules"
-        label-position="top"
+        label-position="left"
+        label-width="80px"
+        class="login-form-inner"
       >
         <el-form-item label="管理员账号" prop="username">
           <el-input
@@ -25,20 +27,20 @@
           <el-input
               v-model="loginForm.password"
               type="password"
-              placeholder="请输入管理员密码"
+              placeholder="请输入管理员账号密码"
               show-password
               size="large"
               :prefix-icon="RiLockLine"
             />
         </el-form-item>
         
-        <el-form-item>
+        <el-form-item class="login-button-item">
           <el-button
             type="primary"
             :loading="loading"
             @click="handleLogin"
             size="large"
-            block
+            class="login-button"
           >
             登录
           </el-button>
@@ -162,4 +164,32 @@ const handleLogin = async () => {
 }
 
 /* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
+
+/* 修复label和输入框水平居中对齐问题 */
+.login-form-inner :deep(.el-form-item__label) {
+  display: flex;
+  align-items: center;
+  height: 40px; /* 与输入框高度一致 */
+  line-height: normal;
+}
+
+.login-form-inner :deep(.el-form-item__content) {
+  display: flex;
+  align-items: center;
+}
+
+/* 登录按钮样式 */
+.login-button-item {
+  margin-left: -80px; /* 抵消label宽度，使按钮在整个表单中居中 */
+}
+
+.login-button-item :deep(.el-form-item__content) {
+  justify-content: center; /* 水平居中 */
+  margin-left: 80px; /* 重新添加左边距，使按钮内容居中 */
+}
+
+.login-button {
+  width: 100%; /* 按钮宽度占满容器 */
+  max-width: 280px; /* 最大宽度限制 */
+}
 </style>

frontend/src/views/player/Login.vue

@@ -10,7 +10,9 @@
         ref="loginFormRef"
         :model="loginForm"
         :rules="loginRules"
-        label-position="top"
+        label-position="left"
+        label-width="80px"
+        class="login-form-inner"
       >
         <el-form-item label="游戏账号" prop="username">
           <el-input
@@ -26,7 +28,7 @@
           <el-input
             v-model="loginForm.password"
             type="password"
-            placeholder="请输入游戏密码"
+            placeholder="请输入游戏账号密码"
             size="large"
             show-password
             :prefix-icon="RiLockLine"
@@ -34,13 +36,13 @@
         
         </el-form-item>
         
-        <el-form-item>
+        <el-form-item class="login-button-item">
           <el-button
             type="primary"
             :loading="loading"
             @click="handleLogin"
             size="large"
-            block
+            class="login-button"
           >
             登录
           </el-button>
@@ -48,7 +50,7 @@
         
         <div class="login-footer">
           <el-link type="primary" :underline="false">忘记密码？</el-link>
-          <el-link type="primary" :underline="false">注册账号</el-link>
+          <el-link type="primary" :underline="false">注册游戏账号</el-link>
         </div>
       </el-form>
     </div>
@@ -166,4 +168,32 @@ const handleLogin = async () => {
 }
 
 /* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
+
+/* 修复label和输入框水平居中对齐问题 */
+.login-form-inner :deep(.el-form-item__label) {
+  display: flex;
+  align-items: center;
+  height: 40px; /* 与输入框高度一致 */
+  line-height: normal;
+}
+
+.login-form-inner :deep(.el-form-item__content) {
+  display: flex;
+  align-items: center;
+}
+
+/* 登录按钮样式 */
+.login-button-item {
+  margin-left: -80px; /* 抵消label宽度，使按钮在整个表单中居中 */
+}
+
+.login-button-item :deep(.el-form-item__content) {
+  justify-content: center; /* 水平居中 */
+  margin-left: 80px; /* 重新添加左边距，使按钮内容居中 */
+}
+
+.login-button {
+  width: 100%; /* 按钮宽度占满容器 */
+  max-width: 280px; /* 最大宽度限制 */
+}
 </style>