qxj hai 1 semana
pai
achega
4abd2e07f1
Modificáronse 4 ficheiros con 319 adicións e 92 borrados
  1. 83 0
      m3u8_fix_summary.md
  2. 29 2
      manifest.json
  3. 7 1
      pages.json
  4. 200 89
      pages_course/living.vue

+ 83 - 0
m3u8_fix_summary.md

@@ -0,0 +1,83 @@
+# m3u8视频黑屏问题修复总结
+
+## 问题描述
+在iPhone或macOS小程序模拟器中播放m3u8格式的视频会出现黑屏现象,特别是在`liveType === 2`的录播模式下。
+
+## 修复方案
+
+### 1. 优化video组件属性配置
+- **启用缓存**: 将`custom-cache`和`http-cache`设置为`true`,改善m3u8流的缓存处理
+- **添加poster属性**: 设置`poster="liveItem.coverUrl || ''"`,为iOS设备提供视频封面
+- **预加载设置**: 添加`preload="auto"`,确保视频资源提前加载
+- **iOS兼容性**: 添加`playsinline="true"`和`webkit-playsinline="true"`,支持iOS内联播放
+- **X5内核优化**: 添加x5相关属性,优化在微信环境下的播放体验
+
+### 2. 播放逻辑优化
+- **平台检测**: 添加iOS设备检测逻辑
+- **延迟播放**: iOS设备延迟500ms播放,给video元素更多初始化时间
+- **错误重试**: 针对iOS+m3u8组合增加重试次数(5次)和延迟时间(3秒)
+
+### 3. 错误处理增强
+- **格式检测**: 识别m3u8格式并提供针对性处理
+- **重新初始化**: iOS设备播放失败时,先停止再重新播放
+- **用户提示**: 提供更明确的错误信息
+
+### 4. 用户体验改善
+- **加载状态**: 添加视频加载动画和状态提示
+- **平台提示**: 根据设备类型显示不同的加载文本
+- **视觉反馈**: 添加旋转动画和半透明遮罩
+
+## 修改的文件
+- `pages_course/living.vue`: 主要修改文件
+
+## 关键修改点
+
+### video组件配置
+```vue
+<video v-if="liveItem.videoUrl&&liveItem.liveType==2" 
+       :id="`myVideo_${liveId}`" 
+       :autoplay="true"
+       class="item" 
+       :src="liveItem.videoUrl" 
+       :controls="false" 
+       object-fit="contain"
+       :custom-cache="true" 
+       :http-cache="true" 
+       :poster="liveItem.coverUrl || ''"
+       preload="auto" 
+       :playsinline="true" 
+       :webkit-playsinline="true"
+       x5-video-player-type="h5" 
+       x5-video-player-fullscreen="true"
+       x5-video-orientation="portraint"
+       @loadstart="onVideoLoadStart" 
+       @canplay="onVideoCanPlay"
+       @error="videoError">
+</video>
+```
+
+### iOS延迟播放逻辑
+```javascript
+const systemInfo = uni.getSystemInfoSync();
+const isIOS = systemInfo.platform === 'ios' || systemInfo.system.toLowerCase().includes('ios');
+
+if (isIOS) {
+    setTimeout(() => {
+        videoContext.play();
+        console.log('iOS设备延迟播放m3u8视频');
+    }, 500);
+} else {
+    videoContext.play();
+}
+```
+
+## 测试建议
+1. 在iPhone真机上测试m3u8视频播放
+2. 在macOS小程序模拟器中测试
+3. 验证加载状态提示是否正常显示
+4. 测试错误重试机制是否有效
+
+## 注意事项
+- 确保m3u8视频源的CORS配置正确
+- 检查视频服务器的HTTPS配置
+- 验证视频格式和编码兼容性

+ 29 - 2
manifest.json

@@ -17,7 +17,10 @@
             "delay" : 0
         },
         /* 模块配置 */
-        "modules" : {},
+        "modules" : {
+            "VideoPlayer" : {},
+            "LivePusher" : {}
+        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */
@@ -41,7 +44,22 @@
                 ]
             },
             /* ios打包配置 */
-            "ios" : {},
+            "ios" : {
+                "capabilities" : {
+                    "entitlements" : {
+                        "com.apple.developer.networking.HotspotConfiguration" : true
+                    }
+                },
+                "urlschemewhitelist" : [
+                    "mqq",
+                    "mqqapi",
+                    "mqqwpa",
+                    "mqqbrowser",
+                    "mttbrowser",
+                    "weixin",
+                    "wechat"
+                ]
+            },
             /* SDK配置 */
             "sdkConfigs" : {}
         }
@@ -89,6 +107,15 @@
             "treeShaking" : {
                 "enable" : true
             }
+        },
+        "router" : {
+            "mode" : "hash"
+        },
+        "async" : {
+            "loading" : "AsyncLoading",
+            "error" : "AsyncError",
+            "delay" : 200,
+            "timeout" : 60000
         }
     }
 }

+ 7 - 1
pages.json

@@ -1030,7 +1030,13 @@
 						"navigationStyle": "custom",
 						"softinputMode": "adjustResize", // 必须配置这个才能正常获取高度
 						"app-plus": {
-							"bounce": "none"
+							"bounce": "none",
+							"videoFullscreen": true,
+							"videoAutoFullscreen": false,
+							"videoObjectFit": "contain"
+						},
+						"h5": {
+							"videoFullscreen": true
 						}
 					}
 				}

+ 200 - 89
pages_course/living.vue

@@ -33,7 +33,7 @@
 						<view>{{liveViewData && liveViewData.like||0}}</view>
 					</view>
 					<view class="side-item">
-						<button open-type="share" class="button">
+						<button open-type="share" class="button button-reset">
 							<image class="image" src="/static/images/weixin.png" mode="widthFix" />
 						</button>
 						<view>分享</view>
@@ -84,6 +84,11 @@
 						</view>
 					</view>
 				</view>
+				<view class="videolist" v-if="liveItem.status==3">
+					<view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
+						<view class="end">直播已结束</view>
+					</view>
+				</view>
 				<view class="videolist" v-if="liveItem.status==4">
 					<view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
 						<!-- 直播回放 -->
@@ -173,7 +178,7 @@
 							<input :placeholder="placeholderText" v-model="value" placeholder-style="color:#e7e7e7;"
 								placeholder-class="placeholder-style" class="ml20 input-native" @focus="inputFocus"
 								@blur="inputBlur"
-								style="border: none; font-size: 24rpx; color: #ffffff; background: transparent; width: 70%;"
+								style="border: none; font-size: 32rpx; color: #ffffff; background: transparent; width: 70%;"
 								cursor-spacing="100" :adjust-position="false" />
 							<view class="send" @click="sendMsg()">发送</view>
 						</view>
@@ -191,7 +196,7 @@
 					<view class="left">
 						<image class="w30 h30 mr8" src="/static/images/signal.png" />讲解中
 					</view>
-					<image @click="isShowGoods=false" class="w40 h40 " src="/static/images/del2.png" />
+					<image @click="isShowGoods=false" class="w40 h40 " src="/static/images/del_black.png" />
 				</view>
 
 				<image class="photo" :src="goodsCard.imgUrl" />
@@ -314,11 +319,12 @@
 						<image class="w48 h48" src="/static/images/order.png" />
 						<view style="text-align: center;">兑换好礼</view>
 					</view>
-					<view class=" item" @click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId='+liveId),isMore=false">
+					<view class=" item"
+						@click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId='+liveId),isMore=false">
 						<image class="w48 h48" src="/static/images/after_sales.png" />
 						<view style="text-align: center;">售后订单</view>
 					</view>
-					<view class=" item" @click="isMore=false">
+					<view class=" item" @click="isMore=false,goMiniProgram">
 						<image class="w48 h48" src="/static/images/points.png" />
 						<view style="text-align: center;">芳华币</view>
 					</view>
@@ -344,14 +350,9 @@
 							<image class="w48 h48" src="/static/images/search2.png" />
 							<view style="text-align: center;">更多</view>
 						</view>
-						<!-- <view class=" search-top"
-							@click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId='+liveId)">
-							<image class="w48 h48" src="/static/images/after_sales.png" />
-							<view style="text-align: center;">售后</view>
-						</view> -->
 					</view>
 
-					<scroll-view enable-flex scroll-y class="shop-list" :style="{ height: boxHeight + 'px' }">
+					<!-- <scroll-view enable-flex scroll-y class="shop-list" :style="{ height: boxHeight + 'px' }">
 						<view class="list-item" v-for="(item,index) in products" :key="index">
 							<view class="goods-img">
 								<image class="img" :src="item.imgUrl" mode="widthFix" />
@@ -379,6 +380,51 @@
 								</view>
 							</view>
 						</view>
+					</scroll-view> -->
+					<scroll-view enable-flex scroll-y class="shop-list" :style="{ height: boxHeight + 'px' }">
+						<!-- 骨架屏 -->
+						<view v-if="loadingProducts && products.length === 0" class="skeleton-list">
+							<view v-for="n in 6" :key="n" class="skeleton-item">
+								<view class="skeleton-img"></view>
+								<view class="skeleton-content">
+									<view class="skeleton-line short"></view>
+									<view class="skeleton-line medium"></view>
+									<view class="skeleton-line long"></view>
+								</view>
+							</view>
+						</view>
+
+						<!-- 实际商品列表 -->
+						<template v-else>
+							<view v-for="(item,index) in products" :key="index" class="list-item">
+								<view class="goods-img">
+									<image class="img" :src="item.imgUrl" mode="widthFix" />
+									<view class="goods-label">{{index+1}}</view>
+								</view>
+								<view class="goods-right">
+									<view class="goods-title">{{item.productName}}</view>
+									<view class="goods-people">{{item.sales}} 人已购</view>
+									<view class="goods-shop">
+										<text class="nummber"><text
+												style="font-size: 20rpx;font-weight: 600;">¥</text><text
+												style="font-size: 36rpx;font-weight: bold;">{{Math.trunc(item.price)}}</text>.{{getPureDecimal(item.price)?getPureDecimal(item.price):'00'}}</text>
+										<view class="btn-group x-f">
+											<view class="collect-btn">
+												<image v-if="item.isFavorite" @click="onGoodsCollect(item)"
+													class="w36 h36" style="vertical-align: middle;"
+													src="/static/images/collect_select.png" />
+												<image v-else @click="onGoodsCollect(item)" class="w36 h36"
+													style="vertical-align: middle;" src="/static/images/collect.png" />
+											</view>
+											<view v-if="item.status==1" class="shop-btn"
+												@click="goShop(item.productId,item.goodsId)">去购买 </view>
+											<view v-else-if="item.status==0" class="shop-btn">
+												已下架</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</template>
 					</scroll-view>
 				</view>
 			</u-popup>
@@ -451,7 +497,7 @@
 		},
 		data() {
 			return {
-				isMore:false,
+				isMore: false,
 				value: '',
 				totalTraffic: 0, // 总流量(字节)
 				bitrate: 1600, // 默认码率 0.16Mbps
@@ -499,7 +545,6 @@
 
 				keyboardHeight: 0,
 				videoCurrentTime: 0, // 当前视频播放时间
-				isVideoPlaying: false, // 视频是否正在播放
 				videoProgressKey: '', // 存储进度的key
 				inAndOut: {},
 
@@ -563,6 +608,7 @@
 				liveViewers: [], //观众
 				livingUrl: "",
 				products: [],
+				loadingProducts: false, // 商品加载状态
 				store: {},
 				orderUser: {}, //正在购买
 				userType: 0,
@@ -618,6 +664,9 @@
 				if (this.liveId) {
 					this.getliving(this.liveId);
 					this.isOnload = true
+					this.getLiveMsg(this.liveItem);
+					this.getliveViewData(this.liveItem);
+
 				} else {
 					console.error("直播间 ID(liveId)未获取到");
 				}
@@ -632,9 +681,12 @@
 			}, 1000)
 		},
 		async onShow() {
-			if (this.liveId && !this.isOnload) {
+			if (this.liveId && !this.talklist) {
 				await this.getLiveMsg(this.liveItem);
 			}
+			if (!this.liveViewData) {
+				this.getliveViewData(this.liveItem);
+			}
 			if (!this.userData) {
 				await this.getUserInfo()
 			}
@@ -787,17 +839,30 @@
 				immediate: true
 			}
 		},
-		methods: { // 阻止双击事件
+		methods: {
+			goMiniProgram() {
+				uni.navigateToMiniProgram({
+					appId: 'wx45cf09091aead547',
+					path: 'pages/index/index',
+					// extraData: {
+					//   key1: 'value1',
+					//   key2: 'value2'
+					// },
+					success: function(res) {
+						console.log('跳转成功', res);
+					},
+					fail: function(err) {
+						console.error('跳转失败', err);
+					}
+				});
+			},
+			// 阻止双击事件
 			preventDoubleClick(e) {
 				e.preventDefault();
 				e.stopPropagation();
 				return false;
 			},
-			finishTime() {
-				if (this.liveItem.finishTime) {
 
-				}
-			},
 			// 清理所有定时器
 			clearAllTimers() {
 				if (this.liveViewDataTimer) {
@@ -936,9 +1001,9 @@
 			},
 			// 恢复页面活动
 			async resumePageActivity() {
-				await this.getliving(this.liveId)
+
 				if (this.liveItem) {
-					// this.playVideo()
+					await this.getliving(this.liveId)
 					this.startTimeTimer(this.liveItem)
 				}
 				if (!this.isSocketAvailable()) {
@@ -1262,15 +1327,12 @@
 						videoContext.play();
 					}, 100);
 				}
-				// this.isVideoPlaying = false;
 				// 暂停时保存进度
 				this.saveVideoProgress();
 			},
 
 			// 视频播放
-			onVideoPlay(e) {
-				// this.isVideoPlaying = true;
-			},
+			onVideoPlay(e) {},
 			// 设置视频当前时间
 			// setVideoCurrentTime(time) {
 			// 	if (!time) return;
@@ -1299,7 +1361,6 @@
 
 			// 点击红包
 			onRed() {
-
 				if (!this.liveId) return;
 				if (!this.redInfo?.redId) return;
 				if (this.redTimer) {
@@ -1636,7 +1697,6 @@
 				if (this.videoRetryCounts[liveItem.liveId] === undefined) {
 					this.videoRetryCounts[liveItem.liveId] = 0;
 				}
-
 				// 限制重试次数
 				if (this.videoRetryCounts[liveItem.liveId] >= 3) {
 					console.error(`直播间 ${this.liveId} 视频加载失败,停止重试`);
@@ -1817,7 +1877,6 @@
 				const param = {
 					id: liveId
 				};
-
 				try {
 					const res = await getlive(param);
 					if (res.code !== 200) {
@@ -1827,9 +1886,8 @@
 						});
 						return;
 					}
-
 					this.liveItem = Object.assign({}, this.liveItem, res.data);
-					this.talklist = Array.isArray((res.data || {}).talklist) ? res.data.talklist : [];
+					// this.talklist = Array.isArray((res.data || {}).talklist) ? res.data.talklist : [];
 					this.startTimeTimer(this.liveItem);
 					// 清除旧定时器(如预告倒计时)
 					if (this.liveStartTimer) {
@@ -1871,10 +1929,6 @@
 						this.$set(this.liveItem, 'livingUrl', '');
 						this.$set(this.liveItem, 'videoUrl', '');
 					}
-					await this.getLiveMsg(this.liveItem);
-					await this.getliveViewData(this.liveItem);
-
-
 					this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0);
 					this.$set(this.liveItem, 'showType', res.data.showType);
 					this.storeId = res.storeId;
@@ -1972,6 +2026,7 @@
 
 			// 查询店铺
 			async queryCollect() {
+				this.loadingProducts = true;
 				if (!this.liveId) return;
 				if (this.inputInfo == null) this.inputInfo = ''
 				uni.showLoading({
@@ -1980,12 +2035,15 @@
 				try {
 					const res = await liveStore(this.liveId, this.inputInfo);
 					uni.hideLoading()
+					this.shopping = true
 					if (res.code === 200) {
 						// 数据绑定到当前 liveItem,避免全局污染
 						this.products = Array.isArray(res.data) ? res.data : [];
 					}
 				} catch (error) {
 					console.error('获取小黄车商品失败:', error);
+				} finally {
+					this.loadingProducts = false;
 				}
 			},
 			// 时间戳
@@ -1996,7 +2054,7 @@
 
 			openCart() {
 				this.queryCollect()
-				this.shopping = true
+
 			},
 			close() {
 				this.showadd = false
@@ -2006,7 +2064,7 @@
 			closeShop() {
 				this.shopping = false;
 			},
-			closeMore(){
+			closeMore() {
 				this.isMore = false;
 			},
 			// 关闭WebSocket连接(isManual:是否手动关闭)
@@ -2151,7 +2209,7 @@
 				// 将time转换为毫秒级时间戳
 				let timeStamp;
 				// 如果time是数字且合理(毫秒级时间戳通常为13位左右的正数),视为有效时间戳
-				if (typeof time === 'number' && time > 0 && time < 9999999999999) { // 上限约为3000年
+				if (typeof time === 'number' && time > 0 && time < 9999999999999) {
 					timeStamp = time;
 				}
 				//如果是字符串,尝试解析为日期后转为时间戳
@@ -2473,6 +2531,67 @@
 </script>
 
 <style scoped lang="scss">
+	.skeleton-item {
+		display: flex;
+		padding: 20rpx;
+		background: #fff;
+		margin-bottom: 16rpx;
+		border-radius: 16rpx;
+	}
+
+	.skeleton-img {
+		width: 200rpx;
+		height: 200rpx;
+		background: #f0f0f0;
+		border-radius: 8rpx;
+		margin-right: 24rpx;
+		animation: pulse 1.5s ease-in-out infinite;
+	}
+
+	.skeleton-content {
+		flex: 1;
+	}
+
+	.skeleton-line {
+		height: 20rpx;
+		background: #f0f0f0;
+		margin-bottom: 16rpx;
+		border-radius: 4rpx;
+		animation: pulse 1.5s ease-in-out infinite;
+	}
+
+	.skeleton-line.short {
+		width: 60%;
+	}
+
+	.skeleton-line.medium {
+		width: 80%;
+	}
+
+	.skeleton-line.long {
+		width: 95%;
+	}
+
+	@keyframes pulse {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0.5;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+
+
+
+
+
+
 	::v-deep .u-icon--right {
 		justify-content: flex-end !important;
 	}
@@ -2514,23 +2633,6 @@
 		}
 	}
 
-	/* button自带样式清除 */
-	button::after {
-		border: none !important;
-		padding: 0 !important;
-		margin: 0 !important;
-	}
-
-	button {
-		background-color: transparent !important;
-		padding: 0 !important;
-		line-height: inherit !important;
-		margin: 0 !important;
-		width: auto !important;
-		font-weight: 500 !important;
-		border-radius: none !important;
-	}
-
 	.welcome-message {
 		position: fixed;
 		width: 100%;
@@ -2553,6 +2655,10 @@
 	}
 
 	.talk-list {
+		will-change: transform; // 提示浏览器优化
+		contain: layout style paint; // 限制渲染范围
+
+
 		max-width: 100%;
 		border-radius: 30rpx;
 		background-color: rgba(33, 33, 33, 0.5);
@@ -2609,6 +2715,11 @@
 			}
 		}
 
+		// 减少重绘
+		.side-group,
+		.content-top {
+			will-change: transform;
+		}
 
 		.side-group {
 			position: absolute;
@@ -2626,6 +2737,23 @@
 				margin-bottom: 32rpx;
 				text-align: center;
 
+				// 将 button 选择器改为类选择器
+				.button-reset::after {
+					border: none !important;
+					padding: 0 !important;
+					margin: 0 !important;
+				}
+
+				.button-reset {
+					background-color: transparent !important;
+					padding: 0 !important;
+					line-height: inherit !important;
+					margin: 0 !important;
+					width: auto !important;
+					font-weight: 500 !important;
+					border-radius: none !important;
+				}
+
 				.image {
 					width: 72rpx;
 					height: 72rpx;
@@ -2740,9 +2868,14 @@
 		width: 100%;
 
 		.video {
+			transform: translateZ(0);
+			backface-visibility: hidden;
+			perspective: 1000;
+
+
 			height: 100vh;
 			width: 100%;
-			background-color: rgba(57, 57, 57, 0.4);
+			// background-color: rgba(57, 57, 57, 0.4);
 
 			.item {
 				width: 100%;
@@ -2756,6 +2889,15 @@
 				margin-left: 10rpx;
 			}
 
+			.end {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				font-size: 36rpx;
+				color: #fff;
+			}
+
 			.lable {
 				position: absolute;
 				top: 50rpx;
@@ -2809,9 +2951,6 @@
 			align-items: center;
 			font-size: 28rpx;
 			margin: 10rpx 0;
-
-
-
 			.txt {
 				font-weight: 600;
 			}
@@ -3007,10 +3146,8 @@
 			border-radius: 16rpx 16rpx 0 0;
 			overflow: hidden;
 		}
-
 		.item {
 			padding: 4rpx;
-
 			.price {
 				font-size: 30rpx;
 
@@ -3019,7 +3156,6 @@
 					font-weight: 600;
 					margin-right: 10rpx;
 				}
-
 				.del {
 					color: #828282;
 					font-weight: 500;
@@ -3027,13 +3163,11 @@
 					text-decoration: line-through
 				}
 			}
-
 			.title {
 				font-weight: 500;
 				font-size: 30rpx;
 				margin: 10rpx 0 12rpx;
 			}
-
 			.button {
 				background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
 				color: #fff;
@@ -3053,11 +3187,9 @@
 		z-index: 5;
 		border-radius: 20rpx;
 		width: 320rpx;
-
 		.coupon-block {
 			width: 100%;
 			position: relative;
-
 			.item {
 				width: 100%;
 				position: absolute;
@@ -3066,13 +3198,11 @@
 				flex-direction: column;
 				align-items: center;
 				color: #fff;
-
 				.title {
 					font-weight: 500;
 					font-size: 30rpx;
 					margin: 16rpx 0 12rpx;
 				}
-
 				.price {
 					font-size: 40rpx;
 
@@ -3081,13 +3211,11 @@
 						font-weight: 600;
 					}
 				}
-
 				.txt {
 					font-weight: 500;
 					font-size: 30rpx;
 					margin: 5rpx 0;
 				}
-
 				.button {
 					background: linear-gradient(270deg, #fffce1 0%, #ffeaaf 100%);
 					color: #ff0004;
@@ -3114,7 +3242,6 @@
 				width: 100%;
 				z-index: 6;
 			}
-
 			.close {
 				position: absolute;
 				right: 10rpx;
@@ -3132,7 +3259,6 @@
 		justify-content: center;
 		align-items: center;
 		transition: transform 0.2s ease;
-
 	}
 
 	.list {
@@ -3143,16 +3269,12 @@
 
 	@keyframes xxxawdawd {
 		from {
-			margin-top: 0rpx;
 			opacity: 0;
 		}
-
 		to {
-			// margin-top: 20rpx;
 			opacity: 1;
 		}
 	}
-
 	.shop-prompt {
 		position: absolute;
 		bottom: 750rpx;
@@ -3182,7 +3304,6 @@
 			overflow-y: auto;
 			padding: 0 40rpx;
 		}
-
 		.bottom {
 			padding: 20rpx 40rpx;
 			position: absolute;
@@ -3196,14 +3317,12 @@
 	// 抽奖
 	.prize-box {
 		position: relative;
-
 		.nav-img {
 			width: 311rpx;
 			position: absolute;
 			top: -122rpx;
 			left: 50%;
 			transform: translateX(-50%);
-
 		}
 
 		.bg-img {
@@ -3219,7 +3338,6 @@
 			position: relative;
 			z-index: 2;
 			padding: 24rpx 0 68rpx;
-
 			.white-item {
 				width: 40rpx;
 				height: 40rpx;
@@ -3250,7 +3368,6 @@
 					background: rgba(255, 255, 255, 0.5);
 					border-radius: 4rpx 4rpx 4rpx 4rpx;
 				}
-
 				.selected {
 					background: #FFEB66;
 				}
@@ -3268,7 +3385,6 @@
 				font-size: 36rpx;
 				color: #F4410B;
 				text-align: center;
-
 			}
 		}
 	}
@@ -3278,7 +3394,8 @@
 		padding: 70rpx 30rpx;
 		display: flex;
 		justify-content: space-between;
-		.item{
+
+		.item {
 			text-align: center;
 		}
 	}
@@ -3330,7 +3447,6 @@
 					overflow: hidden;
 					position: relative;
 					margin-right: 24rpx;
-
 					.img {
 						width: 100%;
 						height: 100%;
@@ -3349,24 +3465,19 @@
 						color: #FFFFFF;
 					}
 				}
-
 				.goods-right {
 					flex: 1;
-
 					.goods-title {
 						font-weight: 500;
 						font-size: 30rpx;
 						color: #000000;
 						margin-bottom: 10rpx;
-
 					}
-
 					.goods-details {
 						font-size: 24rpx;
 						color: #999999;
 						margin: 10rpx 0 20rpx;
 					}
-
 					.goods-people {
 						font-size: 22rpx;
 						color: #E69A22;
@@ -3410,4 +3521,4 @@
 			}
 		}
 	}
-</style>
+</style>