This commit is contained in:
duanxiaohai 2024-07-25 13:06:14 +08:00
parent b0dce9c0b7
commit 23fad724f9
1 changed files with 21 additions and 8 deletions

View File

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