diff --git a/src/modules/auth/LoginView.vue b/src/modules/auth/LoginView.vue index 081fe04..8fde84a 100644 --- a/src/modules/auth/LoginView.vue +++ b/src/modules/auth/LoginView.vue @@ -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 { diff --git a/src/theme/themes.scss b/src/theme/themes.scss index e7cac1c..4b62c7a 100644 --- a/src/theme/themes.scss +++ b/src/theme/themes.scss @@ -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);