youxi-app/pages/catalog/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>

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>