iview使用进度条写排行榜

这里使用了一个循环，直接粘贴用

        <div flex="~" class="rightTopBox" justify="between">
          <div style="height: 420px; margin-top: 20px; width: 358px">
            <div
              v-for="item in topList"
              :key="item.top"
              flex="~"
              style="margin-bottom: 19px"
            >
              <div
                class="topBox"
                :class="
                  item.top === 1 ? 'back1' : item.top === 2 ? 'back2' : 'back3'
                "
              >
                Top{{ item.top }}
              </div>
              <div style="width: 290px; height: 23.55px; margin-left: 6px">
                <div flex="~" justify="between">
                  <div class="text">
                    {{ item.name }}
                  </div>
                  <div class="pro">
                    {{ item.per }} <span v-if="item.per">%</span>
                  </div>
                </div>
                <div>
                  <Progress
                    :percent="Number(item.per)"
                    :stroke-width="4"
                    :hide-info="true"
                    style="margin-top: -6px"
                    :stroke-color="item.strokeColor"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>、
\\\\\\\\\\\\\\\\\\\\\\\\\\
      topList: [
        {
          top: 1,
          name: "停电",
          per: "0",
          strokeColor: ["rgba(226, 74, 59, 0)", "#e24a3b"],
        },
        {
          top: 2,
          name: "服务",
          per: "0",
          strokeColor: ["rgba(201, 178, 0, 0)", "#c9b217 "],
        },
        {
          top: 3,
          name: "抢修质量",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
        {
          top: 4,
          name: "电压质量",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
        {
          top: 5,
          name: "抄表催费",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
        {
          top: 6,
          name: "检修安排",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
        {
          top: 7,
          name: "电能计量",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
        {
          top: 8,
          name: "业扩报装",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
        {
          top: 9,
          name: "电动汽车服务",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
        {
          top: 10,
          name: "客户基本信息",
          per: "0",
          strokeColor: ["rgba(56, 119, 242, 0) ", "#3877f2"],
        },
      ],

\\\\\\\\\\\\\\\\\
  .rightTopBox {
    // margin-top: 30px;
    .topBox {
      width: 60px;
      height: 20px;
      border-radius: 10px;
      font-family: DIN Alternate;
      font-weight: 700;
      color: #e3e9f3;
      font-size: 12px;
      line-height: 19.21px;
      padding-left: 8px;
    }
    .back1 {
      width: 60px;
      height: 20px;
      background: linear-gradient(90deg, #e24a3b 0%, rgba(226, 74, 59, 0) 100%);
    }
    .back2 {
      width: 60px;
      height: 20px;
      background: linear-gradient(
        90deg,
        #c9b217 0%,
        rgba(201, 178, 23, 0) 100%
      );
    }
    .back3 {
      width: 60px;
      height: 20px;
      background: linear-gradient(
        90deg,
        #3877f2 0%,
        rgba(56, 119, 242, 0) 100%
      );
    }
    .text {
      width: 100px;
      height: 17px;
      font-family: Yu Gothic UI-Regular;
      color: #e3e9f3;
      font-size: 12px;
      line-height: 18.62px;
      margin-top: -3px;
    }
    .pro {
      height: 19px;
      font-family: DIN Alternate;
      font-weight: 700;
      color: #eaeef5;
      font-size: 16px;
      line-height: 24.7px;
      text-align: right;
      margin-top: -6px;
    }
  }


/deep/ .ivu-progress {
  display: block;
  width: 100%;
  font-size: 12px;
  position: relative;
}
/deep/ .ivu-progress-bg {
  text-align: right;
  border-radius: 0px;
  background: linear-gradient(270deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
  transition: all 0.2s linear;
  position: relative;
}
/deep/ .ivu-progress-inner {
  display: inline-block;
  width: 100%;
  border-radius: 0px;
  background-color: #40415a;
  border-radius: 100px;
  vertical-align: middle;
  position: relative;
}