diff --git a/src/packages/components/Charts/MyComponents/WorkshopScene/assets/04.png b/src/packages/components/Charts/MyComponents/WorkshopScene/assets/04.png index a76a6e3..3e5a2b2 100644 Binary files a/src/packages/components/Charts/MyComponents/WorkshopScene/assets/04.png and b/src/packages/components/Charts/MyComponents/WorkshopScene/assets/04.png differ diff --git a/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts b/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts index 6c7251f..525faca 100644 --- a/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts +++ b/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts @@ -25,22 +25,22 @@ export const option = { dataset: dataJson.source, title: '场景分布概况', titleColor: '#ffffff', - titleSize: 17, + titleSize: 20, iconColor: '#00E5FF', fontWeight: 'normal', fontStyle: 'normal', - paddingX: 40, - paddingY: -19, - letterSpacing: 2, + paddingX: 10, + paddingY: -12, + letterSpacing: 1, isShowButton: false, linkColor: '#00E5FF', - linkText: '', + linkText: '查看更多>>', sceneNameColor: '#ffffff', - sceneNameSize: 18, + sceneNameSize: 20, labelColor: '#B0E0E6', - labelSize: 14, + labelSize: 16, valueColor: '#ffffff', - valueSize: 24, + valueSize: 28, pointColor1: '#00E5FF', pointColor2: '#FFD700' } diff --git a/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue b/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue index 246f1ea..58f2ea7 100644 --- a/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue +++ b/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue @@ -73,7 +73,7 @@ const option = computed(() => props.chartConfig.option) width: 100%; height: 100%; padding: 12px; - margin-top: 5px; + padding-top: 0; // Let the header handle top padding box-sizing: border-box; display: flex; flex-direction: column; @@ -82,7 +82,8 @@ const option = computed(() => props.chartConfig.option) display: flex; justify-content: space-between; align-items: center; - margin-bottom: 3px; + margin-bottom: 10px; // More space + margin-top: 5px; .title { display: flex; @@ -99,7 +100,8 @@ const option = computed(() => props.chartConfig.option) .link { cursor: pointer; - font-size: 14px; + font-size: 16px; // Bigger link text + margin-right: 20px; } } @@ -107,15 +109,15 @@ const option = computed(() => props.chartConfig.option) flex: 1; display: flex; flex-direction: column; - justify-content: space-around; + justify-content: center; // Center the rows vertically + gap: 20px; // Space between rows } .scene-row { display: flex; align-items: center; - padding: 0 30px; - margin: 10px 0; - height: 90px; + padding: 0 25px; + height: 100px; // Taller rows background-size: 100% 100%; background-repeat: no-repeat; @@ -124,9 +126,9 @@ const option = computed(() => props.chartConfig.option) .scene-name { margin-right: 0; - margin-left: 20px; + margin-left: 25px; } - + .metrics-container { margin-right: auto; margin-left: 0; @@ -136,33 +138,34 @@ const option = computed(() => props.chartConfig.option) .scene-icon-container { position: relative; - width: 60px; - height: 60px; + width: 72px; // Bigger icon container + height: 72px; border-radius: 50%; - background: radial-gradient(circle, #00E5FF 0%, rgba(15, 28, 61, 0) 70%); + background: radial-gradient(circle, rgba(0, 229, 255, 0.5) 0%, rgba(15, 28, 61, 0) 70%); display: flex; align-items: center; justify-content: center; + flex-shrink: 0; .yellow-dot { position: absolute; - top: 5px; - right: 5px; - width: 10px; - height: 10px; + top: 8px; + left: 8px; // Positioned differently in 1.png + width: 12px; + height: 12px; background-color: #FFD700; border-radius: 50%; } .scene-icon { - font-size: 32px; + font-size: 36px; color: #ffffff; } } .scene-name { font-weight: bold; - margin-left: 20px; + margin-left: 25px; } .metrics-container { @@ -172,9 +175,26 @@ const option = computed(() => props.chartConfig.option) .separator { width: 1px; - height: 40px; + height: 50px; background-color: #00E5FF; - margin: 0 20px; + margin: 0 30px; + position: relative; + + &::before, &::after { + content: ''; + position: absolute; + left: -2px; + width: 5px; + height: 5px; + background-color: #00E5FF; + border-radius: 50%; + } + &::before { + top: -1px; + } + &::after { + bottom: -1px; + } } } @@ -182,23 +202,21 @@ const option = computed(() => props.chartConfig.option) display: flex; flex-direction: column; align-items: flex-start; - + .metric-label { display: flex; align-items: center; - margin-bottom: 5px; - + margin-bottom: 10px; // More space .point { - width: 8px; - height: 8px; + width: 10px; // Bigger point + height: 10px; border-radius: 50%; - margin-right: 8px; + margin-right: 10px; } } - .metric-value { font-weight: bold; - margin-left: 16px; + margin-left: 20px; // Align with label text } } }