fix(ui): 修复 Chart.js 卡片图无限变高(响应式尺寸反馈循环) - canvas 外包固定高度 .chart-box,canvas 绝对定位 inset:0 - 容器高度不再受 canvas 内联尺寸影响,resize 循环终止
This commit is contained in:
+1
-1
@@ -234,7 +234,7 @@
|
|||||||
${hist.length > 0
|
${hist.length > 0
|
||||||
? `<div class="spark-wrap">
|
? `<div class="spark-wrap">
|
||||||
<div class="spark-title">余额历史 · ${WINDOW_LABELS[win]}(${hist.length} 条${th !== null ? `,虚线阈值 ${th}` : ""})</div>
|
<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 class="window-switch" data-aid="${a.id}">${winBtns}</div>
|
||||||
</div>`
|
</div>`
|
||||||
: ""}
|
: ""}
|
||||||
|
|||||||
+11
-4
@@ -597,12 +597,19 @@ label { font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom:
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
/* 卡片迷你图(Chart.js canvas) */
|
/* 卡片迷你图(Chart.js canvas)——chart-box 固定高度,canvas 绝对定位,
|
||||||
.card-chart {
|
避免 Chart.js responsive 尺寸与容器高度互相反馈导致无限变高 */
|
||||||
display: block;
|
.chart-box {
|
||||||
width: 100%;
|
position: relative;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
.card-chart {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
.spark-title {
|
.spark-title {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: var(--text-3);
|
color: var(--text-3);
|
||||||
|
|||||||
Reference in New Issue
Block a user