Admin dashboard: align column widths and remove height sync JS
This commit is contained in:
@@ -71,7 +71,8 @@ a:hover{text-decoration:underline;}
|
||||
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
|
||||
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
|
||||
.grid-align-end{align-items:end;}
|
||||
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
|
||||
.two-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;}
|
||||
.two-col > *{min-width:0;}
|
||||
.span-2{grid-column:span 2;}
|
||||
.span-3{grid-column:span 3;}
|
||||
|
||||
|
||||
@@ -120,70 +120,10 @@
|
||||
});
|
||||
})();
|
||||
|
||||
// 仪表盘:卡片高度对齐(趋势/收费工作台 与 最近平台订单对齐)
|
||||
// 说明:运营端希望两列的高度视觉一致,减少右侧“短一截”的割裂感。
|
||||
// 策略:以“最近平台订单”卡片的实际高度作为基准,将同列的趋势/收费工作台设置为同样的 minHeight(仅增不减)。
|
||||
(function () {
|
||||
var root = qs('[data-page="admin.dashboard"]');
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
var recent = qs('[data-role="dashboard-card-recent-platform-orders"]', root);
|
||||
var trend = qs('[data-role="dashboard-card-trend"]', root);
|
||||
var billing = qs('[data-role="dashboard-card-billing-workbench"]', root);
|
||||
|
||||
if (!recent || (!trend && !billing)) {
|
||||
return;
|
||||
}
|
||||
|
||||
function sync() {
|
||||
try {
|
||||
var h = recent.getBoundingClientRect().height;
|
||||
if (!h || h <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 仅增不减:避免小屏/内容变少时出现“强行撑高”的奇怪滚动体验。
|
||||
[trend, billing].forEach(function (el) {
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
var cur = el.getBoundingClientRect().height;
|
||||
if (!cur || cur <= 0) {
|
||||
cur = 0;
|
||||
}
|
||||
if (cur < h) {
|
||||
el.style.minHeight = Math.round(h) + 'px';
|
||||
}
|
||||
} catch (e) {}
|
||||
});
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
// 首次 + 下一帧(等待图片/字体/表格渲染稳定)
|
||||
sync();
|
||||
try {
|
||||
window.requestAnimationFrame(sync);
|
||||
window.setTimeout(sync, 60);
|
||||
window.setTimeout(sync, 200);
|
||||
} catch (e) {}
|
||||
|
||||
// 监听 resize
|
||||
try {
|
||||
window.addEventListener('resize', function () {
|
||||
// 清空后重新计算(避免从大到小的缩放残留)
|
||||
if (trend) {
|
||||
trend.style.minHeight = '';
|
||||
}
|
||||
if (billing) {
|
||||
billing.style.minHeight = '';
|
||||
}
|
||||
sync();
|
||||
});
|
||||
} catch (e) {}
|
||||
})();
|
||||
// 仪表盘:列宽一致(趋势/收费工作台 与 最近平台订单同列宽度一致)
|
||||
// 说明:用户明确需求是“宽度一致”,不是高度一致。
|
||||
// 方案:基于 CSS Grid 的列宽天然一致;这里不再做任何 JS 对齐(避免误解/副作用)。
|
||||
// 保留 data-role 供测试与未来渐进增强定位用。
|
||||
|
||||
// 仪表盘:迷你图表(趋势图渐进增强)
|
||||
// 说明:不引入图表库,避免构建链;用 div bar 方式渲染。
|
||||
|
||||
Reference in New Issue
Block a user