参考Welcome页面样式优化登录页面背景 - 使用背景图片实现全屏覆盖
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user