登录页 logo 替换为图片,终端及落地页样式微调

LoginClient 双布局 logo 从 CloudSun 图标+文字改为 /logo.png 图片。
ScanTerminalState 样式精简,LoadingSignal 调整,落地页细节优化。

Tested: tsc --noEmit 通过, npm run build 通过
This commit is contained in:
2569718930@qq.com
2026-05-25 01:10:26 +08:00
parent 8b93f8ff54
commit af97173eed
5 changed files with 47 additions and 200 deletions
+4 -10
View File
@@ -241,11 +241,8 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
{/* Left Dark Column */}
<div className="relative flex flex-col justify-between bg-[#11161d] p-8 text-white lg:w-[480px] xl:w-[540px] shrink-0">
<div className="flex flex-col gap-12">
<Link href="/" className="flex items-center gap-2.5 font-bold hover:opacity-90">
<span className="grid h-8 w-8 place-items-center rounded bg-blue-600 text-white">
<CloudSun size={18} />
</span>
<span className="text-lg tracking-tight">PolyWeather</span>
<Link href="/" className="flex items-center hover:opacity-90">
<img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain" />
</Link>
<div className="mt-8 space-y-6">
@@ -408,11 +405,8 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
<div className="flex min-h-screen w-full flex-col bg-[#f8fafc] font-sans text-slate-900">
{/* Top Header */}
<header className="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-6">
<Link href="/" className="flex items-center gap-2.5 font-bold hover:opacity-90">
<span className="grid h-8 w-8 place-items-center rounded bg-blue-600 text-white">
<CloudSun size={18} />
</span>
<span className="text-lg tracking-tight">PolyWeather</span>
<Link href="/" className="flex items-center hover:opacity-90">
<img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain" />
</Link>
<div className="flex items-center gap-3">
<span className="text-xs text-slate-500 hidden sm:inline">{copy.newToPoly}</span>
@@ -363,10 +363,10 @@ function KoyfinWeatherTerminal({
<aside className="flex w-[52px] shrink-0 flex-col items-center gap-2 bg-[#171d24] py-4 text-slate-300">
<Link
href="/"
className="mb-2 grid h-8 w-8 place-items-center rounded bg-blue-600 text-white transition hover:bg-blue-700"
className="mb-2 block h-8 w-8 overflow-hidden rounded transition hover:opacity-90"
title="PolyWeather"
>
<CloudSun size={18} />
<img src="/apple-touch-icon.png" alt="PolyWeather" className="h-full w-full object-cover" />
</Link>
<Menu size={23} className="mb-3" />
{[CloudSun, Table2, BarChart3, LineChart, Gauge, Bell].map((Icon, i) => (
@@ -657,11 +657,9 @@ function ProductAccessRequired({
<aside className="w-[52px] bg-[#171d24]" />
<main className="flex flex-1 flex-col">
<header className="flex h-[64px] items-center justify-between bg-[#171d24] px-4 text-white">
<Link href="/" className="flex items-center gap-3 font-black hover:opacity-90">
<span className="grid h-8 w-8 place-items-center rounded bg-blue-600 text-white">
<CloudSun size={18} />
</span>
<span>PolyWeather Terminal</span>
<Link href="/" className="flex items-center gap-2 hover:opacity-90">
<img src="/logo.png" alt="PolyWeather" className="h-7 w-auto object-contain" />
<span className="text-sm font-semibold tracking-tight text-white/90">Terminal</span>
</Link>
<div className="font-mono text-sm text-slate-300">{userLocalTime}</div>
</header>
@@ -111,99 +111,40 @@
width: min(100%, 420px);
display: grid;
justify-items: center;
gap: 18px;
gap: 16px;
padding: 28px 30px;
border: 1px solid rgba(125, 211, 252, 0.14);
border-radius: 28px;
background:
radial-gradient(circle at 18% 18%, rgba(77, 163, 255, 0.18), transparent 34%),
linear-gradient(145deg, rgba(12, 20, 36, 0.92), rgba(5, 11, 22, 0.74));
box-shadow:
0 22px 70px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.root :global(.scan-loading-signal::before) {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
transparent 0%,
rgba(125, 211, 252, 0.08) 42%,
rgba(34, 197, 94, 0.1) 50%,
transparent 58%
);
transform: translateX(-120%);
animation: scan-loading-sweep 2.6s ease-in-out infinite;
pointer-events: none;
background: transparent;
}
.root :global(.scan-loading-signal.compact) {
width: min(100%, 340px);
gap: 12px;
padding: 18px 20px;
border-radius: 22px;
background:
radial-gradient(circle at 20% 20%, rgba(77, 163, 255, 0.14), transparent 36%),
rgba(10, 18, 32, 0.62);
box-shadow: none;
}
.root :global(.scan-loading-decision-flow) {
.root :global(.scan-loading-spinner-wrapper) {
position: relative;
z-index: 1;
width: 90px;
height: 90px;
display: grid;
grid-template-columns: 16px minmax(70px, 1fr) 16px minmax(70px, 1fr) 16px;
align-items: center;
width: min(100%, 300px);
place-items: center;
margin: 0 auto;
}
.root :global(.scan-loading-node) {
width: 16px;
height: 16px;
border: 1px solid rgba(226, 232, 240, 0.16);
border-radius: 999px;
background: #0b1220;
box-shadow: 0 0 0 5px rgba(77, 163, 255, 0.05);
}
.root :global(.scan-loading-node.hot) {
background: linear-gradient(135deg, #f97316, #fde047);
box-shadow: 0 0 24px rgba(251, 146, 60, 0.26);
}
.root :global(.scan-loading-node.market) {
background: linear-gradient(135deg, #38bdf8, var(--color-accent-primary));
box-shadow: 0 0 24px rgba(56, 189, 248, 0.26);
}
.root :global(.scan-loading-node.action) {
background: linear-gradient(135deg, #22c55e, #1be392);
box-shadow: 0 0 24px rgba(34, 197, 94, 0.3);
animation: scan-loading-node-breathe 1.8s ease-in-out infinite;
}
.root :global(.scan-loading-rail) {
position: relative;
height: 2px;
overflow: hidden;
background: rgba(148, 163, 184, 0.16);
}
.root :global(.scan-loading-rail i) {
.root :global(.scan-loading-spinner-ring) {
position: absolute;
inset: 0;
width: 48%;
border-radius: 999px;
background: linear-gradient(90deg, transparent, #7dd3fc, #22c55e);
transform: translateX(-110%);
animation: scan-loading-rail-flow 1.55s ease-in-out infinite;
border: 1.5px solid transparent;
border-top-color: var(--color-text-primary);
border-right-color: var(--color-text-primary);
border-radius: 50%;
animation: scan-loading-spin 1s linear infinite;
}
.root :global(.scan-loading-rail:nth-of-type(4) i) {
animation-delay: 0.45s;
.root :global(.scan-loading-spinner-logo) {
width: 44px;
height: 44px;
object-fit: contain;
}
.root :global(.scan-loading-copy-block) {
@@ -216,102 +157,25 @@
.root :global(.scan-loading-copy-block strong) {
color: var(--color-text-primary);
font-size: 18px;
font-weight: 900;
letter-spacing: -0.02em;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
}
.root :global(.scan-loading-copy-block span) {
max-width: 320px;
color: var(--color-text-secondary);
font-size: 13px;
font-weight: 600;
line-height: 1.55;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
}
.root :global(.scan-loading-signal-bars) {
position: relative;
z-index: 1;
display: flex;
align-items: end;
gap: 5px;
height: 28px;
}
.root :global(.scan-loading-signal-bars span) {
width: 7px;
min-height: 8px;
border-radius: 999px 999px 4px 4px;
background: linear-gradient(180deg, #7dd3fc, var(--color-accent-primary) 52%, #1be392);
opacity: 0.42;
transform-origin: center bottom;
animation: scan-loading-bars 1.35s ease-in-out infinite;
}
.root :global(.scan-loading-signal-bars span:nth-child(1)) {
height: 12px;
}
.root :global(.scan-loading-signal-bars span:nth-child(2)) {
height: 22px;
animation-delay: 0.16s;
}
.root :global(.scan-loading-signal-bars span:nth-child(3)) {
height: 16px;
animation-delay: 0.32s;
}
.root :global(.scan-loading-signal-bars span:nth-child(4)) {
height: 25px;
animation-delay: 0.48s;
}
@keyframes scan-loading-sweep {
@keyframes scan-loading-spin {
0% {
transform: translateX(-130%);
}
46%,
100% {
transform: translateX(130%);
}
}
@keyframes scan-loading-rail-flow {
0% {
transform: translateX(-110%);
opacity: 0.15;
}
45% {
opacity: 1;
transform: rotate(0deg);
}
100% {
transform: translateX(220%);
opacity: 0.15;
}
}
@keyframes scan-loading-node-breathe {
0%,
100% {
transform: scale(0.92);
filter: saturate(0.9);
}
50% {
transform: scale(1.08);
filter: saturate(1.25);
}
}
@keyframes scan-loading-bars {
0%,
100% {
opacity: 0.38;
transform: scaleY(0.72);
}
50% {
opacity: 0.95;
transform: scaleY(1);
transform: rotate(360deg);
}
}
@@ -15,27 +15,21 @@ export function LoadingSignal({
role="status"
aria-live="polite"
>
<div className="scan-loading-decision-flow" aria-hidden="true">
<span className="scan-loading-node hot" />
<span className="scan-loading-rail">
<i />
</span>
<span className="scan-loading-node market" />
<span className="scan-loading-rail">
<i />
</span>
<span className="scan-loading-node action" />
<div className="scan-loading-spinner-wrapper" aria-hidden="true">
<div className="scan-loading-spinner-ring" />
<img
src="/static/logo.png"
alt="PolyWeather"
className="scan-loading-spinner-logo"
onError={(e) => {
(e.target as HTMLImageElement).src = "/logo.png";
}}
/>
</div>
<div className="scan-loading-copy-block">
<strong>{title}</strong>
{description ? <span>{description}</span> : null}
</div>
<div className="scan-loading-signal-bars" aria-hidden="true">
<span />
<span />
<span />
<span />
</div>
</div>
);
}
@@ -121,11 +121,8 @@ function InstitutionalLandingScreen() {
<div className="min-h-screen bg-[#f4f7fb] text-slate-950">
<header className="sticky top-0 z-30 border-b border-slate-200 bg-white/95 backdrop-blur">
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<Link href="/" className="flex items-center gap-2 font-bold">
<span className="grid h-9 w-9 place-items-center rounded-lg bg-blue-600 text-white">
<CloudSun size={20} />
</span>
<span>PolyWeather</span>
<Link href="/" className="flex items-center hover:opacity-90">
<img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain" />
</Link>
<nav className="hidden items-center gap-7 text-sm font-semibold text-slate-600 md:flex">
<a href="#platform" className="hover:text-slate-950">