diff --git a/control/frontend/src/App.tsx b/control/frontend/src/App.tsx index ddfacf4..a6ff051 100644 --- a/control/frontend/src/App.tsx +++ b/control/frontend/src/App.tsx @@ -25,8 +25,13 @@ function Shell({ children }: { children: ReactNode }) { return (
-
-
比特骆驼中控
+
+
+
自动化对冲监控系统
+
比特骆驼开发定制
+
+
+
+ {!lanClient ? ( +
+ {user} + +
+ ) : null}
-
-
自动化对冲监控系统
-
比特骆驼开发定制
-
- {!lanClient ? ( -
- {user} - -
- ) : null}
{children}
diff --git a/control/frontend/src/styles.css b/control/frontend/src/styles.css index f005f6a..350233d 100644 --- a/control/frontend/src/styles.css +++ b/control/frontend/src/styles.css @@ -47,69 +47,65 @@ body { } .header { - position: relative; display: flex; - align-items: center; - justify-content: space-between; - gap: 20px; + flex-direction: column; + align-items: stretch; + gap: 14px; 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 { +.header-top { display: flex; + justify-content: center; + align-items: flex-start; + padding: 4px 0 2px; +} + +.header-title-wrap { + display: flex; + flex-direction: column; align-items: center; - gap: 20px; - z-index: 1; - min-width: 0; -} - -.brand { - font-weight: 700; - letter-spacing: 0.08em; - font-size: 1.15rem; - 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); + width: fit-content; + max-width: 100%; } .header-title { font-weight: 700; - letter-spacing: 0.12em; - font-size: 1.2rem; - line-height: 1.25; + letter-spacing: 0.16em; + font-size: clamp(1.55rem, 2.8vw, 2.05rem); + line-height: 1.2; color: var(--accent); text-shadow: var(--glow); white-space: nowrap; + text-align: center; } .header-subtitle { - margin-top: 2px; - font-size: 0.72rem; - letter-spacing: 0.18em; + align-self: flex-end; + margin-top: 4px; + margin-right: -0.4em; + padding-left: 2.5em; + font-size: 0.78rem; + letter-spacing: 0.2em; color: var(--muted); white-space: nowrap; } +.header-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} + .nav { display: flex; gap: 8px; + flex-wrap: wrap; } .nav a { @@ -133,23 +129,10 @@ body { 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 { margin: 0 0 8px; font-size: 1.25rem;