blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化登录页面视觉效果 - 添加动态光效和微妙发光边框

Browse Source
This commit is contained in:
AIGC Developer
2025-10-21 17:24:20 +08:00
parent f6b45d98d1
commit 8a392065be
1 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
demo/frontend/src/views/Login.vue
View File

@@ -207,7 +207,9 @@ const handleLogin = async () => {
min-height: 100vh;
width: 100vw;
height: 100vh;
background: url('/images/backgrounds/login.png') center/cover no-repeat;
background:
radial-gradient(ellipse at top right, rgba(0, 100, 200, 0.3) 0%, transparent 50%),
linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
position: fixed;
top: 0;
left: 0;
@@ -217,6 +219,33 @@ const handleLogin = async () => {
padding: 0;
}
/* 添加动态光效 */
.login-page::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background:
linear-gradient(45deg, transparent 0%, rgba(0, 150, 255, 0.1) 20%, rgba(0, 200, 255, 0.2) 40%, transparent 60%),
radial-gradient(ellipse at top right, rgba(0, 150, 255, 0.3) 0%, transparent 70%);
animation: lightStreak 8s ease-in-out infinite alternate;
pointer-events: none;
z-index: 1;
}
@keyframes lightStreak {
0% {
opacity: 0.3;
transform: translateX(0px) scale(1);
}
100% {
opacity: 0.7;
transform: translateX(-20px) scale(1.05);
}
}
/* 背景效果已移除，使用图片背景 */
/* 左上角Logo */
@@ -240,7 +269,10 @@ const handleLogin = async () => {
background: rgba(26, 26, 46, 0.8);
backdrop-filter: blur(20px);
border-radius: 24px;
border: none;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
padding: 50px;
z-index: 10;
}
@@ -301,7 +333,7 @@ const handleLogin = async () => {
width: 100px;
height: 55px;
background: rgba(0, 0, 0, 0.3);
border: none;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
@@ -310,6 +342,7 @@ const handleLogin = async () => {
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.country-code:hover {
@@ -327,9 +360,11 @@ const handleLogin = async () => {
.phone-input :deep(.el-input__wrapper) {
background: rgba(0, 0, 0, 0.3);
border: none;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.05);
height: 55px;
}
@@ -355,9 +390,11 @@ const handleLogin = async () => {
.code-input :deep(.el-input__wrapper) {
background: rgba(0, 0, 0, 0.3);
border: none;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.05);
height: 55px;
}
@@ -447,9 +484,10 @@ const handleLogin = async () => {
padding: 6px 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
border: none;
border: 1px solid rgba(255, 255, 255, 0.05);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.account-item:hover {