22 <div class =" min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-indigo-50 relative overflow-hidden" >
33 <!-- 动态粒子背景 -->
44 <div class =" absolute inset-0 z-0" >
5- <div v-for =" i in 30" :key =" i"
6- class =" absolute rounded-full bg-blue-200/40"
7- :style =" particleStyle(i)" >
8- </div >
5+ <div
6+ v-for =" i in 30" :key =" i"
7+ class =" absolute rounded-full bg-blue-200/40"
8+ :style =" particleStyle()"
9+ />
910 </div >
10-
11+
1112 <!-- 中央Logo区域 -->
1213 <div class =" fixed inset-0 flex items-center justify-center z-10 pointer-events-none" >
1314 <div class =" relative" >
1415 <!-- 背景光晕效果 -->
15- <div class =" absolute inset-0 bg-blue-300/20 rounded-full blur-3xl transform scale-150 opacity-60" ></ div >
16+ <div class =" absolute inset-0 bg-blue-300/20 rounded-full blur-3xl transform scale-150 opacity-60" / >
1617 <NuxtImg src="/cosmo-logo.svg " class="aspect-square h-32 mb-6 opacity-70" />
17- <!-- <span class="text-blue-600/60 text-sm font-light tracking-widest">CONTENT PLATFORM</span> -->
18+ <!-- <span class="text-blue-600/60 text-sm font-light tracking-widest">CONTENT PLATFORM</span> -->
1819 </div >
1920 </div >
20-
21+
2122 <!-- 动态光晕效果 -->
2223 <div
2324 class =" fixed right-10 top-20 h-1/3 w-1/5 bg-gradient-to-r from-blue-200 to-cyan-100 blur-[120px] -z-10 transition-all duration-1000"
24- :style =" `opacity: 0.${count/ 2}; transform: translate(${count/ 5}px, ${count/ 10}px) rotate(${count/ 2}deg);`"
25+ :style =" `opacity: 0.${count / 2}; transform: translate(${count / 5}px, ${count / 10}px) rotate(${count / 2}deg);`"
2526 />
2627 <div
2728 class =" fixed bottom-20 left-20 h-1/3 w-1/5 bg-gradient-to-r from-indigo-200 to-purple-100 blur-[120px] -z-10 transition-all duration-1000"
28- :style =" `opacity: 0.${count/ 2}; transform: translate(-${count/ 5}px, -${count/ 10}px) rotate(-${count/ 2}deg);`"
29+ :style =" `opacity: 0.${count / 2}; transform: translate(-${count / 5}px, -${count / 10}px) rotate(-${count / 2}deg);`"
2930 />
30-
31+
3132 <!-- 几何装饰元素 -->
32- <div class =" absolute top-1/4 left-10 w-32 h-32 border-2 border-blue-300/40 rounded-full transform -rotate-12" ></ div >
33- <div class =" absolute bottom-1/4 right-10 w-40 h-40 border-2 border-indigo-300/40 rounded-lg transform rotate-12" ></ div >
34-
33+ <div class =" absolute top-1/4 left-10 w-32 h-32 border-2 border-blue-300/40 rounded-full transform -rotate-12" / >
34+ <div class =" absolute bottom-1/4 right-10 w-40 h-40 border-2 border-indigo-300/40 rounded-lg transform rotate-12" / >
35+
3536 <!-- 主布局容器 -->
3637 <div class =" container mx-auto px-4 py-8 max-w-4xl relative z-20" >
3738 <!-- 直接插入页面内容 -->
@@ -47,29 +48,32 @@ const increasing = ref(true);
4748
4849// 背景呼吸灯效果
4950useIntervalFn (() => {
50- if (count .value >= 95 ) increasing .value = false ;
51- if (count .value <= 30 ) increasing .value = true ;
52- if (increasing .value ) count .value += 5 ;
51+ if (count .value >= 95 )
52+ increasing .value = false ;
53+ if (count .value <= 30 )
54+ increasing .value = true ;
55+ if (increasing .value )
56+ count .value += 5 ;
5357 else count .value -= 5 ;
5458}, 300 );
5559
5660// 粒子背景样式生成器
57- const particleStyle = ( index ) => {
61+ function particleStyle () {
5862 const size = Math .random () * 8 + 3 ;
5963 const left = Math .random () * 100 ;
6064 const top = Math .random () * 100 ;
6165 const opacity = Math .random () * 0.4 + 0.2 ;
6266 const animationDuration = Math .random () * 25 + 15 ;
63-
67+
6468 return {
6569 width: ` ${ size} px` ,
6670 height: ` ${ size} px` ,
6771 left: ` ${ left} %` ,
6872 top: ` ${ top} %` ,
69- opacity: opacity ,
70- animation: ` float ${ animationDuration} s infinite ease-in-out`
73+ opacity,
74+ animation: ` float ${ animationDuration} s infinite ease-in-out` ,
7175 };
72- };
76+ }
7377 </script >
7478
7579<style scoped>
@@ -95,4 +99,4 @@ const particleStyle = (index) => {
9599.fade-enter , .fade-leave-to {
96100 opacity : 0 ;
97101}
98- </style >
102+ </style >
0 commit comments