From 30fef937b09b0651b6d09df82809bccd0bdea115 Mon Sep 17 00:00:00 2001 From: lingniu Date: Mon, 3 Aug 2026 21:30:45 +0800 Subject: [PATCH] fix: use original logo and responsive header --- index.html | 44 +----------- styles.css | 199 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 199 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 3279011..aafcd60 100644 --- a/index.html +++ b/index.html @@ -28,49 +28,7 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + 羚牛氢能 Lingniu Hydrogen Mobility
diff --git a/styles.css b/styles.css index b2bb6c5..ae696a4 100644 --- a/styles.css +++ b/styles.css @@ -130,10 +130,17 @@ body { .brand-logo-svg { height: 34px; width: auto; - color: var(--text-main); + display: block; + object-fit: contain; transition: transform 0.2s ease; } +.theme-dark .brand-block { + padding: 3px 6px; + background: rgba(255, 255, 255, 0.94); + border-radius: 8px; +} + .brand-logo-svg:hover { transform: scale(1.03); } @@ -667,3 +674,193 @@ body { color: var(--text-sub); margin-top: 1px; } + +/* -------------------------------------------------------------------------- + MOBILE / NARROW VIEWPORT + -------------------------------------------------------------------------- */ +@media (max-width: 768px) { + body { + height: auto; + min-height: 100dvh; + overflow-x: hidden; + overflow-y: auto; + } + + .liquid-cockpit-wrapper { + width: 100%; + height: auto; + min-height: 100dvh; + padding: 8px; + gap: 8px; + } + + .liquid-header { + height: auto; + min-height: 0; + padding: 10px; + flex-wrap: wrap; + gap: 10px; + } + + .header-left { + width: 100%; + min-width: 0; + gap: 10px; + } + + .brand-block { + flex: 0 1 150px; + min-width: 118px; + } + + .brand-logo-svg { + width: 100%; + max-width: 150px; + height: auto; + } + + .brand-divider { + flex: 0 0 1px; + } + + .cockpit-title-wrap { + min-width: 0; + flex: 1; + justify-content: flex-end; + } + + .cockpit-title { + flex: 0 0 auto; + font-size: 15px; + white-space: nowrap; + word-break: keep-all; + } + + .de-tag { + display: none; + } + + .header-kpi-group { + order: 2; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + width: 100%; + gap: 6px; + } + + .kpi-glass-capsule { + min-width: 0; + padding: 5px 7px; + } + + .capsule-lbl { + overflow: hidden; + font-size: 8px; + white-space: nowrap; + text-overflow: ellipsis; + } + + .capsule-val { + font-size: 12px; + white-space: nowrap; + } + + .header-controls { + order: 3; + width: 100%; + justify-content: space-between; + gap: 4px; + } + + .segment-btn, + .bw-btn { + padding: 4px 8px; + font-size: 10px; + } + + .time-widget { + display: none; + } + + .cockpit-main-grid { + grid-template-columns: minmax(0, 1fr); + flex: none; + min-height: 0; + gap: 8px; + } + + .map-spatial-container { + height: 520px; + min-height: 520px; + } + + .map-top-bar { + top: 8px; + left: 8px; + right: 8px; + } + + .status-glass-pill { + min-width: 0; + max-width: 100%; + padding: 4px 8px; + } + + #mapStatusText { + min-width: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .map-legend-glass { + display: none; + } + + .map-action-controls { + right: 8px; + bottom: 30px; + gap: 4px; + } + + .glass-btn { + padding: 5px 7px; + font-size: 9px; + } + + .map-bottom-info { + justify-content: flex-start; + overflow: hidden; + } + + .map-bottom-info span:not(:last-child) { + display: none; + } + + .sidebar-operations { + min-height: auto; + } + + .sidebar-card { + overflow: visible; + } + + .liquid-ranking-list { + max-height: none; + overflow: visible; + } +} + +@media (max-width: 390px) { + .brand-block { + flex-basis: 138px; + } + + .brand-logo-svg { + max-width: 138px; + } + + .theme-switcher-bw .bw-btn span { + display: none; + } +}