23423
This commit is contained in:
parent
7d3bbf7245
commit
0bf453aaa6
@ -34,7 +34,7 @@ export const option = {
|
||||
letterSpacing: 1,
|
||||
isShowButton: false,
|
||||
linkColor: '#00E5FF',
|
||||
linkText: '查看更多>>',
|
||||
linkText: '',
|
||||
sceneNameColor: '#ffffff',
|
||||
sceneNameSize: 20,
|
||||
labelColor: '#B0E0E6',
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user