health-front/pages_order/checkup/checkupReport/progressLine.vue

<template>
  <view class="view"
    :style="style"
  >
    <view class="bar bg">
      <view 
        v-for="(item, index) in list" 
        :key="index"
        :class="['bar-item', index % 2 == 0 ? 'is-active' : '']" 
      ></view>
    </view>
    <view class="bar fg">
      <view 
        v-for="(item, index) in fgList" 
        :key="index"
        :class="['bar-item', index % 2 == 0 ? 'is-active' : '']" 
      ></view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      progress: {
        type: Number,
        default: 0,
      },
      activeColor: {
        type: String,
        default: '#7451DE',
      },
    },
    data() {
      return {
        list: new Array(51).fill(1),
      }
    },
    computed: {
      fgList() {
        const num = Math.floor(51 * this.progress / 100)

        return this.list.slice(0, num + 1)
      },
      style() {
        return `--color: ${this.activeColor}`
      }
    },
  }
</script>

<style lang="scss" scoped>

  .view {
    position: relative;
    width: 100%;
    height: 28rpx;
  }

  .bar {
    width: 100%;
    height: 28rpx;
    display: grid;
    grid-template-columns: repeat(51, 1fr);

    &-item {
    }

    &.bg {
      .is-active {
        background: #989898;
      }
    }

    &.fg {
      position: absolute;
      top: 0;
      left: 0;

      .is-active {
        background: #7451DE;
        background: var(--color);
      }
    }
  }
</style>