diff --git a/demo/frontend/src/views/Login.vue b/demo/frontend/src/views/Login.vue
index f40f899..2ad04d3 100644
--- a/demo/frontend/src/views/Login.vue
+++ b/demo/frontend/src/views/Login.vue
@@ -207,7 +207,9 @@ const handleLogin = async () => {
   min-height: 100vh;
   width: 100vw;
   height: 100vh;
-  background: url('/images/backgrounds/login.png') center/cover no-repeat;
+  background: 
+    radial-gradient(ellipse at top right, rgba(0, 100, 200, 0.3) 0%, transparent 50%),
+    linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
   position: fixed;
   top: 0;
   left: 0;
@@ -217,6 +219,33 @@ const handleLogin = async () => {
   padding: 0;
 }
 
+/* 添加动态光效 */
+.login-page::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 60%;
+  height: 100%;
+  background: 
+    linear-gradient(45deg, transparent 0%, rgba(0, 150, 255, 0.1) 20%, rgba(0, 200, 255, 0.2) 40%, transparent 60%),
+    radial-gradient(ellipse at top right, rgba(0, 150, 255, 0.3) 0%, transparent 70%);
+  animation: lightStreak 8s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes lightStreak {
+  0% { 
+    opacity: 0.3; 
+    transform: translateX(0px) scale(1);
+  }
+  100% { 
+    opacity: 0.7; 
+    transform: translateX(-20px) scale(1.05);
+  }
+}
+
 /* 背景效果已移除，使用图片背景 */
 
 /* 左上角Logo */
@@ -240,7 +269,10 @@ const handleLogin = async () => {
   background: rgba(26, 26, 46, 0.8);
   backdrop-filter: blur(20px);
   border-radius: 24px;
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
   padding: 50px;
   z-index: 10;
 }
@@ -301,7 +333,7 @@ const handleLogin = async () => {
   width: 100px;
   height: 55px;
   background: rgba(0, 0, 0, 0.3);
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   display: flex;
   align-items: center;
@@ -310,6 +342,7 @@ const handleLogin = async () => {
   font-size: 16px;
   cursor: pointer;
   transition: all 0.3s ease;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .country-code:hover {
@@ -327,9 +360,11 @@ const handleLogin = async () => {
 
 .phone-input :deep(.el-input__wrapper) {
   background: rgba(0, 0, 0, 0.3);
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
-  box-shadow: none;
+  box-shadow: 
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
   height: 55px;
 }
 
@@ -355,9 +390,11 @@ const handleLogin = async () => {
 
 .code-input :deep(.el-input__wrapper) {
   background: rgba(0, 0, 0, 0.3);
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
-  box-shadow: none;
+  box-shadow: 
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
   height: 55px;
 }
 
@@ -447,9 +484,10 @@ const handleLogin = async () => {
   padding: 6px 12px;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 6px;
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.05);
   cursor: pointer;
   transition: all 0.3s ease;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .account-item:hover {