health-front/pages_order/components/progressBar.vue

<template>
  <view class="progress__view">
    <view class="bar" :style="{ width: `${progress * 100 / total}%` }"></view>
  </view>
</template>

<script>
  export default {
    props: {
      progress: {
        type: Number,
        default: 0
      },
      total: {
        type: Number,
        default: 0
      },
    },
  }
</script>

<style scoped lang="scss">
.progress__view {
  font-size: 0;
  width: 100%;
  height: 28rpx;
  background: #E1E0E6;
  border-radius: 14rpx;

  .bar {
    display: inline-block;
    height: 100%;
    background-image: linear-gradient(to right, #7451DE, #B1A4FF);
    border-top-left-radius: 14rpx;
    border-bottom-left-radius: 14rpx;
    box-shadow: 2rpx 2rpx 6rpx 0 #4000FF40;
  }
}
</style>