|
|
@@ -105,6 +105,8 @@ const overflowCount = computed(() => {
|
|
|
border: 1px solid rgba(51, 65, 85, 0.45);
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
+ /* 容器查询单位 cqi 让大数字字号随 tile 宽度自适应,避免窄 tile 下数字溢出压到左侧标签 */
|
|
|
+ container-type: inline-size;
|
|
|
--tile-accent: #64748b;
|
|
|
}
|
|
|
|
|
|
@@ -132,12 +134,12 @@ const overflowCount = computed(() => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- gap: 8px;
|
|
|
+ gap: 6px;
|
|
|
padding: 8px 10px 8px 10px;
|
|
|
}
|
|
|
|
|
|
.tile__info {
|
|
|
- flex: 1;
|
|
|
+ flex: 1 1 0;
|
|
|
min-width: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -180,13 +182,17 @@ const overflowCount = computed(() => {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
gap: 3px;
|
|
|
- flex-shrink: 0;
|
|
|
- max-width: 55%;
|
|
|
+ /* 允许收缩并内部裁切,彻底避免大数字越界压到左侧 label */
|
|
|
+ flex: 0 1 auto;
|
|
|
+ min-width: 0;
|
|
|
+ max-width: 60%;
|
|
|
+ overflow: hidden;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.tile__value {
|
|
|
- font-size: clamp(18px, 2.6vw, 26px);
|
|
|
+ /* 14cqi = tile 宽度的 14%,夹在 14px~22px 之间;窄 tile 自动缩小不再溢出 */
|
|
|
+ font-size: clamp(14px, 14cqi, 22px);
|
|
|
font-weight: 800;
|
|
|
color: #ffffff;
|
|
|
line-height: 1.05;
|
|
|
@@ -195,13 +201,18 @@ const overflowCount = computed(() => {
|
|
|
}
|
|
|
|
|
|
.tile__unit {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: clamp(9px, 6cqi, 12px);
|
|
|
color: #e2e8f0;
|
|
|
font-weight: 500;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.tiles-view--dense .tile__value {
|
|
|
- font-size: clamp(14px, 1.9vw, 18px);
|
|
|
+ font-size: clamp(12px, 16cqi, 18px);
|
|
|
+}
|
|
|
+
|
|
|
+.tiles-view--dense .tile__unit {
|
|
|
+ font-size: clamp(9px, 7cqi, 11px);
|
|
|
}
|
|
|
|
|
|
.tiles-view--dense .tile__label {
|