From 6e8c907d021a917eee8f9ed58a9c0d7b55581ce5 Mon Sep 17 00:00:00 2001 From: Pigbibi <20649888+Pigbibi@users.noreply.github.com> Date: Sun, 28 Jun 2026 01:50:14 +0800 Subject: [PATCH] Compact platform strip into a single five-column row. Use a narrower five-across layout with smaller marks and labels, hide per-button account/strategy sublines on the strip, and keep five columns on tablet with horizontal scroll on very narrow viewports. Co-authored-by: Cursor --- web/strategy-switch-console/index.html | 74 +++++++++++++++-------- web/strategy-switch-console/page_asset.js | 2 +- 2 files changed, 49 insertions(+), 27 deletions(-) diff --git a/web/strategy-switch-console/index.html b/web/strategy-switch-console/index.html index 6092b2c..b20b1ff 100644 --- a/web/strategy-switch-console/index.html +++ b/web/strategy-switch-console/index.html @@ -261,18 +261,18 @@ .platform-strip { display: grid; - grid-template-columns: repeat(4, minmax(140px, 1fr)); - gap: 10px; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 8px; } .platform-button { min-width: 0; - min-height: 92px; + min-height: 52px; display: grid; grid-template-columns: auto 1fr; align-items: center; - gap: 12px; - padding: 13px; + gap: 8px; + padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--platform-color); border-radius: 8px; @@ -367,15 +367,15 @@ } .mark { - width: 44px; - height: 44px; + width: 32px; + height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--platform-color) 12%, white); color: var(--platform-color); - font-size: 13px; + font-size: 11px; font-weight: 840; transition: background 150ms ease, color 150ms ease; } @@ -392,11 +392,16 @@ } .platform-copy strong { - font-size: 16px; + font-size: 13px; line-height: 1.18; overflow-wrap: anywhere; } + .platform-strip .platform-copy span, + .platform-strip .platform-copy small { + display: none; + } + .platform-copy span { color: var(--muted); font-size: 12px; @@ -832,9 +837,9 @@ } .platform-strip { - grid-template-columns: repeat(4, minmax(160px, 1fr)); - gap: 16px; - padding: 16px; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 8px; + padding: 10px 12px; border: 1px solid rgba(210, 222, 232, 0.85); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.74); @@ -844,9 +849,9 @@ .platform-button { position: relative; - min-height: 72px; - gap: 14px; - padding: 14px 46px 14px 14px; + min-height: 52px; + gap: 8px; + padding: 8px 28px 8px 8px; border: 1px solid rgba(207, 218, 229, 0.9); border-left: 1px solid rgba(207, 218, 229, 0.9); border-radius: var(--radius-md); @@ -873,25 +878,25 @@ content: "✓"; position: absolute; top: 50%; - right: 16px; - width: 24px; - height: 24px; + right: 8px; + width: 18px; + height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--platform-color); color: #ffffff; - font-size: 14px; + font-size: 11px; font-weight: 880; transform: translateY(-50%); box-shadow: 0 8px 18px color-mix(in srgb, var(--platform-color) 24%, transparent); } .mark { - width: 44px; - height: 44px; - border-radius: 12px; + width: 32px; + height: 32px; + border-radius: 10px; background: color-mix(in srgb, var(--platform-color) 10%, #f7fafc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--platform-color) 10%, transparent); } @@ -903,7 +908,7 @@ .platform-copy strong { color: #121a28; - font-size: 16px; + font-size: 13px; letter-spacing: -0.015em; } @@ -1166,7 +1171,13 @@ @media (max-width: 820px) { .platform-strip { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 6px; + padding: 8px 10px; + } + + .platform-copy strong { + font-size: 12px; } .switch-surface { @@ -1213,8 +1224,19 @@ } .platform-strip { - gap: 10px; - padding: 10px; + grid-template-columns: repeat(5, minmax(68px, 1fr)); + gap: 6px; + padding: 8px; + overflow-x: auto; + } + + .platform-button { + min-height: 48px; + padding-inline: 8px 24px; + } + + .platform-copy strong { + font-size: 11px; } .mode-block, diff --git a/web/strategy-switch-console/page_asset.js b/web/strategy-switch-console/page_asset.js index cbe8567..d10cd3e 100644 --- a/web/strategy-switch-console/page_asset.js +++ b/web/strategy-switch-console/page_asset.js @@ -1,2 +1,2 @@ // Generated by scripts/sync_strategy_switch_page_asset.py; do not edit by hand. -export const PAGE_HTML = "\n\n\n \n \n \n QuantRuntimeSettings Strategy Switch\n \n \n\n\n
\n
\n

策略切换

\n

选平台、目标账号和策略,一次执行完成切换。

\n
\n
\n \n \n \n \n
\n
\n\n
\n
\n 初始化控制台\n

读取策略配置

\n

正在读取登录状态、账号配置和当前状态。

\n
\n
\n
\n\n
\n \n\n
\n
\n
\n 当前平台\n

LongBridge

\n
\n\n \n\n \n\n
\n \n\n \n\n
\n 模式\n
\n \n \n
\n \n
\n\n
\n \n\n \n\n \n
\n\n
\n \n\n \n\n \n
\n\n
\n \n
\n\n
\n

现金与融资

\n

允许融资与预留现金覆盖不能同时生效。

\n \n
\n \n\n
\n \n\n \n\n \n
\n
\n
\n\n
\n \n\n \n
\n
\n\n
\n \n

登录后才可执行切换。

\n

\n
\n
\n\n \n
\n
\n\n \n\n\n"; +export const PAGE_HTML = "\n\n\n \n \n \n QuantRuntimeSettings Strategy Switch\n \n \n\n\n
\n
\n

策略切换

\n

选平台、目标账号和策略,一次执行完成切换。

\n
\n
\n \n \n \n \n
\n
\n\n
\n
\n 初始化控制台\n

读取策略配置

\n

正在读取登录状态、账号配置和当前状态。

\n
\n
\n
\n\n
\n \n\n
\n
\n
\n 当前平台\n

LongBridge

\n
\n\n \n\n \n\n
\n \n\n \n\n
\n 模式\n
\n \n \n
\n \n
\n\n
\n \n\n \n\n \n
\n\n
\n \n\n \n\n \n
\n\n
\n \n
\n\n
\n

现金与融资

\n

允许融资与预留现金覆盖不能同时生效。

\n \n
\n \n\n
\n \n\n \n\n \n
\n
\n
\n\n
\n \n\n \n
\n
\n\n
\n \n

登录后才可执行切换。

\n

\n
\n
\n\n \n
\n
\n\n \n\n\n";