diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css
index c0e2605..bc45b93 100644
--- a/manual_trading_hub/static/app.css
+++ b/manual_trading_hub/static/app.css
@@ -478,8 +478,9 @@ button:disabled {
.grid-monitor {
display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
+ /* 列数由 app.js syncMonitorGridColumns 按卡片数量设置 */
+ grid-template-columns: repeat(3, minmax(0, 1fr));
}
.settings-grid-wrap {
@@ -488,12 +489,6 @@ button:disabled {
gap: 16px;
}
-@media (max-width: 1200px) {
- .grid-monitor {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-}
-
.stat-row {
display: grid;
grid-template-columns: 1fr 1fr;
diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js
index c7f68bc..026c87c 100644
--- a/manual_trading_hub/static/app.js
+++ b/manual_trading_hub/static/app.js
@@ -100,6 +100,18 @@
return (settingsCache?.exchanges || []).filter((x) => x.enabled);
}
+ /** 监控卡片列数：3 个一行；4 个 2×2；5/6 个两行（每行最多 3） */
+ function syncMonitorGridColumns(gridEl, count) {
+ if (!gridEl) return;
+ let cols = 3;
+ if (count <= 1) cols = 1;
+ else if (count === 2) cols = 2;
+ else if (count === 3) cols = 3;
+ else if (count === 4) cols = 2;
+ else cols = 3;
+ gridEl.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+ }
+
async function loadMonitorBoard() {
const box = document.getElementById("monitor-grid");
try {
@@ -116,6 +128,7 @@
"UPD " + (data.updated_at || "").replace("T", " ");
const parts = rows.map(renderMonitorCard);
box.innerHTML = parts.join("") || '无已启用账户
';
+ syncMonitorGridColumns(box, rows.length);
box.querySelectorAll(".btn-close-ex").forEach((btn) => {
btn.onclick = () => closeOne(btn.dataset.id);
});
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index 575ca4a..e0f210f 100644
--- a/manual_trading_hub/static/index.html
+++ b/manual_trading_hub/static/index.html
@@ -7,7 +7,7 @@
-
+
@@ -80,6 +80,6 @@
-
+