This commit is contained in:
lucashu 2025-08-21 21:53:43 +08:00
parent 7d3bbf7245
commit 0bf453aaa6
2 changed files with 10 additions and 17 deletions

View File

@ -34,7 +34,7 @@ export const option = {
letterSpacing: 1,
isShowButton: false,
linkColor: '#00E5FF',
linkText: '查看更多>>',
linkText: '',
sceneNameColor: '#ffffff',
sceneNameSize: 20,
labelColor: '#B0E0E6',

View File

@ -20,25 +20,17 @@
<div class="content">
<div v-for="(scene, index) in option.dataset" :key="index" class="scene-row"
:class="{ reverse: index % 2 !== 0 }" :style="{ backgroundImage: `url(${backgrounds[index]})` }">
<div class="scene-icon-container">
<div class="yellow-dot"></div>
<svg-icon :icon-class="scene.icon" class="scene-icon"></svg-icon>
</div>
<div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{
scene.name }}</div>
<div class="metrics-container">
<template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
<div class="metric">
<div class="metric-label">
<span class="point"
:style="{ backgroundColor: mIndex === 0 ? option.pointColor1 : option.pointColor2 }"></span>
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label
}}</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{
metric.value }}</div>
</div>
<div class="separator" v-if="mIndex < scene.metrics.length - 1"></div>
</template>
</div>
</div>
@ -88,7 +80,8 @@ const option = computed(() => props.chartConfig.option)
.title {
display: flex;
align-items: center;
margin-top: -5px;
margin-left: 35px;
margin-top: 5px;
.title-text {
height: 35px;
@ -117,7 +110,7 @@ const option = computed(() => props.chartConfig.option)
display: flex;
align-items: center;
padding: 0 25px;
height: 100px; // Taller rows
height: 120px; // Taller rows
background-size: 100% 100%;
background-repeat: no-repeat;
@ -151,8 +144,8 @@ const option = computed(() => props.chartConfig.option)
position: absolute;
top: 8px;
left: 8px; // Positioned differently in 1.png
width: 12px;
height: 12px;
width: 0px;
height: 0px;
background-color: #FFD700;
border-radius: 50%;
}
@ -208,15 +201,15 @@ const option = computed(() => props.chartConfig.option)
align-items: center;
margin-bottom: 10px; // More space
.point {
width: 10px; // Bigger point
height: 10px;
width: 0px; // Bigger point
height: 0px;
border-radius: 50%;
margin-right: 10px;
}
}
.metric-value {
font-weight: bold;
margin-left: 20px; // Align with label text
margin-left: 40px; // Align with label text
}
}
}