fix(ui): 修复 Chart.js 卡片图无限变高(响应式尺寸反馈循环) - canvas 外包固定高度 .chart-box,canvas 绝对定位 inset:0 - 容器高度不再受 canvas 内联尺寸影响,resize 循环终止

This commit is contained in:
2026-08-05 10:04:19 +08:00
parent 15832772c5
commit 8bcf063838
2 changed files with 12 additions and 5 deletions
+1 -1
View File
@@ -234,7 +234,7 @@
${hist.length > 0
? `<div class="spark-wrap">
<div class="spark-title">余额历史 · ${WINDOW_LABELS[win]}${hist.length}${th !== null ? `,虚线阈值 ${th}` : ""}</div>
<canvas class="card-chart" data-aid="${a.id}"></canvas>
<div class="chart-box"><canvas class="card-chart" data-aid="${a.id}"></canvas></div>
<div class="window-switch" data-aid="${a.id}">${winBtns}</div>
</div>`
: ""}
+11 -4
View File
@@ -597,12 +597,19 @@ label { font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom:
width: 100%;
height: 30px;
}
/* 卡片迷你图(Chart.js canvas */
.card-chart {
display: block;
width: 100%;
/* 卡片迷你图(Chart.js canvas——chart-box 固定高度,canvas 绝对定位,
避免 Chart.js responsive 尺寸与容器高度互相反馈导致无限变高 */
.chart-box {
position: relative;
height: 36px;
}
.card-chart {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
.spark-title {
font-size: 10px;
color: var(--text-3);