diff --git a/control/frontend/src/App.tsx b/control/frontend/src/App.tsx index ca5d100..ddfacf4 100644 --- a/control/frontend/src/App.tsx +++ b/control/frontend/src/App.tsx @@ -25,18 +25,24 @@ function Shell({ children }: { children: ReactNode }) { return (
-
比特骆驼中控
- +
+
比特骆驼中控
+ +
+
+
自动化对冲监控系统
+
比特骆驼开发定制
+
{!lanClient ? (
{user} diff --git a/control/frontend/src/styles.css b/control/frontend/src/styles.css index 2aa37e8..f005f6a 100644 --- a/control/frontend/src/styles.css +++ b/control/frontend/src/styles.css @@ -47,14 +47,25 @@ body { } .header { + position: relative; display: flex; align-items: center; + justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 200, 255, 0.08); + min-height: 52px; +} + +.header-left { + display: flex; + align-items: center; + gap: 20px; + z-index: 1; + min-width: 0; } .brand { @@ -64,6 +75,36 @@ body { color: var(--accent); text-shadow: var(--glow); text-transform: none; + white-space: nowrap; +} + +.header-center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + text-align: center; + pointer-events: none; + z-index: 0; + max-width: min(42vw, 360px); +} + +.header-title { + font-weight: 700; + letter-spacing: 0.12em; + font-size: 1.2rem; + line-height: 1.25; + color: var(--accent); + text-shadow: var(--glow); + white-space: nowrap; +} + +.header-subtitle { + margin-top: 2px; + font-size: 0.72rem; + letter-spacing: 0.18em; + color: var(--muted); + white-space: nowrap; } .nav { @@ -89,10 +130,24 @@ body { } .header-right { - margin-left: auto; display: flex; align-items: center; gap: 10px; + z-index: 1; + margin-left: auto; + flex-shrink: 0; +} + +@media (max-width: 900px) { + .header-center { + position: static; + transform: none; + order: 3; + width: 100%; + max-width: none; + margin-top: 4px; + pointer-events: auto; + } } .main h2 {