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"
      style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
      data-precrnt="50%"
    ></div>
    <div
      class="progress-round"
      style="top: 50%; left: 75%; transform: translate(-75%, -50%)"
      data-precrnt="75%"
    ></div>
    <div
      class="progress-round"
      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;
    z-index: 1;
    &.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;
    }
  }

  .progress-round {
    width: 8px;
    height: 8px;
    background: #ff2855;
    border-radius: 50%;
    position: absolute;
    z-index: 0;
    &::after {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      content: attr(data-precrnt);
      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>