This commit is contained in:
lucashu 2025-08-22 09:15:27 +08:00
parent aaeaaaa191
commit ddac945cc1

View File

@ -21,13 +21,13 @@
<div class="scene-row" :style="{ backgroundImage: `url(${backgrounds[0]})` }">
<div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危化品库</div>
<div class="metrics-container">
<div class="metric">
<div class="metric-top-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
</div>
<div class="metric">
<div class="metric-top-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
@ -38,13 +38,13 @@
<div class="scene-row reverse" :style="{ backgroundImage: `url(${backgrounds[1]})` }">
<div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危废品库</div>
<div class="metrics-container">
<div class="metric">
<div class="metric-bottom-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
</div>
<div class="metric">
<div class="metric-bottom-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
@ -137,6 +137,7 @@ const option = computed(() => props.chartConfig.option)
.scene-name-2 {
margin-right: 90px;
margin-left: 25px;
}
.metrics-container {
@ -212,7 +213,10 @@ const option = computed(() => props.chartConfig.option)
}
}
.metric {
.metric-top-1,
.metric-top-2,
.metric-bottom-1,
.metric-bottom-2 {
display: flex;
flex-direction: column;
align-items: center;
@ -236,5 +240,23 @@ const option = computed(() => props.chartConfig.option)
left: 9px; // Visually center the value under the text
}
}
.metric-top-1 {
position: relative;
left: -85px;
}
.metric-top-2 {
position: relative;
left: -30px;
}
.metric-bottom-1 {
position: relative;
left: 15px;
}
.metric-bottom-2 {
position: relative;
left:70px;
}
}
</style>