diff --git a/static/hub.css b/static/hub.css index dac44d5..d000ee5 100644 --- a/static/hub.css +++ b/static/hub.css @@ -330,14 +330,9 @@ button, .btn { .overview-summary { display: grid; - gap: 12px; + gap: 10px; margin: 0 0 14px; } -.overview-kpi-split { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} .overview-kpi-block { padding: 12px 14px; border-radius: var(--radius); @@ -346,12 +341,9 @@ button, .btn { box-shadow: var(--shadow); backdrop-filter: blur(10px); } -.overview-kpi-block--sim { +.overview-kpi-block--main { border-color: rgba(56, 189, 248, 0.28); } -.overview-kpi-block--live { - border-color: rgba(52, 211, 153, 0.28); -} .overview-kpi-head { display: flex; align-items: baseline; @@ -388,11 +380,57 @@ button, .btn { } .overview-kpi-value.status-on { color: var(--ok); } .overview-kpi-value.status-off { color: var(--bad); } +.overview-mode-wrap { + overflow-x: auto; + border-radius: var(--radius); + border: 1px solid var(--line); + background: var(--panel); + box-shadow: var(--shadow); +} +.overview-mode-table { + width: 100%; + border-collapse: collapse; + font-size: 0.88rem; +} +.overview-mode-table th, +.overview-mode-table td { + padding: 10px 12px; + text-align: center; + border-bottom: 1px solid rgba(56, 189, 248, 0.1); + font-variant-numeric: tabular-nums; +} +.overview-mode-table tr:last-child td { border-bottom: 0; } +.overview-mode-table th { + color: var(--muted); + font-weight: 600; + font-size: 0.78rem; + background: rgba(5, 12, 22, 0.45); +} +.overview-mode-table td:first-child, +.overview-mode-table th:first-child { + text-align: left; + white-space: nowrap; +} +.overview-mode-tag { + display: inline-block; + padding: 2px 8px; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.03em; +} +.overview-mode-tag--sim { + color: #7dd3fc; + background: rgba(56, 189, 248, 0.14); +} +.overview-mode-tag--live { + color: #6ee7b7; + background: rgba(52, 211, 153, 0.14); +} @media (max-width: 1100px) { .overview-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 800px) { - .overview-kpi-split { grid-template-columns: 1fr; } .overview-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pos-brief { diff --git a/static/hub.js b/static/hub.js index 8eb1bd4..30a4aa7 100644 --- a/static/hub.js +++ b/static/hub.js @@ -427,31 +427,62 @@ return; } const s = summarizeOverview(list); + function modeRow(label, tag, bucket) { + return ( + "
| 模式 | 在线 | 离线 | 仓位 | 浮盈 | 权利金 | 余额 | " + + "
|---|