fix(F006): 登录页 logo 白框彻底清除 - 移除 .rr-login-left ::before 蓝紫光晕 + ::after 网格装饰;.rr-login 改用 --bg-soft 纯色;--login-grad-1 从 #EFF6FF 改深到 #DBEAFE
This commit is contained in:
parent
2b4202b168
commit
40c4b07510
@ -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 {
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user