金字塔数字对齐

dist/index.html

@@ -6,7 +6,7 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京东路街道</title>
-<script type="module" crossorigin src="./assets/index.4bb3f15a.js"></script>
+<script type="module" crossorigin src="./assets/index.56be8503.js"></script>
   <link rel="modulepreload" href="./assets/vendor.0a2bc783.js">
   <link rel="stylesheet" href="./assets/index.a96a5e4b.css">
 </head>

src/view/right/demand.vue

@@ -28,12 +28,17 @@
       <div class="chart wrapper">
         <img :src="pyramid" />
         <div>
-          <p v-for="item in pieData" :key="item.name">
+          <div v-for="item in pieData" :key="item.name">
             <span :style="{ background: item.color }" />
-            {{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
-              item.value
-            }}% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.num }}
+            <p>
+              <span>{{ item.name }}</span>
+              <span>{{ item.value }}</span>
+              <span>{{ item.num }}</span>
             </p>
+            <!-- {{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
+              item.value
+            }}% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.num }} -->
+          </div>
         </div>
       </div>
     </div>
@@ -347,13 +352,20 @@ $arrow-style()
         &:last-child
           $center()
           flex-direction column
-          p
+          >div
             display flex
             width 100%
             align-items center
             margin-bottom 0.05rem
             position relative
-            span
+            >p
+              flex 1
+              display flex
+              justify-content space-between
+              padding-right .15rem
+              box-sizing border-box
+              align-items center
+            >span
               display inline-block
               width 0.06rem
               height @width