youxi-app/pages/index/components/progress.uvue

<template>
	<view class="progress-container">
		<view class="progress-bar" v-for="i in num" :key="i" :class="{
      'progress-select':percentage>=i
    }">
			<view class="progress-fill"></view>
			<view class="progress-thumb" v-if="i!==num"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
	percentage: {
		type: Number,
		default: 2
	},
  num:{
    type:Number,
    default:4
  },
  size:{
    type:String,
    default:'15px'
  }
});
</script>

<style lang="scss" scoped>
.progress-container {
	width: 100%;
	padding: 10rpx 0;
  @apply flex flex-row;
	.progress-bar {
  	@apply flex flex-row items-center;
		.progress-fill {
     	@apply  rounded-full ;
			background-color: #E4F0FF;
      width:v-bind(size);
      height:v-bind(size);
		}
		.progress-thumb {
  	@apply  rounded-full ;
       width:v-bind(size);
      height:calc(v-bind(size) / 5);
			background-color: #E4F0FF;
		}
	}
  .progress-select{
    .progress-fill {
			background-color: #194DCF;
		}
		.progress-thumb {
			background-color: #194DCF;
		}
  }
}
</style>