123132

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,
+  paddingX: 10,
-  paddingY: -19,
+  paddingY: -12,
-  letterSpacing: 2,
+  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'
 }

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;
+    padding: 0 25px;
-    margin: 10px 0;
+    height: 100px; // Taller rows
-    height: 90px;
     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;
+    width: 72px; // Bigger icon container
-    height: 60px;
+    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;
+      top: 8px;
-      right: 5px;
+      left: 8px; // Positioned differently in 1.png
-      width: 10px;
+      width: 12px;
-      height: 10px;
+      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;
+        width: 10px; // Bigger point
-        height: 8px;
+        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
     }
   }
 }