vue css 颜色背景进度条

 

js赋值

          item.quoteScoreBackground = `linear-gradient(
                    to right,
                    #71d39d,
                    #71d39d ${percent}%,
                    #fff ${percent}%,
                    #fff ${percent}%
                  )`;

行内使用

              <div
                class="col-input col2"
                :style="{ 'background': item.quoteScoreBackground }"
              >
                {{ item.quoteScore }}
              </div>

 15%分界左右区分

    getDeviationRateBackground() {
      // 获取偏差量列表
      let arr = [];
      this.calculateList.forEach((item) => {
        if (item.quotedPrice) {
          arr.push(Math.abs(item.deviationRate));
        }
      });
      if (arr.length > 0) {
        let max = Math.max(...arr);
        this.calculateList.forEach((item) => {
          let length = ((item.deviationRate / max)/2)*100;
          if (item.deviationRate < 0) {
            length = 50 - Math.abs(length)
            item.deviationRateBackground = `linear-gradient(
              to right,
              #fff,
              #fff ${length}%,
              #CC3399 ${length}%,
              #CC3399 50%,
              #fff 50%,
              #fff 50%
            )`;
          } else {
            length = length + 50
            console.log('lenght3',length)
            item.deviationRateBackground = `linear-gradient(
              to right,
              #fff,
              #fff 50%,
              #FF5050 50%,
              #FF5050 ${length}%,
              #fff ${length}%,
              #fff ${length}%
            )`;
          }
        });
      }
    },