登录页 logo 替换为图片,终端及落地页样式微调
LoginClient 双布局 logo 从 CloudSun 图标+文字改为 /logo.png 图片。 ScanTerminalState 样式精简,LoadingSignal 调整,落地页细节优化。 Tested: tsc --noEmit 通过, npm run build 通过
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user