gx

src/view/sy_table.vue

@@ -111,7 +111,12 @@
               </div>
               <div class="tableBoxTopa">{{ item.text }}</div>
               <div class="progress-container">
-                <div class="progress-bar" :style="{ width: item.progress + '%' }"></div>
+                <div
+                  class="progress-bar"
+                  :style="{ width: item.progress + '%' }"
+                >
+                  <span>{{ item.progress }}%</span>
+                </div>
               </div>
             </div>
           </div>
@@ -151,7 +156,6 @@ const goto = (url) => {
 };
 
 const data = reactive({
-  
   taps: "0",
   taps1: "0",
   tabPosition: [
@@ -277,35 +281,35 @@ const data = reactive({
       name: "最低生活保障",
       Bj: Bj,
       text: "我县在册低保对象7374户9463人，为低保对象发放最低生活保障金，2023年共支出低保金9912.65万元。",
-      progress: 95 ,//进度条
+      progress: 95, //进度条
     },
     {
       id: "1",
       name: "重特困人员救助供养",
       Bj: Bj1,
       text: "我县特困供养对象329户331人，2023年支出特困供养经费722.29万元。",
-      progress: 35 ,//进度条
+      progress: 35, //进度条
     },
     {
       id: "2",
       name: "医疗救助",
       Bj: Bj2,
       text: "我县医疗救助的对象为民攻部门认定的特困供养人员最低生活保障家庭成员、最低生活保障边缘家庭成员（包括纳入低保、低边的因病致贫等支出型贫困对象）。",
-      progress: 45 ,//进度条
+      progress: 45, //进度条
     },
     {
       id: "3",
       name: "临时救助",
       Bj: Bj3,
       text: "为数助对象发放临时救助金，2023年共救助609户1036人，数助225.39万元。",
-      progress: 100 ,//进度条
+      progress: 100, //进度条
     },
     {
       id: "4",
       name: "受灾人员救助",
       Bj: Bj4,
       text: "机构改革以来(2019年)，我县自然灾害形势总体平稳，未发生因灾亡人事故。",
-      progress: 25 ,//进度条
+      progress: 25, //进度条
     },
   ],
 });
@@ -483,7 +487,7 @@ const rowState = (row) => {
               height: 10px;
               background-color: rgba(255, 255, 255, 0.2);
               border-radius: 5px;
-              overflow: hidden;
+              // overflow: hidden;
             }
 
             .progress-bar {
@@ -491,6 +495,15 @@ const rowState = (row) => {
               background: linear-gradient(90deg, #31ffd8 0%, #00e5ff 100%);
               border-radius: 0px 100px 100px 0px;
               transition: width 0.3s ease;
+              position: relative;
+            }
+            .progress-bar span {
+              position: absolute;
+              right: -10px;
+              top: -30%;
+              transform: translateY(-50%);
+              color: #fff;
+              font-size: 18px;
             }
           }
           img {