修复排列

This commit is contained in:
dekun
2026-05-23 16:48:37 +08:00
parent 952d57ab6d
commit 80150227e3
3 changed files with 17 additions and 9 deletions
+2 -7
View File
@@ -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;
+13
View File
@@ -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("") || '<div class="err">无已启用账户</div>';
syncMonitorGridColumns(box, rows.length);
box.querySelectorAll(".btn-close-ex").forEach((btn) => {
btn.onclick = () => closeOne(btn.dataset.id);
});
+2 -2
View File
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/assets/app.css?v=20260522-settings-fix" />
<link rel="stylesheet" href="/assets/app.css?v=20260522-grid" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -80,6 +80,6 @@
</div>
<div id="toast"></div>
<script src="/assets/app.js?v=20260522-settings-fix"></script>
<script src="/assets/app.js?v=20260522-grid"></script>
</body>
</html>