imeik-bizui 2.8.1 → 2.8.2

package/dist/bizui/src/FieldPersonBudgetBoard/core/PersonBudgetOverview.vue

@@ -26,35 +26,37 @@
 
       <div v-if="!accountExists" class="pbo-account-tip">当前费用承担人该年度尚未建账</div>
 
-      <div class="pbo-line2">
-        <div class="pbo-line2__text">
-          <span class="pbo-line2__label">本年累计使用（含本次）</span>
-          <b class="pbo-money">{{ formatMoney(overview.usedAmount) }}</b>
-          <span class="pbo-sep">/</span>
-          <span class="pbo-line2__label">总预算</span>
-          <b class="pbo-money">{{ formatMoney(overview.budgetAmount) }}</b>
+      <div class="pbo-metrics">
+        <div class="pbo-line2">
+          <div class="pbo-line2__text">
+            <span class="pbo-line2__label">本年累计使用（含本次）</span>
+            <b class="pbo-money">{{ formatMoney(overview.usedAmount) }}</b>
+            <span class="pbo-sep">/</span>
+            <span class="pbo-line2__label">总预算</span>
+            <b class="pbo-money">{{ formatMoney(overview.budgetAmount) }}</b>
+          </div>
         </div>
         <span :class="['pbo-chip', remainingChipDanger ? 'is-danger' : '']">
           剩余 {{ formatMoney(overview.remainingAmountWithCurrent) }}
         </span>
-      </div>
 
-      <div class="pbo-bar-row">
-        <div class="pbo-bar-col">
-          <div class="pbo-bar">
-            <div class="pbo-bar__fill" :style="{ width: fillWidth + '%' }" />
-            <div
-              v-if="showWarnTick"
-              class="pbo-bar__tick"
-              :style="{ left: warnTickPercent + '%' }"
-              :title="'预警值：' + formatMoney(warnAmount)"
-            />
-          </div>
-          <div v-if="showWarnTick" class="pbo-scale">
-            <span
-              :class="['pbo-scale__sc', warnScaleClass]"
-              :style="{ left: warnTickPercent + '%' }"
-            >预警值：{{ formatMoney(warnAmount) }}</span>
+        <div class="pbo-bar-row">
+          <div class="pbo-bar-col">
+            <div class="pbo-bar">
+              <div class="pbo-bar__fill" :style="{ width: fillWidth + '%' }" />
+              <div
+                v-if="showWarnTick"
+                class="pbo-bar__tick"
+                :style="{ left: warnTickPercent + '%' }"
+                :title="'预警值：' + formatMoney(warnAmount)"
+              />
+            </div>
+            <div v-if="showWarnTick" class="pbo-scale">
+              <span
+                :class="['pbo-scale__sc', warnScaleClass]"
+                :style="{ left: warnTickPercent + '%' }"
+              >预警值：{{ formatMoney(warnAmount) }}</span>
+            </div>
           </div>
         </div>
         <span class="pbo-bar-label">{{ barLabel }}</span>
@@ -290,12 +292,20 @@ export default {
   color: #d46b08;
   word-break: break-word;
 }
-.pbo-line2 {
-  display: flex;
+.pbo-metrics {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 8px 12px;
+  column-gap: 16px;
+  row-gap: 14px;
   margin-top: 12px;
+  min-width: 0;
+  max-width: 100%;
+}
+.pbo-line2 {
+  grid-column: 1;
+  grid-row: 1;
   font-size: 13.5px;
   color: #1f2329;
   min-width: 0;
@@ -307,7 +317,6 @@ export default {
   align-items: baseline;
   gap: 4px 6px;
   min-width: 0;
-  flex: 1 1 220px;
   line-height: 1.65;
   word-break: break-word;
   overflow-wrap: anywhere;
@@ -324,28 +333,28 @@ export default {
   color: #8f959e;
 }
 .pbo-chip {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+  align-self: start;
   font-size: 12px;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 12px;
   white-space: nowrap;
-  flex-shrink: 0;
+  line-height: 1.4;
 }
 .is-pass .pbo-chip { background: #dcf5cf; color: #237804; }
 .is-warn .pbo-chip { background: #ffefc2; color: #d46b08; }
 .is-deny .pbo-chip { background: #ffd9d6; color: #cf1322; }
 .pbo-chip.is-danger { background: #ffd9d6; color: #cf1322; }
 .pbo-bar-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin-top: 14px;
+  grid-column: 1;
+  grid-row: 2;
   min-width: 0;
   max-width: 100%;
 }
 .pbo-bar-col {
-  flex: 1 1 0;
   min-width: 0;
 }
 .pbo-bar {
@@ -388,11 +397,16 @@ export default {
   &.is-right { transform: translateX(-100%); margin-right: 6px; }
 }
 .pbo-bar-label {
-  flex: 0 0 auto;
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: end;
+  align-self: start;
   font-size: 12px;
   font-weight: 700;
   white-space: nowrap;
   line-height: 1.2;
+  /* 与 8px 进度条视觉居中 */
+  margin-top: -3px;
 }
 .is-pass .pbo-bar-label { color: #00b578; }
 .is-warn .pbo-bar-label { color: #ff8f1f; }
@@ -425,31 +439,34 @@ export default {
     margin-top: 4px;
   }
 
-  .pbo-line2 {
+  .pbo-metrics {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
     margin-top: 10px;
-    gap: 8px;
+    row-gap: 8px;
+    column-gap: 0;
   }
 
-  .pbo-line2__text {
-    flex: 1 1 100%;
-    font-size: 13px;
+  .pbo-line2,
+  .pbo-chip,
+  .pbo-bar-row,
+  .pbo-bar-label {
+    grid-column: 1;
+    grid-row: auto;
+    justify-self: stretch;
   }
 
   .pbo-chip {
-    flex: 0 0 auto;
+    justify-self: start;
   }
 
-  .pbo-bar-row {
-    margin-top: 12px;
-  }
-
-  .pbo-bar-col {
-    flex: 1 1 100%;
-    width: 100%;
+  .pbo-bar-label {
+    justify-self: start;
+    margin-top: 0;
   }
 
-  .pbo-bar-label {
-    flex: 1 1 auto;
+  .pbo-line2__text {
+    font-size: 13px;
   }
 
   .pbo-scale__sc {