direv/admin_new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(F006): 登录页 logo 白框彻底清除 - 移除 .rr-login-left ::before 蓝紫光晕 + ::after 网格装饰；.rr-login 改用 --bg-soft 纯色；--login-grad-1 从 #EFF6FF 改深到 #DBEAFE

Browse Source
This commit is contained in:
zou 2026-08-22 11:57:14 +08:00
parent 2b4202b168
commit 40c4b07510
2 changed files with 6 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/modules/auth/LoginView.vue
View File

@ -202,7 +202,7 @@ async function onLogin() {
.rr-login {
width: 100vw;
height: 100vh;
background: linear-gradient(145deg, var(--login-grad-1) 0%, var(--login-grad-2) 50%, var(--login-grad-3) 100%);
background: var(--bg-soft);
display: flex;
align-items: center;
justify-content: center;
@ -211,7 +211,7 @@ async function onLogin() {
padding: 24px;
}
/* 舞台(套设计稿 .login-stage) */
/* 舞台(套设计稿 .login-stage) — 背景透明,logo/表单直接渲染在 .rr-login 页面渐变上 */
.rr-login-stage {
width: 1324px;
height: 600px;
@ -221,26 +221,11 @@ async function onLogin() {
overflow: hidden;
display: flex;
position: relative;
background: linear-gradient(145deg, var(--login-grad-1) 0%, var(--login-grad-2) 50%, var(--login-grad-3) 100%);
border: 1px solid var(--border);
box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.1);
&::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--brand) 1px, transparent 1px),
linear-gradient(90deg, var(--brand) 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
& > * { position: relative; z-index: 1; }
}
/* 左 65% 品牌区 */
/* 左 65% 品牌区（背景透明，让 logo/品牌文字直接渲染在 .rr-login 页面渐变上） */
.rr-login-left {
flex: 1.857;
padding: 48px;
@ -248,33 +233,11 @@ async function onLogin() {
flex-direction: column;
justify-content: space-between;
position: relative;
background: linear-gradient(135deg, var(--login-grad-1) 0%, var(--login-grad-2) 50%, var(--login-grad-3) 100%);
background: transparent;
color: var(--ink);
overflow: hidden;
&::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 800px 500px at 25% 30%, var(--login-glow-1) 0%, transparent 50%),
radial-gradient(ellipse 700px 400px at 75% 70%, var(--login-glow-2) 0%, transparent 50%);
pointer-events: none;
}
&::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--brand) 1px, transparent 1px),
linear-gradient(90deg, var(--brand) 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.04;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
pointer-events: none;
}
& > * { position: relative; z-index: 1; }
/* 之前的 ::before 蓝紫光晕 + ::after 网格装饰, 在 left 透明后会让品牌区看起来像个发光方框, 故移除 */
}
.rr-login-brand { display: flex; align-items: center; gap: 10px; }
.rr-login-logo {

2
src/theme/themes.scss
View File

@ -28,7 +28,7 @@
--primary-soft: var(--brand-soft);
--brand-glow: rgba(37, 99, 235, 0.15);
// 登录页渐变
--login-grad-1: #EFF6FF;
--login-grad-1: #DBEAFE;
--login-grad-2: #DBEAFE;
--login-grad-3: #E0E7FF;
--login-glow-1: rgba(37, 99, 235, 0.18);