进度条

html

     <div class="schedule">
        <div :style="{ width: num + '%' }"></div>
        <img :src="img.schedule" />
      </div>

js

// 加工数据
    getParam() {
      //把总数量分成100份，已经使用的数量  / 一份占的比重  得到进度条的比例宽度
      this.num = 已经使用的数量 / (总数量 / 100);
    },

css

.schedule {
      margin-top: 1rem;
      width: 29.1rem;
      height: 2.3rem;
      position: relative;
      overflow: hidden; //重点
      border-radius: 11rem; //重点
      img {
        width: 29.1rem;
        height: 2.3rem;
      }
      div {
        position: absolute;
        height: 2.3rem;
        background: linear-gradient(90deg, #fff4c6 0%, #ffb424 100%);
      }
    }