渐变%进度条（基数500）

1、HTML代码

 <template slot-scope="scope">
                <div class="bgLine">
                  <div
                    :class="'leaveBgg' + scope.row.leave" //渐变色等级
                    :style="{
                      width: scope.row.param / 5 + '%',  //渐变色长度--以500为基数
                      height: '100%',
                      borderRadius: '10px',
                    }"
                  ></div>
                </div>
 </template>

2、css样式

.leaveBgg0 {
    background-color: #0ebfc5;
  }
  .leaveBgg1 {
    background-color: #00e400;
  }
  .leaveBgg2 {
    background: linear-gradient(to right, #00e400, #ffda30);
  }
  .leaveBgg3 {
    background-color: #ff7e00;
    background: linear-gradient(to right, #00e400, #ffda30, #ff7e00);
  }
  .leaveBgg4 {
    background: linear-gradient(to right, #00e400, #ffda30, #ff7e00, #ff0000);
  }
  .leaveBgg5 {
    background: linear-gradient(to right, #00e400, #ffda30, #ff7e00, #ff0000, #99004c);
  }
  .leaveBgg6,{
    background-color: #7e0023;
    background: linear-gradient(
      to right,
      #00e400,
      #ffda30,
      #ff7e00,
      #ff0000,
      #99004c,
      #7e0023
    );
  }

背景条样式

.bgLine {
    width: 100%;
    height: 10px;
    background: #03425d;
    border-radius: 5px;
    overflow: hidden;
  }

3、效果图