elementplus使用el-progress进度条实现末尾自定义图片

需求：需要在进度条末尾放上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>