修改登录页面样式

src/views/login/Login.vue

@@ -1,108 +1,292 @@
 <template>
-  <div class="login-container">
+  <div class="login-page">
-    <a-card class="login-card" title="系统登录">
+    <div class="login-container">
-      <a-form
+      <div class="login-left">
-        :model="formState"
+        <div class="login-brand">
-        name="login"
+          <img src="@/assets/logo.png" alt="Logo" class="login-logo" />
-        @finish="onFinish"
+          <img src="@/assets/sub_logo.png" alt="Sub Logo" class="login-sub-logo" />
-        autocomplete="off"
+        </div>
-      >
+        <div class="login-features">
-        <a-form-item
+          <div class="feature-item">
-          name="phone"
+            <check-circle-outlined />
-          :rules="[{ required: true, message: '请输入手机号码!' }]"
+            <span>高效管理小区配送</span>
-        >
+          </div>
-          <a-input v-model:value="formState.phone" placeholder="手机号码">
+          <div class="feature-item">
-            <template #prefix>
+            <check-circle-outlined />
-              <mobile-outlined />
+            <span>实时监控订单状态</span>
-            </template>
+          </div>
-          </a-input>
+          <div class="feature-item">
-        </a-form-item>
+            <check-circle-outlined />
-
+            <span>便捷的数据分析</span>
-        <a-form-item
+          </div>
-          name="password"
+        </div>
-          :rules="[{ required: true, message: '请输入密码!' }]"
+      </div>
-        >
+      <div class="login-right">
-          <a-input-password v-model:value="formState.password" placeholder="密码">
+        <div class="login-form-container">
-            <template #prefix>
+          <h2 class="welcome-text">欢迎登录</h2>
-              <lock-outlined />
+          <p class="login-desc">请使用您的账号密码登录系统</p>
-            </template>
+          
-          </a-input-password>
+          <a-form
-        </a-form-item>
+            :model="formState"
-
+            @finish="handleSubmit"
-        <a-form-item>
+            layout="vertical"
-          <a-button
+            class="login-form"
-            type="primary"
-            html-type="submit"
-            class="login-button"
-            :loading="loading"
           >
-            登录
+            <a-form-item
-          </a-button>
+              name="phone"
-        </a-form-item>
+              :rules="[{ required: true, message: '请输入用户名' }]"
-      </a-form>
+            >
-    </a-card>
+              <a-input 
+                v-model:value="formState.phone"
+                placeholder="用户名"
+                size="large"
+              >
+                <template #prefix>
+                  <user-outlined />
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item
+              name="password"
+              :rules="[{ required: true, message: '请输入密码' }]"
+            >
+              <a-input-password
+                v-model:value="formState.password"
+                placeholder="密码"
+                size="large"
+              >
+                <template #prefix>
+                  <lock-outlined />
+                </template>
+              </a-input-password>
+            </a-form-item>
+            <a-form-item>
+              <a-button
+                type="primary"
+                html-type="submit"
+                :loading="loading"
+                block
+                size="large"
+                class="login-button"
+              >
+                登录
+              </a-button>
+            </a-form-item>
+          </a-form>
+          
+          <div class="login-footer">
+            <p>© {{ new Date().getFullYear() }} 蜂快到家. 保留所有权利</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { defineComponent, reactive, ref } from 'vue'
-import { MobileOutlined, LockOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import { useRouter } from 'vue-router'
-import { login } from '@/api/user'
+import { UserOutlined, LockOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'
+import request from '@/utils/request'
 
 export default defineComponent({
   components: {
-    MobileOutlined,
+    UserOutlined,
-    LockOutlined
+    LockOutlined,
+    CheckCircleOutlined
   },
   setup() {
     const router = useRouter()
     const loading = ref(false)
+    
     const formState = reactive({
       phone: '',
-      password: '',
+      password: ''
-      role: 'admin'
     })
-
+    
-    const onFinish = async values => {
+    const handleSubmit = async (values) => {
       try {
         loading.value = true
-        const res = await login(values)
+        const res = await request.post('/api/user/password-login', values)
-        localStorage.setItem('token', res.data.access_token)
+        
-        localStorage.setItem('userInfo', JSON.stringify(res.data.user))
+        if (res.code === 200) {
-        message.success('登录成功')
+          localStorage.setItem('token', res.data.token)
-        router.push('/')
+          localStorage.setItem('userInfo', JSON.stringify(res.data.user))
+          message.success('登录成功')
+          router.push('/')
+        } else {
+          message.error(res.message || '登录失败')
+        }
       } catch (error) {
         console.error('登录失败:', error)
+        message.error('登录失败，请检查网络连接')
       } finally {
         loading.value = false
       }
     }
-
+    
     return {
       formState,
       loading,
-      onFinish
+      handleSubmit
     }
   }
 })
 </script>
 
 <style scoped>
-.login-container {
+.login-page {
+  height: 100vh;
+  width: 100vw;
+  background: linear-gradient(135deg, #fff8e1 0%, #ffe082 100%);
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  background-color: #f0f2f5;
 }
 
-.login-card {
+.login-container {
-  width: 368px;
+  display: flex;
+  width: 900px;
+  height: 600px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.login-left {
+  width: 40%;
+  background: linear-gradient(135deg, #FFC300 0%, #e6b000 100%);
+  color: white;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.login-brand {
+  text-align: center;
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.login-logo {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 16px;
+}
+
+.login-sub-logo {
+  width: 120px;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+.login-title {
+  font-size: 32px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.login-subtitle {
+  font-size: 18px;
+  font-weight: 400;
+  margin: 8px 0 0;
+  opacity: 0.9;
+}
+
+.login-features {
+  margin-bottom: 60px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  font-size: 16px;
+}
+
+.feature-item :deep(svg) {
+  margin-right: 12px;
+  font-size: 18px;
+}
+
+.login-right {
+  width: 60%;
+  background: white;
+  padding: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.login-form-container {
+  width: 100%;
+  max-width: 360px;
+  margin: 0 auto;
+}
+
+.welcome-text {
+  font-size: 28px;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 8px;
+}
+
+.login-desc {
+  color: #8c8c8c;
+  margin-bottom: 40px;
+}
+
+.login-form {
+  margin-bottom: 40px;
 }
 
 .login-button {
-  width: 100%;
+  height: 48px;
+  font-size: 16px;
+  background: #FFC300;
+  border-color: #FFC300;
+  border-radius: 6px;
+}
+
+.login-button:hover {
+  background: #ffcf33;
+  border-color: #ffcf33;
+}
+
+.login-footer {
+  text-align: center;
+  color: #8c8c8c;
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .login-container {
+    flex-direction: column;
+    width: 90%;
+    height: auto;
+  }
+  
+  .login-left {
+    width: 100%;
+    padding: 30px;
+  }
+  
+  .login-right {
+    width: 100%;
+    padding: 30px;
+  }
+  
+  .login-brand {
+    margin-top: 20px;
+  }
+  
+  .login-features {
+    margin: 30px 0;
+  }
 }
 </style>