From 19f535c02812ce196b0fcaf73e6a6c7ae12ea3d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=99=E5=85=89?=
 <5248283+lsg15829561090@user.noreply.gitee.com>
Date: Sat, 28 Sep 2024 22:16:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/UserLayout.vue       |   3 +
 src/views/user/UserLoginView.vue | 126 ++++++++++++++++++++++++-------
 2 files changed, 103 insertions(+), 26 deletions(-)

diff --git a/src/layouts/UserLayout.vue b/src/layouts/UserLayout.vue
index b10e70d..a111a98 100644
--- a/src/layouts/UserLayout.vue
+++ b/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>
diff --git a/src/views/user/UserLoginView.vue b/src/views/user/UserLoginView.vue
index 16e5a2a..9a5d4d4 100644
--- a/src/views/user/UserLoginView.vue
+++ b/src/views/user/UserLoginView.vue
@@ -1,28 +1,43 @@
 <template>
   <div id="userLoginView">
-    <h2 style="margin-bottom: 16px">用户登录</h2>
-    <a-form
-      style="max-width: 480px; margin: 0 auto"
-      label-align="left"
-      auto-label-width
-      :model="form"
-      @submit="handleSubmit"
-    >
-      <a-form-item field="userAccount" label="账号">
-        <a-input v-model="form.userAccount" placeholder="请输入账号" />
-      </a-form-item>
-      <a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码">
-        <a-input-password
-          v-model="form.userPassword"
-          placeholder="请输入密码"
-        />
-      </a-form-item>
-      <a-form-item>
-        <a-button type="primary" html-type="submit" style="width: 120px">
-          登录
-        </a-button>
-      </a-form-item>
-    </a-form>
+    <!-- 添加阴影和圆角使其更具卡片效果 -->
+    <div class="login-container">
+      <h2>用户登录</h2>
+      <a-form
+        layout="vertical"
+        :model="form"
+        @submit="handleSubmit"
+        class="login-form"
+      >
+        <a-form-item field="userAccount" label="账号">
+          <a-input
+            v-model="form.userAccount"
+            placeholder="请输入账号"
+            size="large"
+            allow-clear
+          />
+        </a-form-item>
+        <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"
+            size="large"
+            class="login-button"
+          >
+            登录
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </div>
   </div>
 </template>
 
@@ -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>
\ No newline at end of file
+<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>