health-front/components/home/indicator.vue

<template>
  <view class="indicator flex">
    <view 
      v-for="(item, index) in list" 
      :key="index"
      :class="['indicator-dot', index === current ? 'is-active' : '']"
      @click="$emit('click', index)"
    ></view>
  </view>  
</template>

<script>
  export default {
    props: {
      current: {
        type: Number,
        default: 0,
      },
      length: {
        type: Number,
        default: 0,
      },
    },
    computed: {
      list() {
        return new Array(this.length).fill(0)
      }
    },
  }
</script>

<style scoped lang="scss">
.indicator {
  &-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background: #D9D9D9;

    & + & {
      margin-left: 12rpx;
    }

    &.is-active {
      width: 56rpx;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
    }
  }
}
</style>