参考Welcome页面样式优化登录页面背景 - 使用背景图片实现全屏覆盖

This commit is contained in:
AIGC Developer
2025-10-21 17:28:17 +08:00
parent a55692e80e
commit 61c6fb5b87

View File

@@ -111,50 +111,32 @@ main.with-navbar {
background-attachment: fixed; background-attachment: fixed;
} }
/* 登录页面特殊背景处理 */ /* 登录页面特殊背景处理 - 参考Welcome页面样式 */
#app[data-route="Login"] .fullscreen-background { #app[data-route="Login"] .fullscreen-background {
background: url('/images/backgrounds/login.png') center/cover no-repeat; background: url('/images/backgrounds/login.png') center/cover no-repeat;
background-attachment: fixed; background-attachment: fixed;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
} }
/* ========== 页面特殊样式 ========== */ /* ========== 页面特殊样式 ========== */
/* 欢迎页面 - 深色科技风全屏覆盖 */ /* 欢迎页面 - 参考Welcome页面样式 */
.fullscreen-background.Welcome { .fullscreen-background.Welcome {
background: background: url('/images/backgrounds/welcome.jpg') center/cover no-repeat;
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%), background-attachment: fixed;
linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); min-height: 100vh;
animation: welcomeGlow 6s ease-in-out infinite alternate; position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
} }
.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 { .fullscreen-background.Home {