android-cloud-H5/pages/claimCloudPhone/components/customProgress.vue

<template>
  <div class="progress-container">
    <div
      :class="['progress-inner', { started: total !== 0 }]"
      :data-precrnt="total + '%'"
      :style="{ width: total + '%' }"
    ></div>
    <div
      :class="['progress-round', { 'progress-round-white': +total >= 50 }]"
      style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
      data-precrnt="50%"
    ></div>
    <div
      :class="['progress-round', { 'progress-round-white': +total >= 75 }]"
      style="top: 50%; left: 75%; transform: translate(-75%, -50%)"
      data-precrnt="75%"
    ></div>
    <div
      :class="['progress-round', { 'progress-round-white': +total >= 90 }]"
      style="top: 50%; left: 90%; transform: translate(-90%, -50%)"
      data-precrnt="90%"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'customProgress',
  props: {
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  computed: {
    total: {
      get() {
        return this.value;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.progress-container {
  height: 12px;
  background: #fae8d4;
  border-radius: 6px;
  position: relative;
  z-index: 0;
  .progress-inner {
    height: 12px;
    background: linear-gradient(90deg, #fde08d 0%, #ff0000 100%);
    border-radius: 6px;
    transition: width 0.5s;
    position: relative;
    &.started::after {
      position: absolute;
      top: 50%;
      right: -13.5px;
      transform: translateY(-50%);
      display: block;
      content: attr(data-precrnt);
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: bold;
      font-size: 9px;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
      width: 35px;
      height: 16px;
      background: #ff3535;
      border-radius: 9px;
      z-index: 1;
    }
  }

  .progress-round {
    width: 8px;
    height: 8px;
    background: #ff2855;
    border-radius: 50%;
    position: absolute;
    z-index: 0;
    &.progress-round-white{
      background: #FFFFFF;
    }
    &::after {
      position: absolute;
      top: 13px;
      left: -50%;
      // transform: translateX(-50%);
      display: block;
      content: attr(data-precrnt);
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 10px;
      color: #000000;
      line-height: 12px;
      font-style: normal;
      // width: 33px;
      // height: 19px;
      // background: #ff3535;
      // border: 1px solid #fff3cf;
      // font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      // font-weight: bold;
      // font-size: 9px;
      // color: #ffffff;
      // line-height: 12px;
      // text-align: center;
      // font-style: normal;
      // border-radius: 25px;
      // line-height: 19px;
    }
    &::before {
      // position: absolute;
      // top: -14px;
      // z-index: 2;
      // left: 50%;
      // transform: translateX(-50%);
      // display: block;
      // content: '';
      // left: 50%;
      // width: 0;
      // height: 0;
      // border-left: 3px solid transparent;
      // border-right: 3px solid transparent;
      // border-top: 8px solid #ff3535;
    }
  }
}
</style>