diff --git a/frontend/src/App.css b/frontend/src/App.css index 4e7fdca..a725a16 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -4125,32 +4125,27 @@ input[type="checkbox"] { .login-page-wrapper { min-height: 100vh; - 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: 28px; + background: #020617; + display: grid; + padding: 0; } .login-shell { - width: min(1180px, 100%); - min-height: min(720px, calc(100vh - 56px)); + grid-area: 1 / 1; + width: 100%; + min-height: 100vh; display: grid; - grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); + grid-template-columns: clamp(360px, 32vw, 480px) 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: 100%; - background: #ffffff; + min-height: 100vh; + background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right: 1px solid #dbe4f3; - padding: 34px; + padding: clamp(32px, 5vh, 56px) clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; @@ -4158,10 +4153,13 @@ input[type="checkbox"] { } .login-card--checking { + place-self: center; width: min(420px, 94vw); + min-height: auto; border: 1px solid #dbe4f3; border-radius: 14px; box-shadow: var(--shadow-panel); + padding: 28px; } .login-card h2 { @@ -4266,42 +4264,60 @@ input[type="checkbox"] { } .login-visual-panel { + position: relative; min-width: 0; - display: grid; - grid-template-rows: auto minmax(0, 1fr) auto; - gap: 18px; - padding: 34px; - background: #f8fafc; + min-height: 100vh; + display: flex; + align-items: flex-end; + overflow: hidden; + padding: clamp(32px, 5vw, 72px); + background: #020617; + color: #f8fafc; +} + +.login-visual-panel::after { + content: ''; + position: absolute; + inset: 0; + background: + linear-gradient(90deg, rgba(2, 6, 23, 0.68) 0%, rgba(2, 6, 23, 0.34) 38%, rgba(2, 6, 23, 0.08) 100%), + linear-gradient(0deg, rgba(2, 6, 23, 0.72) 0%, rgba(2, 6, 23, 0.18) 52%, rgba(2, 6, 23, 0.18) 100%); + pointer-events: none; } .login-slide-copy { - max-width: 680px; + position: relative; + z-index: 2; + max-width: min(720px, 74%); + padding-bottom: 36px; } .login-slide-copy span { - color: var(--color-accent-strong); + color: #7dd3fc; 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; + color: #f8fafc; + font-size: 3.4rem; + line-height: 1.08; + text-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } .login-slide-copy p { margin: 0; - color: var(--color-text-secondary); - line-height: 1.58; + max-width: 680px; + color: #dbeafe; + font-size: 1.02em; + line-height: 1.68; + text-shadow: 0 10px 26px rgba(0, 0, 0, 0.38); } .login-slide-frame { - position: relative; - min-height: 0; - border: 1px solid #cbd5e1; - border-radius: 12px; + position: absolute; + inset: 0; overflow: hidden; background: #0f172a; } @@ -4323,8 +4339,11 @@ input[type="checkbox"] { } .login-slide-dots { + position: absolute; + z-index: 2; + right: clamp(28px, 4vw, 60px); + bottom: clamp(28px, 4vw, 56px); display: flex; - justify-content: center; gap: 8px; } @@ -4344,6 +4363,12 @@ input[type="checkbox"] { background: var(--color-accent); } +@media (max-width: 1240px) { + .login-slide-copy h3 { + font-size: 2.8rem; + } +} + @media (max-width: 920px) { .login-page-wrapper { align-items: flex-start; @@ -4351,31 +4376,39 @@ input[type="checkbox"] { } .login-shell { - min-height: auto; + min-height: 100vh; grid-template-columns: 1fr; } .login-card { + min-height: auto; border-right: none; border-bottom: 1px solid #dbe4f3; padding: 24px; } .login-visual-panel { - min-height: 420px; + min-height: min(58vh, 560px); padding: 24px; } + + .login-slide-copy { + max-width: 100%; + padding-bottom: 34px; + } + + .login-slide-copy h3 { + font-size: 2.2rem; + } + + .login-slide-dots { + right: auto; + left: 24px; + bottom: 20px; + } } @media (max-width: 560px) { - .login-page-wrapper { - padding: 12px; - } - - .login-shell { - border-radius: 12px; - } - .login-card, .login-visual-panel { padding: 18px; @@ -4383,7 +4416,7 @@ input[type="checkbox"] { .login-card h2, .login-slide-copy h3 { - font-size: 1.28em; + font-size: 1.28rem; } .login-visual-panel { diff --git a/frontend/src/LoginPage.jsx b/frontend/src/LoginPage.jsx index 2a9a878..21a88b6 100644 --- a/frontend/src/LoginPage.jsx +++ b/frontend/src/LoginPage.jsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react'; import apiClient from './api/client'; -import clusterDeliveryUrl from './assets/login/cluster-delivery.svg'; -import processingArchitectureUrl from './assets/login/processing-architecture.svg'; -import systemOverviewUrl from './assets/login/system-overview.svg'; +import clusterDeliveryUrl from './assets/login/cluster-delivery-art.webp'; +import processingArchitectureUrl from './assets/login/processing-architecture-art.webp'; +import systemOverviewUrl from './assets/login/system-overview-art.webp'; const loginSlides = [ { diff --git a/frontend/src/assets/login/cluster-delivery-art.webp b/frontend/src/assets/login/cluster-delivery-art.webp new file mode 100644 index 0000000..4b78a19 Binary files /dev/null and b/frontend/src/assets/login/cluster-delivery-art.webp differ diff --git a/frontend/src/assets/login/cluster-delivery.svg b/frontend/src/assets/login/cluster-delivery.svg deleted file mode 100644 index 167e276..0000000 --- a/frontend/src/assets/login/cluster-delivery.svg +++ /dev/null @@ -1,78 +0,0 @@ - - Cluster and Result Delivery Architecture - A cluster processing and result delivery architecture for radar data production. - - - - - - - - - - - - - - - - - - 集群生产与成果交付 - 主服务器统一管理任务，子服务器只承担受控生产服务，成果回传后进入交付流程。 - - - 主服务器 - 资产、任务、用户、审计 - - - 任务队列 - - 成果目录 - - 用户权限 - - - - - 生产节点 - LandSAR / Gamma 执行 - - - 1.6 - - GPU - - 受控 Worker 服务 - - - - - 成果交付 - 申请、打包、下载 - - - - 交付包 - D-InSAR / SBAS - LT-1 / GF3 正射 - - - - - - - - - - - - - - - - - 最小化子服务器代码暴露：仅部署受控执行服务、运行环境和任务数据目录；业务资产与权限仍由主服务器统一管理。 - - - diff --git a/frontend/src/assets/login/processing-architecture-art.webp b/frontend/src/assets/login/processing-architecture-art.webp new file mode 100644 index 0000000..944548c Binary files /dev/null and b/frontend/src/assets/login/processing-architecture-art.webp differ diff --git a/frontend/src/assets/login/processing-architecture.svg b/frontend/src/assets/login/processing-architecture.svg deleted file mode 100644 index 7bec2a2..0000000 --- a/frontend/src/assets/login/processing-architecture.svg +++ /dev/null @@ -1,85 +0,0 @@ - - Production Pipeline Architecture - A pipeline diagram for SAR data parsing, precise orbit matching, D-InSAR and SBAS production, and catalog registration. - - - - - - - - - - - - - - - - - - 生产处理链路 - 增量扫描优先，解析与预览异步，生产结果统一登记到成果目录。 - - - - 源数据扫描 - 增量过滤 - - - - 元数据解析 - XML / TAR / ZIP - - - - 精轨匹配 - 自动补链 - - - - 生产编排 - 队列 / Worker - - - - 成果 - 登记交付 - - - - - - - - - - - D-InSAR / SBAS 生产 - LandSAR、Gamma、SARscape 按任务类型接入 - - - 配对 - - 处理 - - 登记 - - - 可审计运行记录 - 成功、部分成功、失败原因与日志明细独立记录 - - - - - - - - 任务批次 - 失败归因 - 成果目录 - 交付申请 - - - - diff --git a/frontend/src/assets/login/system-overview-art.webp b/frontend/src/assets/login/system-overview-art.webp new file mode 100644 index 0000000..15014aa Binary files /dev/null and b/frontend/src/assets/login/system-overview-art.webp differ diff --git a/frontend/src/assets/login/system-overview.svg b/frontend/src/assets/login/system-overview.svg deleted file mode 100644 index a44450b..0000000 --- a/frontend/src/assets/login/system-overview.svg +++ /dev/null @@ -1,81 +0,0 @@ - - Radar Data Production System Overview - An engineering-style system overview with satellite acquisition, asset catalog, processing, result management, and map analysis. - - - - - - - - - - - - - - - - - - - - - - - - - - - - 雷达数据生产管理系统 - 数据接入 · 生产编排 · 成果管理 · 地图分析 - - - 源数据接入 - LT-1 / Sentinel-1 / GF3 - - - - - 资产台账 - 解析、精轨匹配、缓存 - - - - - - 生产工作台 - D-InSAR / SBAS / 正射 - - - - - - 成果目录 - 登记、提取、交付包 - - - - - - - - - - - - - - 统一生产态势 - 任务、Worker、成果、日志形成可追溯闭环 - - - 扫描入库 - 配对规划 - 集群生产 - 成果发布 - - - -