css实现自定义静态进度条-vue2

                                                                    实现如图所示

html：

 <div class="progress-container">
            <div class="progress-box left" :style="leftStyle">
              <div class="progress-value-top left">总中标电量</div>
              <div class="progress-value left">
                {{ responseAllData.totalBidPower }} MWh
              </div>
            </div>
            <div class="progress-box right" :style="rightStyle">
              <div class="progress-value-top right">有效调节电量</div>
              <div class="progress-value right">
                {{ responseAllData.vaildRespQty }} MWh
              </div>
            </div>
          </div>

          <div class="progress-container">
            <div class="progress-box" :style="leftStyleTwo">
              <div class="progress-value" style="color: #9daec3">
                平均达标率
              </div>
            </div>
            <div class="progress-box right" :style="rightStyleTwo">
              <div class="progress-value right">
                {{ responseAllData.avgReachRate }} %
              </div>
            </div>
          </div>

css：

.progress-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 16px;
  position: relative; /* 为了绝对定位内部元素 */
  margin-top: 50px;
  margin-bottom: 20px;
}

.progress-box {
  position: relative;
  height: 100%;
}
.progress-box.left {
  position: relative;
  height: 100%;
  margin-right: 5px;
}

.progress-value-top {
  position: absolute;
  top: -50px;
  font-weight: bold;
  color: #9daec3;
}

.progress-value-top.left {
  left: 0;
}

.progress-value-top.right {
  right: 0;
}

.progress-value {
  position: absolute;
  top: -25px;
  font-weight: bold;
}

.progress-value.left {
  left: 0;
  font-size: 14px;
  color: #1c77ea;
}

.progress-value.right {
  right: 0;
  font-size: 14px;
  color: #04c886;
}

vue2：

computed: {
    leftStyle() {
      return {
        width: `${this.responseAllData.totalBidPower}%`,
        backgroundImage: "linear-gradient(270deg, #159AFF 5%, #159aff66 100%)",
      };
    },
    rightStyle() {
      return {
        width: `${this.responseAllData.vaildRespQty}%`,
        backgroundImage: "linear-gradient(270deg, #04c88666 0%, #04C886 100%)",
      };
    },

    leftStyleTwo() {
      return {
        width: `${this.responseAllData.avgReachRate}%`,
        backgroundImage: "linear-gradient(270deg, #159AFF 5%, #159aff66 100%)",
      };
    },
    rightStyleTwo() {
      return {
        width: `${150 - this.responseAllData.avgReachRate}%`,
        backgroundImage:
          "linear-gradient(270deg, #ffffff80 0%, #00000000 100%)",
      };
    },
  },