style(Charts): 调整停车场景组件样式和颜色配置

- 修改场景名称和标签颜色为更柔和的灰色
- 新增valueColor2颜色配置
- 优化场景分布组件HTML结构,修复嵌套问题
- 添加场景分布概况标题到正确位置
This commit is contained in:
gaohaifeng 2025-08-21 20:11:25 +08:00
parent d4d20fe514
commit 151fb269e9
4 changed files with 326 additions and 101 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -10,11 +10,12 @@ export const option = {
titleSize: 20,
linkColor: '#00E5FF',
linkText: '查看更多>>',
sceneNameColor: '#ffffff',
sceneNameColor: '#ccc',
sceneNameSize: 16,
labelColor: '#B0E0E6',
labelColor: '#ccc',
labelSize: 14,
valueColor: '#00E5FF',
valueColor: '#DFAB0F',
valueColor2: '#00E5FF',
valueSize: 20,
borderColor: '#4A90E2'
}

File diff suppressed because one or more lines are too long

View File

@ -195,24 +195,22 @@
</linearGradient>
</defs>
</svg>
<div class="header-title">场景分布概况</div>
<div class="go-scene-distribution">
<div class="header-title">场景分布概况</div>
<div class="content">
<div v-for="(item, index) in option.dataset" :key="index" class="scene-item">
<div class="item-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title }}</div>
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
<div class="cube-container">
<img :src="getImageUrl(item.image)" class="cube-image" />
</div>
<div class="value-container">
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{ item.value }}</span>
<div class="content">
<div v-for="(item, index) in option.dataset" :key="index" class="scene-item">
<div class="item-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title }}</div>
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
<div class="cube-container">
<img :src="getImageUrl(item.image)" class="cube-image" />
</div>
<div class="value-container">
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{ item.value }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>