AIGC/demo/frontend/src/App.vue

<template>
  <div id="app" :data-route="route.name">
    <!-- 全屏背景层 -->
    <div class="fullscreen-background" :class="route.name"></div>
    
    <!-- 导航栏 - 根据路由条件显示 -->
    <NavBar v-if="shouldShowNavBar" />
    
    <!-- 主要内容区域 -->
    <main :class="{ 'with-navbar': shouldShowNavBar }">
    <router-view />
    </main>
    
    <!-- 页脚 - 根据路由条件显示 -->
    <Footer v-if="shouldShowFooter" />
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'

const route = useRoute()

// 计算是否显示导航栏和页脚
const shouldShowNavBar = computed(() => {
  // 所有页面都不显示导航栏
  return false
})

const shouldShowFooter = computed(() => {
  // 登录和注册页面不显示页脚
  return !['login', 'register'].includes(route.name)
})

// 监听路由变化，动态设置页面样式
watch(route, (newRoute) => {
  console.log('路由变化:', newRoute.name)
}, { immediate: true })

console.log('App.vue 加载成功')
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

/* 全屏背景层 */
.fullscreen-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  z-index: -10; /* 确保在最底层 */
  pointer-events: none;
  background-attachment: fixed;
}

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

main.with-navbar {
  padding-top: 0; /* NavBar 是 fixed 定位，不需要 padding-top */
}

/* 确保登录页面内容正确显示 */
#app[data-route="Login"] main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* 登录页面特殊背景处理 */
#app[data-route="Login"] .fullscreen-background {
  background: url('/images/backgrounds/login.png') center/cover no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

/* 欢迎页面 - 参考Welcome页面样式 */
.fullscreen-background.Welcome {
  background: url('/images/backgrounds/welcome.jpg') center/cover no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}


/* 首页 - 深色科技风全屏覆盖 */
.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;
}

.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.8; }
  100% { opacity: 1; }
}

@keyframes homeCentralGlow {
  0% { 
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.6; 
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* 个人主页 - 深色科技风全屏覆盖 */
.fullscreen-background.Profile {
  background: 
    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;
}

.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.9; }
  100% { opacity: 1; }
}

@keyframes profileCentralGlow {
  0% { 
    opacity: 0.2; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.5; 
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* 订单管理 - 深色商务风全屏覆盖 */
.fullscreen-background.Orders {
  background: 
    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;
}

.fullscreen-background.Orders::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 55%;
  transform: translate(-50%, -50%);
  background: 
    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 ordersGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes ordersCentralGlow {
  0% { 
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.6; 
    transform: translate(-50%, -50%) scale(1.02);
  }
}

/* 支付记录 - 深色金色风全屏覆盖 */
.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: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 45%;
  transform: translate(-50%, -50%);
  background: 
    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 paymentsGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes paymentsCentralGlow {
  0% { 
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.7; 
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* 我的作品 - 深色创意风全屏覆盖 */
.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: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: 
    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 worksGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@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);
  }
}

/* 文生视频 - 深色蓝色科技风全屏覆盖 */
.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: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 50%;
  transform: translate(-50%, -50%);
  background: 
    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 textVideoGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes textVideoCentralGlow {
  0% { 
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.7; 
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* 图生视频 - 深色紫色梦幻风全屏覆盖 */
.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: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: 
    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 imageVideoGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes imageVideoCentralGlow {
  0% { 
    opacity: 0.2; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.6; 
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* 分镜视频 - 深色橙色活力风全屏覆盖 */
.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: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 45%;
  transform: translate(-50%, -50%);
  background: 
    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 storyboardGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes storyboardCentralGlow {
  0% { 
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.7; 
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* 会员订阅 - 深色奢华金色风全屏覆盖 */
.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: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 50%;
  transform: translate(-50%, -50%);
  background: 
    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 subscriptionGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes subscriptionCentralGlow {
  0% { 
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    opacity: 0.7; 
    transform: translate(-50%, -50%) scale(1.04);
  }
}

/* 管理员页面 - 深色专业科技风全屏覆盖 */
.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: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 40%;
  transform: translate(-50%, -50%);
  background: 
    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 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);
  }
}

/* 内容层级确保在所有背景效果之上 */
#app main > * {
  position: relative;
  z-index: 2;
}

/* 确保导航栏在背景之上 */
#app .navbar {
  position: relative;
  z-index: 10;
}

/* 确保页脚在背景之上 */
#app .footer {
  position: relative;
  z-index: 10;
}

/* 响应式设计 */
@media (max-width: 768px) {
  main {
    padding: 0;
  }
  
  body {
    font-size: 14px;
  }
  
  /* 移动端减少动画效果 */
  #app[data-route]::before {
    animation-duration: 10s;
  }
}

/* Element Plus 样式覆盖 */
.el-button {
  font-family: inherit;
}

.el-input {
  font-family: inherit;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>