zS/go-view-fetch
1
0
Fork 0
forked from lucas/go-view-fetch
Code Pull Requests Activity

123

Browse Source
This commit is contained in:
lucashu 2025-08-22 09:15:27 +08:00
parent aaeaaaa191
commit ddac945cc1
1 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/packages/components/Charts/MyComponents/WorkshopScene/index.vue
View File

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