|
|
@@ -16,19 +16,17 @@
|
|
|
>
|
|
|
<span class="tile__accent" aria-hidden="true"></span>
|
|
|
<div class="tile__body">
|
|
|
- <div class="tile__info">
|
|
|
- <el-tooltip
|
|
|
- v-if="cell.formulaText"
|
|
|
- placement="top"
|
|
|
- :show-after="200"
|
|
|
- :content="cell.formulaText"
|
|
|
- >
|
|
|
- <div class="tile__label tile__label--formula">{{ cell.label }}</div>
|
|
|
- </el-tooltip>
|
|
|
- <div v-else class="tile__label">{{ cell.label }}</div>
|
|
|
- <div class="tile__target">
|
|
|
- 目标值: <span class="tile__target-val">{{ cell.targetDisplay || '—' }}</span>
|
|
|
- </div>
|
|
|
+ <el-tooltip
|
|
|
+ v-if="cell.formulaText"
|
|
|
+ placement="top"
|
|
|
+ :show-after="200"
|
|
|
+ :content="cell.formulaText"
|
|
|
+ >
|
|
|
+ <div class="tile__label tile__label--formula">{{ cell.label }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <div v-else class="tile__label">{{ cell.label }}</div>
|
|
|
+ <div class="tile__target">
|
|
|
+ 目标值: <span class="tile__target-val">{{ cell.targetDisplay || '—' }}</span>
|
|
|
</div>
|
|
|
<div class="tile__main">
|
|
|
<span class="tile__value">{{ cell.value }}</span>
|
|
|
@@ -131,20 +129,14 @@ const overflowCount = computed(() => {
|
|
|
.tile__body {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 6px;
|
|
|
- padding: 8px 10px 8px 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.tile__info {
|
|
|
- flex: 1 1 0;
|
|
|
- min-width: 0;
|
|
|
+ min-height: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 4px;
|
|
|
+ align-items: center;
|
|
|
justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 10px 10px 12px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.tile__label {
|
|
|
@@ -152,6 +144,7 @@ const overflowCount = computed(() => {
|
|
|
font-weight: 500;
|
|
|
color: #cbd5e1;
|
|
|
line-height: 1.25;
|
|
|
+ max-width: 100%;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
@@ -160,14 +153,14 @@ const overflowCount = computed(() => {
|
|
|
.tile__label--formula {
|
|
|
cursor: help;
|
|
|
border-bottom: 1px dashed rgba(148, 163, 184, 0.55);
|
|
|
- align-self: flex-start;
|
|
|
- max-width: 100%;
|
|
|
+ padding-bottom: 1px;
|
|
|
}
|
|
|
|
|
|
.tile__target {
|
|
|
font-size: 11px;
|
|
|
color: #94a3b8;
|
|
|
line-height: 1.25;
|
|
|
+ max-width: 100%;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
@@ -179,20 +172,19 @@ const overflowCount = computed(() => {
|
|
|
}
|
|
|
|
|
|
.tile__main {
|
|
|
+ margin-top: 6px;
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
+ justify-content: center;
|
|
|
gap: 3px;
|
|
|
- /* 允许收缩并内部裁切,彻底避免大数字越界压到左侧 label */
|
|
|
- flex: 0 1 auto;
|
|
|
+ max-width: 100%;
|
|
|
min-width: 0;
|
|
|
- max-width: 60%;
|
|
|
overflow: hidden;
|
|
|
- justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.tile__value {
|
|
|
- /* 14cqi = tile 宽度的 14%,夹在 14px~22px 之间;窄 tile 自动缩小不再溢出 */
|
|
|
- font-size: clamp(14px, 14cqi, 22px);
|
|
|
+ /* 18cqi = tile 宽度的 18%,窄 tile 自动缩小;垂直布局无横向挤压,允许更大字号 */
|
|
|
+ font-size: clamp(18px, 18cqi, 30px);
|
|
|
font-weight: 800;
|
|
|
color: #ffffff;
|
|
|
line-height: 1.05;
|
|
|
@@ -201,18 +193,23 @@ const overflowCount = computed(() => {
|
|
|
}
|
|
|
|
|
|
.tile__unit {
|
|
|
- font-size: clamp(9px, 6cqi, 12px);
|
|
|
+ font-size: clamp(10px, 7cqi, 13px);
|
|
|
color: #e2e8f0;
|
|
|
font-weight: 500;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
+.tiles-view--dense .tile__body {
|
|
|
+ gap: 2px;
|
|
|
+ padding: 6px 8px 8px;
|
|
|
+}
|
|
|
+
|
|
|
.tiles-view--dense .tile__value {
|
|
|
- font-size: clamp(12px, 16cqi, 18px);
|
|
|
+ font-size: clamp(14px, 15cqi, 20px);
|
|
|
}
|
|
|
|
|
|
.tiles-view--dense .tile__unit {
|
|
|
- font-size: clamp(9px, 7cqi, 11px);
|
|
|
+ font-size: clamp(9px, 6cqi, 11px);
|
|
|
}
|
|
|
|
|
|
.tiles-view--dense .tile__label {
|
|
|
@@ -223,6 +220,10 @@ const overflowCount = computed(() => {
|
|
|
font-size: 10px;
|
|
|
}
|
|
|
|
|
|
+.tiles-view--dense .tile__main {
|
|
|
+ margin-top: 2px;
|
|
|
+}
|
|
|
+
|
|
|
.tiles-view__overflow {
|
|
|
position: absolute;
|
|
|
right: 4px;
|