From 8a392065beba443baa318ed3d1498aa86a91270d Mon Sep 17 00:00:00 2001
From: AIGC Developer <developer@aigc.com>
Date: Tue, 21 Oct 2025 17:24:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=20-=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=8A=A8=E6=80=81=E5=85=89=E6=95=88=E5=92=8C=E5=BE=AE?=
 =?UTF-8?q?=E5=A6=99=E5=8F=91=E5=85=89=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/frontend/src/views/Login.vue | 54 ++++++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 8 deletions(-)

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 {