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

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

View File

@ -202,7 +202,7 @@ async function onLogin() {
.rr-login { .rr-login {
width: 100vw; width: 100vw;
height: 100vh; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -211,7 +211,7 @@ async function onLogin() {
padding: 24px; padding: 24px;
} }
/* 舞台(套设计稿 .login-stage) */ /* 舞台(套设计稿 .login-stage) — 背景透明,logo/表单直接渲染在 .rr-login 页面渐变上 */
.rr-login-stage { .rr-login-stage {
width: 1324px; width: 1324px;
height: 600px; height: 600px;
@ -221,26 +221,11 @@ async function onLogin() {
overflow: hidden; overflow: hidden;
display: flex; display: flex;
position: relative; 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; } & > * { position: relative; z-index: 1; }
} }
/* 左 65% 品牌区 */ /* 左 65% 品牌区(背景透明,让 logo/品牌文字直接渲染在 .rr-login 页面渐变上) */
.rr-login-left { .rr-login-left {
flex: 1.857; flex: 1.857;
padding: 48px; padding: 48px;
@ -248,33 +233,11 @@ async function onLogin() {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
position: relative; 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); color: var(--ink);
overflow: hidden; overflow: hidden;
&::before { /* 之前的 ::before 蓝紫光晕 + ::after 网格装饰, 在 left 透明后会让品牌区看起来像个发光方框, 故移除 */
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; }
} }
.rr-login-brand { display: flex; align-items: center; gap: 10px; } .rr-login-brand { display: flex; align-items: center; gap: 10px; }
.rr-login-logo { .rr-login-logo {

View File

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