massage-front/pages_order/components/progress.vue

<template>
  <view class="progress__view">
    <view class="mark" :style="{ marginLeft: `${percentage}%` }">{{ current }}</view>
    <view class="progress">
      <view class="progress-active" :style="{ width: `${percentage}%` }">
        <view class="progress-active-dot"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 0,
    },
    total: {
      type: Number,
      default: 100,
    }
  },
  computed: {
    percentage() {
      return Math.floor(this.current / this.total * 100)
    }
  }
}
</script>

<style lang="scss" scoped>
$progress-height: 14rpx;

.progress__view {
  width: 100%;
  font-size: 0;
}

.mark {
  background-color: $uni-color-light;
  color: $uni-text-color-inverse;
  font-size: 18rpx;
  padding: 0 10rpx;
  display: inline-block;
  border-radius: 5rpx;

  transform: translateX(calc(-50% - #{$progress-height} / 2 ));
  position: relative;
  margin-bottom: 8rpx;

  &:after {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 4rpx solid transparent;
    border-top-color: $uni-color-light;
  }
}

.progress {
  width: 100%;
  height: $progress-height;
  border-radius: 7rpx;

  background-color: #CEE2AA;

  &-active {
    background-color: $uni-color-light;
    height: 100%;
    border-radius: 7rpx;

    position: relative;

    &-dot {
      position: absolute;
      top: 0;
      right: 0;
      width: $progress-height;
      height: $progress-height;
      background-color: $uni-fg-color;
      border-radius: 50%;
    }
  }
}
</style>