diff --git a/ruoyi-ui-next/src/views/login.vue b/ruoyi-ui-next/src/views/login.vue
index b59813d..d3a818a 100644
--- a/ruoyi-ui-next/src/views/login.vue
+++ b/ruoyi-ui-next/src/views/login.vue
@@ -42,10 +42,13 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
 import { User, Lock } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 import type { FormInstance } from 'element-plus'
 import { useUserStore } from '@/stores/modules/user'
 
+const router = useRouter()
 const userStore = useUserStore()
 const formRef = ref<FormInstance>()
 const loading = ref(false)
@@ -68,9 +71,10 @@ const handleLogin = async () => {
       loading.value = true
       try {
         await userStore.login(loginForm.username, loginForm.password)
-        window.location.href = '/'
-      } catch (error) {
-        console.error('Login failed:', error)
+        ElMessage.success('登录成功')
+        router.push('/')
+      } catch (error: any) {
+        ElMessage.error(error.message || '登录失败，请检查用户名和密码')
       } finally {
         loading.value = false
       }
@@ -85,24 +89,62 @@ const handleLogin = async () => {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: var(--bg0);
+  background-color: #0d1117;
+  background-image: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
 }
 
 .login-card {
   width: 400px;
-  background: var(--bg1);
-  border-color: var(--bd);
+  background-color: #161b22;
+  border: 1px solid #30363d;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 
   :deep(.el-card__header) {
-    background: var(--bg2);
-    border-bottom-color: var(--bd);
+    background-color: #1c2333;
+    border-bottom: 1px solid #30363d;
+    padding: 20px;
+  }
+  
+  :deep(.el-card__body) {
+    padding: 30px;
+  }
+  
+  :deep(.el-input__wrapper) {
+    background-color: #0d1117;
+    border-color: #30363d;
+    
+    &:hover, &.is-focus {
+      border-color: #58a6ff;
+    }
+  }
+  
+  :deep(.el-input__inner) {
+    color: #e6edf3;
   }
 }
 
 .login-title {
   margin: 0;
   text-align: center;
-  color: var(--t1);
+  color: #e6edf3;
   font-size: 20px;
+  font-weight: 600;
+}
+
+:deep(.el-button--primary) {
+  background-color: #58a6ff;
+  border-color: #58a6ff;
+  color: #ffffff;
+  
+  &:hover {
+    background-color: #79b8ff;
+    border-color: #79b8ff;
+  }
+  
+  &:active {
+    background-color: #4c93e8;
+    border-color: #4c93e8;
+  }
 }
 </style>