优化登录注册弹窗

src/layouts/UserLayout.vue

@@ -1,7 +1,9 @@
 <template>
 	
   <div id="userLayout">
+		
     <a-layout style="min-height: 100vh">
+			
       <a-layout-header class="header">
         <a-space>
           <img src="../assets/logo.png" class="logo" />
@@ -49,5 +51,6 @@
   right: 0;
   text-align: center;
 }
+
 </style>
 <script></script>

src/views/user/UserLoginView.vue

@@ -1,29 +1,44 @@
 <template>
   <div id="userLoginView">
-    <h2 style="margin-bottom: 16px">用户登录</h2>
+    <!-- 添加阴影和圆角使其更具卡片效果 -->
+    <div class="login-container">
+      <h2>用户登录</h2>
       <a-form
-      style="max-width: 480px; margin: 0 auto"
+        layout="vertical"
-      label-align="left"
-      auto-label-width
         :model="form"
         @submit="handleSubmit"
+        class="login-form"
       >
         <a-form-item field="userAccount" label="账号">
-        <a-input v-model="form.userAccount" placeholder="请输入账号" />
+          <a-input
+            v-model="form.userAccount"
+            placeholder="请输入账号"
+            size="large"
+            allow-clear
+          />
         </a-form-item>
-      <a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码">
+        <a-form-item field="userPassword" label="密码">
           <a-input-password
             v-model="form.userPassword"
             placeholder="请输入密码"
+            size="large"
+            allow-clear
           />
         </a-form-item>
         <a-form-item>
-        <a-button type="primary" html-type="submit" style="width: 120px">
+          <!-- 提供更大的点击区域，调整按钮大小 -->
+          <a-button
+            type="primary"
+            html-type="submit"
+            size="large"
+            class="login-button"
+          >
             登录
           </a-button>
         </a-form-item>
       </a-form>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -54,7 +69,7 @@ const handleSubmit = async () => {
   if (res.code === 0) {
     await store.dispatch("user/getLoginUser");
     router.push({
-      path: "/",
+      path: "/question",
       replace: true,
     });
   } else {
@@ -62,6 +77,65 @@ const handleSubmit = async () => {
   }
 };
 </script>
-<style scoped>
 
+<style scoped>
+/* 样式优化 */
+#userLoginView {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+ 
+  padding: 20px;
+}
+
+.login-container {
+  background: #fff;
+  padding: 40px 30px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 100%;
+  animation: fadeIn 0.5s ease;
+}
+
+h2 {
+  text-align: center;
+  font-size: 24px;
+  color: #0052d9;
+  margin-bottom: 24px;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.login-button {
+  width: 100%;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式优化 */
+@media (max-width: 600px) {
+  .login-container {
+    padding: 30px 20px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+}
 </style>