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

1

Browse Source
This commit is contained in:
lucashu 2025-08-21 09:23:22 +08:00
parent a9ba6c5f56
commit 769a2d6e04
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ export const option = {
title: '场景分布概况', title: '场景分布概况',
titleColor: '#ffffff', titleColor: '#ffffff',
titleSize: 20, titleSize: 20,
labelColor: '#B0E0E6', labelColor: '#E6F7FF',
labelSize: 16, labelSize: 16,
valueColor: '#ffffff', valueColor: '#ffffff',
valueSize: 40, valueSize: 40,

22
src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
View File

@ -13,7 +13,9 @@
<div class="cube-container"> <div class="cube-container">
<img :src="getImageUrl(item.image)" class="cube-image" /> <img :src="getImageUrl(item.image)" class="cube-image" />
</div> </div>
<div class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ item.value }}</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> </div>
@ -41,7 +43,7 @@ const getImageUrl = (name: string) => {
.go-scene-distribution { .go-scene-distribution {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #0F1C3D; background-color: #020C22;
padding: 15px; padding: 15px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -51,12 +53,10 @@ const getImageUrl = (name: string) => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: linear-gradient(to right, #1A385A, #2A588A, #1A385A); background-color: rgba(21, 44, 78, 0.5);
border: 1px solid #00E5FF; border-top: 2px solid #00AFFF;
border-radius: 5px;
padding: 5px 15px; padding: 5px 15px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 0 10px #00E5FF;
.title { .title {
display: flex; display: flex;
@ -89,6 +89,7 @@ const getImageUrl = (name: string) => {
.item-label { .item-label {
margin-bottom: 20px; margin-bottom: 20px;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
} }
.cube-container { .cube-container {
@ -107,6 +108,15 @@ const getImageUrl = (name: string) => {
} }
} }
.value-container {
background: linear-gradient(to bottom, #1E3A5E, #0F1C3D);
border: 1px solid #2A588A;
border-radius: 10px;
padding: 5px 30px;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) inset;
border-bottom: 3px solid #00E5FF;
}
.item-value { .item-value {
font-weight: bold; font-weight: bold;
font-family: 'DS-Digital', 'Arial', sans-serif; font-family: 'DS-Digital', 'Arial', sans-serif;