lucas/go-view-fetch
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

23423

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/components/Charts/MyComponents/WorkshopScene/config.ts
View File

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

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

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