需求:需要在进度条末尾放上ui图,效果如下
主要代码:这里使用的vue3和elementplus实现的
<template>
<div class="abnormal">
<div class="tongji" v-for="(item, index) in eventList" :key="item.id">
<img class="img" src="@/assets/img/settle.png" alt="" />
<span>{{ item.name }}</span>
<div class="step">
<el-progress
:class="index % 2 === 0 ? 'step1' : 'step2'"
:percentage="(item.num / 45) * 100"
:format="format"
:text-inside="true"
status="exception"
/>
<div :class="index % 2 === 0 ? 'num1' : 'num2'">
{{ item.num }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const eventList = ref<any>([
{ id: "1", name: "垃圾识别", num: 45 },
{ id: "2", name: "违规建筑", num: 40 },
{ id: "3", name: "河边漂浮物", num: 35 },
{ id: "4", name: "店外经营", num: 30 },
{ id: "5", name: "违建检测", num: 25 },
{ id: "6", name: "其他", num: 20 }
]);
const format = () => "";
</script>
<style scoped lang="scss">
.abnormal {
width: 400px;
height: 350px;
border: 1px #036ec3 solid;
padding: 5px 5px 0 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tongji {
width: 100%;
height: 100%;
.img {
width: 20px;
height: 20px;
}
.step {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
.step1 ::v-deep .el-progress-bar__inner {
width: 100%;
background: linear-gradient(
244deg,
#12dbfb 50%,
transparent 100%
);
}
.step2 ::v-deep .el-progress-bar__inner {
width: 100%;
background: linear-gradient(
244deg,
#138afe 50%,
transparent 100%
);
}
.num1 {
border-bottom: 4px #12dbfb solid;
}
.num2 {
border-bottom: 4px #138afe solid;
}
}
}
}
@keyframes progress {
from {
width: 0;
}
to {
}
}
::v-deep .el-progress {
width: 90%;
height: 8px;
margin-top: 10px;
.el-progress-bar__inner {
width: 85%;
position: absolute;
height: 5px !important;
animation: progress 1s ease;
background: linear-gradient( 244deg, #12dbfb 50%, transparent 100% );
}
.el-progress-bar__innerText {
display: block;
width: 20px;
height: 35px !important;
float: right;
background-image: url("@/assets/img/settle.png");
background-size: 100% 100%;
margin: -14px -10px;
}
.el-progress-bar__outer {
height: 40px !important;
position: unset !important;
background-color: transparent;
}
}
</style>