实现全屏覆盖特殊样式效果 - 深色背景+中央光晕

2025-10-21 17:16:46 +08:00
parent 78ece4e5d8
commit 52907cc011
1 changed files with 394 additions and 215 deletions
--- a/demo/frontend/src/App.vue
+++ b/demo/frontend/src/App.vue
@@ -1,5 +1,8 @@
 <template>
  <div id="app" :data-route="route.name">
+    <!-- 全屏背景层 -->
+    <div class="fullscreen-background" :class="route.name"></div>
+    
    <!-- 导航栏 - 根据路由条件显示 -->
    <NavBar v-if="shouldShowNavBar" />
    
@@ -66,12 +69,25 @@ body {
  display: flex;
  flex-direction: column;
  position: relative;
+  overflow: hidden;
+}
+
+/* 全屏背景层 */
+.fullscreen-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+  pointer-events: none;
 }

 main {
  flex: 1;
  padding: 0;
  position: relative;
+  z-index: 1;
 }

 main.with-navbar {
@@ -90,301 +106,452 @@ main.with-navbar {

 /* ========== 页面特殊样式 ========== */

-/* 欢迎页面 - 彩虹渐变背景 */
-#app[data-route="Welcome"] {
-  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
-  background-size: 400% 400%;
-  animation: rainbowShift 8s ease-in-out infinite;
-}
-
-@keyframes rainbowShift {
-  0%, 100% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-}
-
-/* 首页 - 科技感蓝色渐变 */
-#app[data-route="Home"] {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  position: relative;
-}
-
-#app[data-route="Home"]::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+/* 欢迎页面 - 深色科技风全屏覆盖 */
+.fullscreen-background.Welcome {
  background: 
-    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
+    radial-gradient(ellipse at center, rgba(0, 50, 100, 0.8) 0%, rgba(0, 20, 40, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+  animation: welcomeGlow 6s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.Welcome::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: 60%;
+  transform: translate(-50%, -50%);
+  background: 
+    radial-gradient(ellipse at center, rgba(100, 150, 255, 0.3) 0%, rgba(50, 100, 200, 0.2) 30%, transparent 70%);
+  animation: centralGlow 8s ease-in-out infinite alternate;
+}
+
+@keyframes welcomeGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
+}
+
+@keyframes centralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.7; 
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+}
+
+/* 首页 - 深色科技风全屏覆盖 */
+.fullscreen-background.Home {
+  background: 
+    radial-gradient(ellipse at center, rgba(20, 40, 80, 0.8) 0%, rgba(10, 20, 40, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  animation: homeGlow 6s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+}
+
+.fullscreen-background.Home::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70%;
+  height: 50%;
+  transform: translate(-50%, -50%);
+  background: 
+    radial-gradient(ellipse at center, rgba(100, 150, 255, 0.4) 0%, rgba(50, 100, 200, 0.2) 40%, transparent 70%);
+  animation: homeCentralGlow 7s ease-in-out infinite alternate;
 }

@keyframes homeGlow {
-  0% { opacity: 0.3; }
-  100% { opacity: 0.7; }
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 个人主页 - 深色科技风 */
-#app[data-route="Profile"] {
-  background: #0a0a0a;
-  color: white;
+@keyframes homeCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.6; 
+    transform: translate(-50%, -50%) scale(1.05);
+  }
 }

-#app[data-route="Profile"]::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+/* 个人主页 - 深色科技风全屏覆盖 */
+.fullscreen-background.Profile {
  background: 
-    radial-gradient(circle at 10% 20%, rgba(64, 158, 255, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 90% 80%, rgba(103, 194, 58, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 50% 50%, rgba(230, 162, 60, 0.05) 0%, transparent 50%);
+    radial-gradient(ellipse at center, rgba(0, 30, 60, 0.9) 0%, rgba(0, 10, 20, 0.95) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%);
  animation: profileGlow 6s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+}
+
+.fullscreen-background.Profile::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60%;
+  height: 40%;
+  transform: translate(-50%, -50%);
+  background: 
+    radial-gradient(ellipse at center, rgba(64, 158, 255, 0.2) 0%, rgba(103, 194, 58, 0.1) 30%, transparent 70%);
+  animation: profileCentralGlow 8s ease-in-out infinite alternate;
 }

@keyframes profileGlow {
-  0% { opacity: 0.3; }
-  100% { opacity: 0.6; }
+  0% { opacity: 0.9; }
+  100% { opacity: 1; }
 }

-/* 订单管理 - 商务紫色渐变 */
-#app[data-route="Orders"] {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+@keyframes profileCentralGlow {
+  0% { 
+    opacity: 0.2; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.5; 
+    transform: translate(-50%, -50%) scale(1.08);
+  }
 }

-#app[data-route="Orders"]::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+/* 订单管理 - 深色商务风全屏覆盖 */
+.fullscreen-background.Orders {
  background: 
-    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
-  animation: ordersPulse 5s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(80, 20, 60, 0.8) 0%, rgba(40, 10, 30, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #2a0a2a 100%);
+  animation: ordersGlow 5s ease-in-out infinite alternate;
 }

-@keyframes ordersPulse {
-  0% { opacity: 0.3; transform: scale(1); }
-  100% { opacity: 0.6; transform: scale(1.02); }
-}
-
-/* 支付记录 - 金色渐变 */
-#app[data-route="Payments"] {
-  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
-}
-
-#app[data-route="Payments"]::before {
+.fullscreen-background.Orders::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 75%;
+  height: 55%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 75% 75%, rgba(255, 165, 0, 0.1) 0%, transparent 50%);
-  animation: paymentShine 4s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(240, 147, 251, 0.3) 0%, rgba(245, 87, 108, 0.2) 40%, transparent 70%);
+  animation: ordersCentralGlow 6s ease-in-out infinite alternate;
 }

-@keyframes paymentShine {
-  0% { opacity: 0.4; }
-  100% { opacity: 0.8; }
+@keyframes ordersGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 我的作品 - 创意绿色渐变 */
-#app[data-route="MyWorks"] {
-  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+@keyframes ordersCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.6; 
+    transform: translate(-50%, -50%) scale(1.02);
+  }
 }

-#app[data-route="MyWorks"]::before {
+/* 支付记录 - 深色金色风全屏覆盖 */
+.fullscreen-background.Payments {
+  background: 
+    radial-gradient(ellipse at center, rgba(100, 80, 20, 0.8) 0%, rgba(50, 40, 10, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #1a1a0a 50%, #2a2a0a 100%);
+  animation: paymentsGlow 4s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.Payments::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70%;
+  height: 45%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 40% 60%, rgba(168, 237, 234, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 60% 40%, rgba(254, 214, 227, 0.3) 0%, transparent 50%);
-  animation: worksFloat 7s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(246, 211, 101, 0.3) 0%, rgba(253, 160, 133, 0.2) 40%, transparent 70%);
+  animation: paymentsCentralGlow 5s ease-in-out infinite alternate;
 }

-@keyframes worksFloat {
-  0% { transform: translateY(0px) rotate(0deg); }
-  100% { transform: translateY(-15px) rotate(2deg); }
+@keyframes paymentsGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 文生视频 - 蓝色科技风 */
-#app[data-route="TextToVideo"] {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+@keyframes paymentsCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.7; 
+    transform: translate(-50%, -50%) scale(1.03);
+  }
 }

-#app[data-route="TextToVideo"]::before {
+/* 我的作品 - 深色创意风全屏覆盖 */
+.fullscreen-background.MyWorks {
+  background: 
+    radial-gradient(ellipse at center, rgba(20, 60, 40, 0.8) 0%, rgba(10, 30, 20, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #0a1a0a 50%, #0a2a0a 100%);
+  animation: worksGlow 7s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.MyWorks::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: 60%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.3) 0%, transparent 50%);
-  animation: textVideoFlow 6s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(168, 237, 234, 0.3) 0%, rgba(254, 214, 227, 0.2) 40%, transparent 70%);
+  animation: worksCentralGlow 8s ease-in-out infinite alternate;
 }

-@keyframes textVideoFlow {
-  0% { opacity: 0.3; }
-  100% { opacity: 0.7; }
+@keyframes worksGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 图生视频 - 紫色梦幻风 */
-#app[data-route="ImageToVideo"] {
-  background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%);
+@keyframes worksCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1) rotate(0deg);
+  }
+  100% { 
+    opacity: 0.6; 
+    transform: translate(-50%, -50%) scale(1.05) rotate(2deg);
+  }
 }

-#app[data-route="ImageToVideo"]::before {
+/* 文生视频 - 深色蓝色科技风全屏覆盖 */
+.fullscreen-background.TextToVideo {
+  background: 
+    radial-gradient(ellipse at center, rgba(20, 40, 80, 0.8) 0%, rgba(10, 20, 40, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #0a1a2e 50%, #1a2a4e 100%);
+  animation: textVideoGlow 6s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.TextToVideo::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 75%;
+  height: 50%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 30% 30%, rgba(168, 192, 255, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 70% 70%, rgba(63, 43, 150, 0.3) 0%, transparent 50%);
-  animation: imageVideoDream 8s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.3) 40%, transparent 70%);
+  animation: textVideoCentralGlow 7s ease-in-out infinite alternate;
 }

-@keyframes imageVideoDream {
-  0% { opacity: 0.2; transform: scale(1); }
-  100% { opacity: 0.6; transform: scale(1.05); }
+@keyframes textVideoGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 分镜视频 - 橙色活力风 */
-#app[data-route="StoryboardVideo"] {
-  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+@keyframes textVideoCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.7; 
+    transform: translate(-50%, -50%) scale(1.05);
+  }
 }

-#app[data-route="StoryboardVideo"]::before {
+/* 图生视频 - 深色紫色梦幻风全屏覆盖 */
+.fullscreen-background.ImageToVideo {
+  background: 
+    radial-gradient(ellipse at center, rgba(40, 20, 60, 0.8) 0%, rgba(20, 10, 30, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #2a0a4e 100%);
+  animation: imageVideoGlow 8s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.ImageToVideo::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: 60%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 25% 75%, rgba(255, 154, 158, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 75% 25%, rgba(254, 207, 239, 0.3) 0%, transparent 50%);
-  animation: storyboardBounce 5s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(168, 192, 255, 0.3) 0%, rgba(63, 43, 150, 0.3) 40%, transparent 70%);
+  animation: imageVideoCentralGlow 9s ease-in-out infinite alternate;
 }

-@keyframes storyboardBounce {
-  0% { opacity: 0.3; transform: translateY(0px); }
-  100% { opacity: 0.7; transform: translateY(-10px); }
+@keyframes imageVideoGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 会员订阅 - 奢华金色 */
-#app[data-route="Subscription"] {
-  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+@keyframes imageVideoCentralGlow {
+  0% { 
+    opacity: 0.2; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.6; 
+    transform: translate(-50%, -50%) scale(1.08);
+  }
 }

-#app[data-route="Subscription"]::before {
+/* 分镜视频 - 深色橙色活力风全屏覆盖 */
+.fullscreen-background.StoryboardVideo {
+  background: 
+    radial-gradient(ellipse at center, rgba(80, 40, 20, 0.8) 0%, rgba(40, 20, 10, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #2a0a0a 50%, #4a0a0a 100%);
+  animation: storyboardGlow 5s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.StoryboardVideo::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70%;
+  height: 45%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 20% 80%, rgba(252, 182, 159, 0.3) 0%, transparent 50%);
-  animation: subscriptionLuxury 6s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(255, 154, 158, 0.3) 0%, rgba(254, 207, 239, 0.2) 40%, transparent 70%);
+  animation: storyboardCentralGlow 6s ease-in-out infinite alternate;
 }

-@keyframes subscriptionLuxury {
-  0% { opacity: 0.4; }
-  100% { opacity: 0.8; }
+@keyframes storyboardGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 管理员页面 - 深色专业风 */
-#app[data-route="AdminDashboard"],
-#app[data-route="AdminOrders"],
-#app[data-route="AdminUsers"] {
-  background: #1a1a1a;
-  color: white;
+@keyframes storyboardCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.7; 
+    transform: translate(-50%, -50%) scale(1.03);
+  }
 }

-#app[data-route="AdminDashboard"]::before,
-#app[data-route="AdminOrders"]::before,
-#app[data-route="AdminUsers"]::before {
+/* 会员订阅 - 深色奢华金色风全屏覆盖 */
+.fullscreen-background.Subscription {
+  background: 
+    radial-gradient(ellipse at center, rgba(100, 80, 40, 0.8) 0%, rgba(50, 40, 20, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #2a2a0a 50%, #4a4a0a 100%);
+  animation: subscriptionGlow 6s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.Subscription::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 75%;
+  height: 50%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 10% 10%, rgba(0, 150, 255, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 90% 90%, rgba(255, 0, 150, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 50% 50%, rgba(0, 255, 150, 0.05) 0%, transparent 50%);
-  animation: adminTech 8s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(255, 215, 0, 0.3) 0%, rgba(252, 182, 159, 0.2) 40%, transparent 70%);
+  animation: subscriptionCentralGlow 7s ease-in-out infinite alternate;
 }

-@keyframes adminTech {
-  0% { opacity: 0.2; }
-  100% { opacity: 0.5; }
+@keyframes subscriptionGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
 }

-/* 注册页面 - 清新绿色渐变 */
-#app[data-route="Register"] {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+@keyframes subscriptionCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.7; 
+    transform: translate(-50%, -50%) scale(1.04);
+  }
 }

-#app[data-route="Register"]::before {
+/* 管理员页面 - 深色专业科技风全屏覆盖 */
+.fullscreen-background.AdminDashboard,
+.fullscreen-background.AdminOrders,
+.fullscreen-background.AdminUsers {
+  background: 
+    radial-gradient(ellipse at center, rgba(0, 20, 40, 0.9) 0%, rgba(0, 10, 20, 0.95) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%);
+  animation: adminGlow 8s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.AdminDashboard::before,
+.fullscreen-background.AdminOrders::before,
+.fullscreen-background.AdminUsers::before {
  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60%;
+  height: 40%;
+  transform: translate(-50%, -50%);
  background: 
-    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
-  animation: registerFloat 4s ease-in-out infinite alternate;
-  pointer-events: none;
-  z-index: 1;
+    radial-gradient(ellipse at center, rgba(0, 150, 255, 0.2) 0%, rgba(255, 0, 150, 0.1) 30%, rgba(0, 255, 150, 0.1) 60%, transparent 80%);
+  animation: adminCentralGlow 9s ease-in-out infinite alternate;
 }

-@keyframes registerFloat {
-  0% { transform: translateY(0px) rotate(0deg); }
-  100% { transform: translateY(-10px) rotate(1deg); }
+@keyframes adminGlow {
+  0% { opacity: 0.9; }
+  100% { opacity: 1; }
+}
+
+@keyframes adminCentralGlow {
+  0% { 
+    opacity: 0.2; 
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% { 
+    opacity: 0.5; 
+    transform: translate(-50%, -50%) scale(1.06);
+  }
+}
+
+/* 注册页面 - 深色清新风全屏覆盖 */
+.fullscreen-background.Register {
+  background: 
+    radial-gradient(ellipse at center, rgba(20, 40, 80, 0.8) 0%, rgba(10, 20, 40, 0.9) 50%, rgba(0, 0, 0, 1) 100%),
+    linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+  animation: registerGlow 4s ease-in-out infinite alternate;
+}
+
+.fullscreen-background.Register::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70%;
+  height: 45%;
+  transform: translate(-50%, -50%);
+  background: 
+    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, rgba(100, 150, 255, 0.1) 40%, transparent 70%);
+  animation: registerCentralGlow 5s ease-in-out infinite alternate;
+}
+
+@keyframes registerGlow {
+  0% { opacity: 0.8; }
+  100% { opacity: 1; }
+}
+
+@keyframes registerCentralGlow {
+  0% { 
+    opacity: 0.3; 
+    transform: translate(-50%, -50%) scale(1) rotate(0deg);
+  }
+  100% { 
+    opacity: 0.6; 
+    transform: translate(-50%, -50%) scale(1.02) rotate(1deg);
+  }
 }

 /* 内容层级确保在所有背景效果之上 */
@@ -393,6 +560,18 @@ main.with-navbar {
  z-index: 2;
 }

+/* 确保导航栏在背景之上 */
+#app .navbar {
+  position: relative;
+  z-index: 10;
+}
+
+/* 确保页脚在背景之上 */
+#app .footer {
+  position: relative;
+  z-index: 10;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  main {