vue中进度条

 最终实现的效果是这样的。

具体实现的代码

html

 <ul class="steps__ul">
        <li class="steps__li" :class="{'active':active >= 0}">
          <img v-if="active >= 0" src="@/assets/bx_svg/1_dui.png"/>
          <img v-else src="@/assets/bx_svg/1.png"/>
          <!--报案-->
          <p>{{$t('fome.Report')}}</p>
        </li>
        <div class="steps__right" :class="{'active':active >= 0}">
          <!--<i class="el-icon-right"></i>-->
          <img v-if="active >= 0" src="@/assets/bx_svg/jt_2.png"/>
          <img v-else src="@/assets/bx_svg/jt_1.png"/>
        </div>
        <li class="steps__li" :class="{'active':active >= 1}">
          <img v-if="active >= 1" src="@/assets/bx_svg/2_dui.png"/>
          <img v-else src="@/assets/bx_svg/2.png"/>
          <!--理赔申请-->
          <p>{{$t('Intro.Application')}}</p>
        </li>
        <div class="steps__right" :class="{'active':active >= 1}">
          <!--<i class="el-icon-right"></i>-->
          <img v-if="active >= 1" src="@/assets/bx_svg/jt_2.png"/>
          <img v-else src="@/assets/bx_svg/jt_1.png"/>
        </div>
        <li class="steps__li" :class="{'active':active >= 2}">
          <img v-if="active >= 2" src="@/assets/bx_svg/3_dui.png"/>
          <img v-else src="@/assets/bx_svg/3.png"/>
          <!--材料审核-->
          <p>{{$t('form.Material')}}</p>
        </li>
        <div class="steps__right" :class="{'active':active >= 2}">
          <!--<i class="el-icon-right"></i>-->
          <img v-if="active >= 2" src="@/assets/bx_svg/jt_2.png"/>
          <img v-else src="@/assets/bx_svg/jt_1.png"/>
        </div>
        <li class="steps__li" :class="{'active':active >= 3}">
          <img v-if="active >= 3" src="@/assets/bx_svg/4_dui.png"/>
          <img v-else src="@/assets/bx_svg/4.png" style="width: 100px;"/>
          <!--结案 closecase-->
          <p>{{$t('form.closecase')}}</p>
        </li>
        <div class="steps__right" :class="{'active':active >= 3}">
          <!--<i class="el-icon-right"></i>-->
          <img v-if="active >= 3" src="@/assets/bx_svg/jt_2.png" />
          <img v-else src="@/assets/bx_svg/jt_1.png" />
        </div>
        <li class="steps__li" :class="{'active':active >= 4}">
          <img v-if="active >= 4" src="@/assets/bx_svg/5_dui.png"/>
          <img v-else src="@/assets/bx_svg/5.png"/>
          <p>{{$t('cheack.Pay')}}</p>
        </li>
      </ul>

js

后端接口给我传的状态，我这边做了个判断
handleLook (row) {
        this.dialogVisible = true
          let str ={
            reportNo:row.reportNo
          }
          this.$api.login.getProgress(str).then(res=> {
            if (res.data.code == 200) {

              if(res.data.data === 'REPORT'){ //报案
                this.active = 0
              }else if(res.data.data === 'CLAIM'){ //申请理赔
                this.active = 1
              }else if(res.data.data === 'CHECK'){   //审核
                this.active = 2
              }else if(res.data.data === 'CLOSED'){   //审核
                this.active = 3
              }else if(res.data.data === 'PAYMENT'){   //审核
                this.active = 4
              }
            }
          })
      },

css中

 //自定义步骤条
  .steps__ul{
    display: flex;
    width: 100%;
    .active{
      color: #005A5A;
      font-weight: 900;
    }
    //文字内容
    .steps__li{
      text-align: center;
      width: 200px;
      color: #00B1B1;
      img{
        width:50px;
        height: 50px;
        margin:0 auto;
    }
      p{
        font-size: 18px;
      }
    }
    //右箭头
    .steps__right{
      padding: 53px 10px 0;
      font-size: 20px;
      font-weight: 900;
      img{
        width: 50px;
      }
    }
  }