diff --git a/frontend/src/App.css b/frontend/src/App.css index 0c04761..4e7fdca 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -4125,30 +4125,49 @@ input[type="checkbox"] { .login-page-wrapper { min-height: 100vh; - background: radial-gradient(circle at 12% 10%, rgba(37, 99, 235, 0.15) 0%, transparent 42%), - radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.14) 0%, transparent 45%), + background: + linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(37, 99, 235, 0.07)), linear-gradient(180deg, #f8fafc 0%, #e8eefc 100%); display: flex; align-items: center; justify-content: center; - padding: 24px; + padding: 28px; +} + +.login-shell { + width: min(1180px, 100%); + min-height: min(720px, calc(100vh - 56px)); + display: grid; + grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); + background: #ffffff; + border: 1px solid #dbe4f3; + border-radius: 18px; + box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14); + overflow: hidden; } .login-card { - width: min(420px, 94vw); + width: 100%; background: #ffffff; - border: 1px solid #dbe4f3; - border-radius: 16px; - box-shadow: 0 24px 52px rgba(15, 23, 42, 0.16); - padding: 24px; + border-right: 1px solid #dbe4f3; + padding: 34px; display: flex; flex-direction: column; - gap: 14px; + justify-content: center; + gap: 16px; +} + +.login-card--checking { + width: min(420px, 94vw); + border: 1px solid #dbe4f3; + border-radius: 14px; + box-shadow: var(--shadow-panel); } .login-card h2 { margin: 0; - font-size: 1.4em; + font-size: 1.55em; + line-height: 1.25; color: var(--color-text-primary); } @@ -4166,7 +4185,7 @@ input[type="checkbox"] { color: var(--color-accent-strong); font-weight: 700; font-size: 0.75em; - letter-spacing: 0.4px; + letter-spacing: 0; padding: 4px 10px; } @@ -4196,7 +4215,7 @@ input[type="checkbox"] { .login-card input, .login-card select { width: 100%; - padding: 10px 12px; + padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.95em; @@ -4240,6 +4259,149 @@ input[type="checkbox"] { color: #1e3a8a; } +.login-submit-btn { + min-height: 42px; + border-radius: 8px; + font-weight: 700; +} + +.login-visual-panel { + min-width: 0; + display: grid; + grid-template-rows: auto minmax(0, 1fr) auto; + gap: 18px; + padding: 34px; + background: #f8fafc; +} + +.login-slide-copy { + max-width: 680px; +} + +.login-slide-copy span { + color: var(--color-accent-strong); + font-size: 0.82em; + font-weight: 700; +} + +.login-slide-copy h3 { + margin: 8px 0 8px; + color: var(--color-text-primary); + font-size: 1.55em; + line-height: 1.25; +} + +.login-slide-copy p { + margin: 0; + color: var(--color-text-secondary); + line-height: 1.58; +} + +.login-slide-frame { + position: relative; + min-height: 0; + border: 1px solid #cbd5e1; + border-radius: 12px; + overflow: hidden; + background: #0f172a; +} + +.login-slide-image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0; + transform: scale(1.018); + transition: opacity 0.45s ease, transform 0.7s ease; +} + +.login-slide-image.active { + opacity: 1; + transform: scale(1); +} + +.login-slide-dots { + display: flex; + justify-content: center; + gap: 8px; +} + +.login-slide-dots button { + width: 30px; + height: 8px; + border: 1px solid #93a4bd; + border-radius: 999px; + background: #e2e8f0; + padding: 0; + cursor: pointer; +} + +.login-slide-dots button.active { + width: 42px; + border-color: var(--color-accent); + background: var(--color-accent); +} + +@media (max-width: 920px) { + .login-page-wrapper { + align-items: flex-start; + overflow-y: auto; + } + + .login-shell { + min-height: auto; + grid-template-columns: 1fr; + } + + .login-card { + border-right: none; + border-bottom: 1px solid #dbe4f3; + padding: 24px; + } + + .login-visual-panel { + min-height: 420px; + padding: 24px; + } +} + +@media (max-width: 560px) { + .login-page-wrapper { + padding: 12px; + } + + .login-shell { + border-radius: 12px; + } + + .login-card, + .login-visual-panel { + padding: 18px; + } + + .login-card h2, + .login-slide-copy h3 { + font-size: 1.28em; + } + + .login-visual-panel { + min-height: 360px; + } +} + +@media (prefers-reduced-motion: reduce) { + .login-slide-image { + transition: opacity 0.15s ease; + transform: none; + } + + .login-slide-image.active { + transform: none; + } +} + .user-role-chip { display: inline-flex; align-items: center; diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 8f269f0..5486f21 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -2095,7 +2095,7 @@ function App() { if (!authChecked) { return (
请稍候,系统正在验证会话。
内网受控访问,请使用管理员分配的账号登录。
-内网受控访问,请使用管理员分配的账号登录。
{loginSlides[activeSlide].description}
+