feat:完善交通页面样式

src/views/traffic/components/box-1.vue

@@ -41,7 +41,11 @@
               label="拥堵频次总数"
             />
             <ul class="chart__legend">
-              <li class="chart__legend-item" v-for="(item, index) in chartData.roadNum" :key="index">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.roadNum"
+                :key="index"
+              >
                 <p class="dot" :style="{ background: colors[index] }" />
                 <p class="name">{{ item.name }}</p>
                 <p class="value">{{ item.value }}%</p>
@@ -60,7 +64,11 @@
               label="拥堵总时长"
             />
             <ul class="chart__legend">
-              <li class="chart__legend-item" v-for="(item, index) in chartData.roadTime" :key="index">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.roadTime"
+                :key="index"
+              >
                 <p class="dot" :style="{ background: colors[index] }" />
                 <p class="name">{{ item.name }}</p>
                 <p class="value">{{ item.value }}%</p>
@@ -75,7 +83,11 @@
           <div>
             <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" />
             <ul class="chart__legend">
-             <li class="chart__legend-item" v-for="(item, index) in chartData.typeNum" :key="index">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.typeNum"
+                :key="index"
+              >
                 <p class="dot" :style="{ background: colors[index] }" />
                 <p class="name">{{ item.name }}</p>
                 <p class="value">{{ item.value }}%</p>
@@ -88,9 +100,17 @@
         <Title3 title="拥堵类型时长占比" />
         <div class="chart__inner">
           <div>
-           <spotRate :dataList="chartData.typeTime" :total="chartData.totalTime" label="拥堵总数" />
+            <spotRate
+              :dataList="chartData.typeTime"
+              :total="chartData.totalTime"
+              label="拥堵总数"
+            />
             <ul class="chart__legend">
-             <li class="chart__legend-item" v-for="(item, index) in chartData.typeTime" :key="index">
+              <li
+                class="chart__legend-item"
+                v-for="(item, index) in chartData.typeTime"
+                :key="index"
+              >
                 <p class="dot" :style="{ background: colors[index] }" />
                 <p class="name">{{ item.name }}</p>
                 <p class="value">{{ item.value }}%</p>
@@ -185,7 +205,7 @@
             position: absolute;
             content: '';
             width: vw(4);
-            height: vh(40);
+            height: vh(30);
             background-color: #0096ff;
           }
 

src/views/traffic/components/spotRate.vue

@@ -41,7 +41,7 @@
       {
         type: 'pie',
         center: ['50%', '50%'],
-        radius: ['70%', '90%'],
+        radius: ['60%', '80%'],
         itemStyle: {
           borderWidth: fitChartSize(4),
           borderColor: '#093672'
@@ -101,6 +101,6 @@
 <style scoped lang="scss">
   .spotRate {
     width: vw(200);
-    height: vh(260);
+    height: vh(200);
   }
 </style>