update lib

lib/components/capsuleChart/src/main.css

@@ -38,18 +38,18 @@
   transition: all 0.3s;
 }
 .capsule-chart .unit-label {
-  display: flex;
-  flex-direction: row;
-  line-height: 20px;
+  height: 20px;
   font-size: 12px;
-}
-.capsule-chart .unit-text {
-  width: 30px;
-  text-align: right;
-}
-.capsule-chart .unit-container {
-  flex: 1;
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
+.capsule-chart .unit-text {
+  text-align: right;
+  display: flex;
+  align-items: flex-end;
+  font-size: 12px;
+  line-height: 20px;
+  margin-left: 10px;
+}

lib/components/capsuleChart/src/main.vue

@@ -11,18 +11,16 @@
           class="capsule-item"
           v-for="(capsule, index) in capsuleLength"
           :key="index"
-          :style="`width: calc(100% - ${mergedConfig.unit ? 30 : 0}px)`"
         >
           <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
         </div>
 
         <div class="unit-label">
-          <div class="unit-container">
-            <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
-          </div>
-          <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
         </div>
       </div>
+
+      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
     </template>
   </div>
 </template>