vue+css实现进度条

样式：

组件代码

<template>
  <div class="hair-salon-bar-container" >
      <div class="pro-title">
          <span :class="index > 4? 'color-4' : 'color-' + index">NO.{{index}}</span><span>{{info.name}}</span>
          <span style="margin-left: 30px">案件数：</span> <span class="case">{{info.size}}</span>
      </div>
      <div class="process">
        <div class="process-left">
            <div style="width:100%" :class="['bottomBar', index > 4 ? 'bottomBar-4' : 'bottomBar-' + index]">
          <div :style="{width: `${rateWidth}%`, height: `12px`}" :class="['bar', index > 4 ? 'bar-4' : 'bar-' + index]"></div>
      </div>
        </div>
        <div :class="['process-right', index > 4? 'color-4' : 'color-' + index]">
            {{info.riskValue}}%
        </div>
      </div>
      
  </div>
</template>

<script>
export default {
  name: "processItem",
  props: {
    info: {
      type: Object,
      default: ()=>{}
    },
    index: {
        type: Number,
        default: 1
    },
  },
  computed: {
    rateWidth() {
      if (this.info.riskValue >= 100) {
        return 100
      } else {
        return this.info.riskValue
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
    .pro-title{
        margin-bottom: 5px;
        font-family: SourceHanSansCN-Regular;
        font-size: 14px;
        color: #fff;
        letter-spacing: 2px;
    }
    .pro-rate{
        float: right
    }
    .bar {
        width: 100%;
        position: relative;
        margin: auto;
        overflow: hidden;
        float: left;
        background: transparent;
        overflow: hidden;
        &-1{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(255, 127, 14, 1), rgba(255, 127, 14, 1) 5px, transparent 5px, transparent 10px, rgba(255, 127, 14, 1) 10px) no-repeat 0 0;
            }
        }
        &-2{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(62, 255, 187, 1), rgba(62, 255, 187, 1) 5px, transparent 5px, transparent 10px, rgba(62, 255, 187, 1) 10px) no-repeat 0 0;
            }
        }
        &-3{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(0, 252, 255, 1), rgba(0, 252, 255, 1) 5px, transparent 5px, transparent 10px, rgba(0, 252, 255, 1) 10px) no-repeat 0 0;
            }
        }
        &-4{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(25, 177, 251, 1), rgba(25, 177, 251, 1) 5px, transparent 5px, transparent 10px, rgba(25, 177, 251, 1) 10px) no-repeat 0 0;
            }
        }
    }
    .bottomBar{
        width: 100%;
        height: 12px;
        position: relative;
        margin: auto;
        overflow: hidden;
        &-1{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(255, 127, 14, 0.1), rgba(255, 127, 14, 0.1) 5px, transparent 5px, transparent 10px, rgba(255, 127, 14, 0.1) 10px) no-repeat 0 0;
            }
        }
        &-2{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(62, 255, 187, 0.1), rgba(62, 255, 187, 0.1) 5px, transparent 5px, transparent 10px, rgba(62, 255, 187, 0.1) 10px) no-repeat 0 0;
            }
        }
        &-3{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(0, 252, 255, 0.1), rgba(0, 252, 255, 0.1) 5px, transparent 5px, transparent 10px, rgba(0, 252, 255, 0.1) 10px) no-repeat 0 0;
            }
        }
        &-4{
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 12px;
                background: repeating-linear-gradient(90deg, rgba(25, 177, 251, 0.1), rgba(25, 177, 251, 0.1) 5px, transparent 5px, transparent 10px, rgba(25, 177, 251, 0.1) 10px) no-repeat 0 0;
            }
        }
    }
    .process{
        width: 100%;
        height: 24px;
        border: 1px solid #fff;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left{
            width: calc(100% - 40px);
        }
        &-right{
            width: 40px;
            text-align: right;
        }
    }
    .color{
        font-family: SourceHanSansCN-Medium;
	    font-size: 14px;
        margin-right: 5px;
        &-1{
            color: #ff7f0e;
        }
        &-2{
            color: #3effbb;
        }
        &-3{
            color: #00fcff;
        }
        &-4{
            color: #19b1fb;
        }
    }
    .case{
        font-family: SourceHanSansCN-Bold;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 0px;
        color: #00fcff;
    }
</style>

使用

<ul class="scrollTable-warp-item">
        <li v-for="(item, i) in dataList" :key="'item' + i" class="process-content-item">
        <process :index="i+1" :info="item"></process>
      </li>
    </ul>