实现u-line-progress基础上添加移动的角标

代码如下：

<template>
	<view>
			<view class="help-progress">
				<view class="help-progress-left">￥699.99</view>
				<view class="price-progress-container">
					<u-line-progress class="price-progress" :percentage="targetPercentage" :height="35"
						active-color="#FF532B" inactive-color="#FCE7E0" :showText="false" />
					<view class="price-progress-badge" :style="{ left: `calc(${progressPercentage}%)` }"><text>{{
						progressPercentage }}%</text></view>
				</view>
				<view class="help-progress-right">￥69.99</view>
			</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			targetPercentage: 99, // 目标进度百分比
			currentPercentage: 0, // 当前显示的进度百分比，用于动画效果
			progressPercentage: 0 // 保持原有变量名，用于兼容
		}
	},
	mounted() {
		// 页面加载后，从0开始缓慢移动到目标进度
		setTimeout(() => {
			this.animateProgress();
		}, 10);
	},
	methods: {
		animateProgress() {
			const duration = 1000;
			const startTime = Date.now();
			const startValue = 0;
			const endValue = this.targetPercentage;

			const animate = () => {
				const currentTime = Date.now();
				const elapsed = currentTime - startTime;
				const progress = Math.min(elapsed / duration, 1);

				// 使用缓动函数使动画更自然
				const easeOutQuad = t => t * (2 - t);
				const currentValue = startValue + (endValue - startValue) * easeOutQuad(progress);

				const roundedValue = Math.round(currentValue);
				this.currentPercentage = roundedValue;
				this.progressPercentage = roundedValue; // 保持同步

				if (progress < 1) {
					requestAnimationFrame(animate);
				}
			};

			animate();
		}
	}
}
</script>

<style lang="scss">
.help-box {
	width: 694rpx;
	height: 491rpx;
	background: #fff;
	border-radius: 35rpx;
	top: 449.31rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	position: absolute;
	z-index: 5;
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;

	.help-badge {
		width: 350rpx;
		height: 54.17rpx;
		display: block;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url("/static/remote/kanyidao/detail-help-badge.webp");

		// 文字
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 54.17rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.help-countdown {
		top: 88.89rpx;
		height: 49rpx;
		position: absolute;
		// 文字
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #FF532C;
		line-height: 49rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;

		.help-countdown-time {
			height: 49rpx;
			width: 49rpx;
			border-radius: 10rpx;
			background-color: #FF532C;
			color: #fff;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 29rpx;
			line-height: 49rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			display: inline-block;
			margin: 0 10rpx;
		}
	}

	.help-progress {
		width: 100%;
		height: 35rpx;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 180rpx;


		.help-progress-left {
			left: 20.14rpx;
			position: absolute;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 21rpx;
			color: #212121;
			line-height: 35rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
			height: 35rpx;
			white-space: nowrap;
		}

		.price-progress-container {
			width: 472.22rpx;
			height: 35rpx;
			left: 111.11rpx;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			white-space: nowrap;

		}

		.price-progress {
			width: 472.22rpx;
			height: 35rpx;
			display: flex;
			align-items: center;

			/* 覆盖u-line-progress组件默认的0.5s动画时间，改为1s */
			/deep/ .u-line-progress__line {
				transition: width 1s ease;
			}
		}

		.price-progress-badge {
			width: 70rpx;
			height: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-size: cover;
			background-repeat: no-repeat;
			background-image: url("/static/remote/kanyidao/detail-help-percent-badge.webp");
			position: absolute;
			top: 35rpx;
			transform: translateX(-50%);

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #FFFFFF;
				padding-top: 5rpx;
				line-height: 30rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.help-progress-right {
			left: 589.58rpx;
			position: absolute;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 21rpx;
			color: #212121;
			line-height: 35rpx;
			text-align: right;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
			height: 35rpx;
		}

	}


}
</style>