1

components/hr-progress/hr-progress.uvue

@@ -0,0 +1,56 @@
+<template>
+	<view :class="barClass" :style="trackStyle">
+		<view class="hr-pbar-i" :style="barStyle"></view>
+	</view>
+</template>
+
+<script lang="uts" setup>
+	import { computed } from 'vue'
+
+	/**
+	 * 进度条
+	 * 高度用 rpx 下发，保证随屏宽等比缩放。
+	 */
+	const props = defineProps({
+		/** 百分比 0 ~ 100 */
+		percent : { type: Number, default: 0 },
+		/** 高度（设计稿 px，内部 ×2 转 rpx） */
+		h : { type: Number, default: 4 },
+		/** 进度色 */
+		color : { type: String, default: '#2563EB' },
+		/** 深色底（用于蓝色 hero / 视频条上） */
+		onDark : { type: Boolean, default: false }
+	})
+
+	const pct = computed(() : number => {
+		if (props.percent < 0) { return 0 }
+		if (props.percent > 100) { return 100 }
+		return props.percent
+	})
+
+	const barClass = computed(() : string => {
+		return props.onDark ? 'hr-pbar hr-pbar-dark' : 'hr-pbar'
+	})
+
+	const barColor = computed(() : string => {
+		return props.onDark ? '#FFFFFF' : props.color
+	})
+
+	const rpxH = computed(() : number => {
+		return props.h * 2
+	})
+
+	const trackStyle = computed(() : string => {
+		return `height:${rpxH.value}rpx;border-radius:${rpxH.value / 2}rpx;`
+	})
+
+	const barStyle = computed(() : string => {
+		return `width:${pct.value}%;height:${rpxH.value}rpx;border-radius:${rpxH.value / 2}rpx;background-color:${barColor.value};`
+	})
+</script>
+
+<style>
+	.hr-pbar-dark {
+		background-color: rgba(255, 255, 255, 0.22);
+	}
+</style>