积分页面处理

views/Integral.vue

@@ -80,11 +80,23 @@
 					
 					<!-- 进度条 -->
 					<view class="progress-bar-container">
-						<view class="progress-bar-bg"></view>
-						<view 
-							class="progress-bar-fill"
-							:style="{ width: '60%' }"
-						></view>
+						<!-- 进度条背景图片 -->
+						<image 
+							:src="`/static/integral/${tupianBanben}/barBgVip${index}.png`"
+							class="progress-bar-bg"
+							mode="aspectFit"
+							@error="onProgressBarError"
+						/>
+						<!-- 进度条填充图片 -->
+						<view class="progress-bar-mask">
+							<image
+								:src="`/static/integral/${tupianBanben}/barVip${index}.png`"
+								class="progress-bar-fill"
+								mode="aspectFit"
+								:style="{ transform: `translateX(${(6000/10000)*100 -100}%)` }"
+								@error="onProgressBarError"
+							/>
+						</view>
 					</view>
 				</view>
 				<!-- <view class="vip-info">
@@ -438,6 +450,11 @@
 	import RegisterLayer from "../components/RegisterLayer.vue";
 	import md from '../md';
 
+	// 进度条图片加载错误处理
+	const onProgressBarError = (e) => {
+		console.error('进度条图片加载失败:', e)
+		// 可以设置默认样式或显示错误提示
+	}
 
 	const integralData = ref({
 	"tupianBanben": "1013",
@@ -1962,7 +1979,7 @@
 				// 积分进度条样式
 				.jifen-progressbar {
 					position: absolute;
-					top: 209rpx;
+					top: 207rpx;
 					width: 320rpx;
 					left: 40rpx;
 					
@@ -2002,9 +2019,7 @@
 					.progress-bar-container {
 						position: relative;
 						width: 100%;
-						height: 12rpx;
-						background: #f5f3f0;
-						border-radius: 6rpx;
+						height: 7rpx;
 						overflow: hidden;
 						margin-top: 10rpx;
 						
@@ -2014,19 +2029,26 @@
 							left: 0;
 							width: 100%;
 							height: 100%;
-							background: #f5f3f0;
-							border-radius: 6rpx;
+							z-index: 1;
+						}
+						
+						.progress-bar-mask {
+							position: absolute;
+							top: 0;
+							left: 0;
+							width: 100%;
+							height: 100%;
+							overflow: hidden;
+							z-index: 2;
 						}
 						
 						.progress-bar-fill {
 							position: absolute;
 							top: 0;
 							left: 0;
+							width: 100%;
 							height: 100%;
-							background: #8b4513;
-							border-radius: 6rpx;
-							transition: width 0.3s ease;
-							box-shadow: 0 1rpx 3rpx rgba(139, 69, 19, 0.3);
+							transition: transform 0.3s ease;
 						}
 					}
 				}