From 3bff34c3aa7ad412042272ea6a37b7d5b49b8d9b Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 26 六月 2025 09:09:51 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev

---
 pages/tabbar/index/home.vue |  340 ++++++++++++++++++++++++++++++++++----------------------
 1 files changed, 205 insertions(+), 135 deletions(-)

diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index df33ed7..9aebf49 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -1,32 +1,44 @@
 <template>
   <view class="video-container">
+	<top-bar selectedTitleIndex="home" textColor="white" @changeTab="topBarChange" class="topBar"></top-bar>
+	<!-- 瑙嗛鍔犺浇 -->
+	<zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
     <!-- 瑙嗛鍒楄〃 -->
-    <swiper 
-      class="video-swiper" 
-      vertical 
-      circular 
+    <swiper
+      class="video-swiper"
+      vertical
       :current="currentIndex"
       @change="onSwiperChange"
+	  :duration="250"
+	  easing-function="linear"
     >
-      <swiper-item v-for="(item, index) in videoList" :key="item.id">
+      <swiper-item
+		v-for="(item, index) in videoList"
+		:key="item.id"
+		@touchstart="handleSwiperStart"
+		@touchmove="handleSwiperMove"
+		@touchend="handleSwiperEnd(item)"
+		 >
 		<view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
 			  <!-- 鎾斁鎸夐挳锛堜粎褰撹棰戞殏鍋滄椂鏄剧ず锛� -->
-			  <view 
-				class="play-icon" 
+			  <view
+				class="play-icon"
 				@click="togglePlay(index)"
-				v-if="!currentVideoIsPlaying"
+				v-show="!currentVideoIsPlaying"
 			  >
 				<image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
 			  </view>
 			  <video
+				v-if="index >= currentIndex - videoLiveOffset && index <= currentIndex + videoLiveOffset"
 				:id="'video'+index"
 				:ref="'video'+index"
 				:src="item.videoUrl"
-				:autoplay="currentIndex === index"
+				:autoplay="index === currentIndex"
 				:controls="false"
 				:loop="true"
 				:object-fit="item.objectFit"
 				:enable-progress-gesture="false"
+				:show-center-play-btn="false"
 				class="video-item"
 				@play="onPlay(item.id, index)"
 				@pause="onPause(index)"
@@ -34,23 +46,23 @@
 				@click="togglePlay(index)"
 				@timeupdate="onTimeUpdate($event)"
 				@loadedmetadata="onLoadedMetadata($event)"
-				
+				@waiting="videoWaiting(index)"
 			  ></video>
 			  <!-- 鑷畾涔夋帶鍒舵潯 -->
-			  <view 
-				@touchstart="handleTouchStart"
-				@touchmove="handleTouchMove"
-				@touchend="handleTouchEnd"
+			  <view
+				@touchstart.stop="handleTouchStart"
+				@touchmove.stop="handleTouchMove"
+				@touchend.stop="handleTouchEnd"
 				class="container">
 				<!-- 杩涘害鏉� - 鏁翠釜鍖哄煙鍙嫋鍔� -->
 				<view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
 				  <!-- 鏄剧ず褰撳墠杩涘害 -->
 				  <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
-				  <view 
-					class="progress-bar" 
+				  <view
+					class="progress-bar"
 					id="progressBar"
 				  >
-							  
+
 					<!-- 宸插~鍏呴儴鍒� -->
 					<view class="progress-fill" :style="{ width: progress + '%' }"></view>
 				  </view>
@@ -58,10 +70,10 @@
 			  </view>
 		</view>
 		<view style="width: 100%; height: 100%;" v-else-if="item.videoContentType === 'img'">
-		  <uni-swiper-dot 
-			:info="item.imgs" 
-			:current="currentImgIndex" 
-			mode="round" 
+		  <uni-swiper-dot
+			:info="item.imgs"
+			:current="currentImgIndex"
+			mode="round"
 			style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"
 			:dots-styles="{width: 24, bottom: 24,selectedBackgroundColor: 'green', backgroundColor: 'gray'}"
 			>
@@ -69,9 +81,9 @@
 		      <swiper-item v-for="img in item.imgs" :key="img">
 		        <view class="swiper-item">
 		          <!-- 璋冩暣 image 鏍峰紡锛屼娇鍏跺眳涓笖鎸夋瘮渚嬬缉鏀� -->
-		          <image 
-		            :src="img" 
-		            mode="aspectFit" 
+		          <image
+		            :src="img"
+		            mode="aspectFit"
 		            style="width: 100%; height: 100%; display: block; margin: 0 auto;"
 		          ></image>
 		        </view>
@@ -79,8 +91,8 @@
 		    </swiper>
 		  </uni-swiper-dot>
 		</view>
-		
-		
+
+
 		<!-- 鎮寕鍟嗗搧閾炬帴灞� -->
 		<view class="goods-link-warp" v-if="item.goodsList.length > 0">
 			<view class="goods-link">
@@ -89,7 +101,7 @@
 				  <view class="goods-container" @click="jumpToPay(item.id)">
 					<!-- 鍟嗗搧鍥剧墖 -->
 					<image class="goods-image" :src="goods.thumbnail" mode="aspectFill"></image>
-					
+
 					<!-- 鍟嗗搧淇℃伅 -->
 					<view class="goods-info">
 					  <text class="goods-name">{{goods.goodsName}}</text>
@@ -103,8 +115,8 @@
 			  </swiper>
 			</view>
 		</view>
-		
-        
+
+
         <!-- 瑙嗛淇℃伅灞� -->
         <view class="video-info">
 		  <view>
@@ -115,7 +127,7 @@
 			  <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{tag.tagName}}</text>
 		  </view>
         </view>
-        
+
         <!-- 鍙充晶浜掑姩鎸夐挳 -->
        <view class="action-buttons">
 		   <view class="avatar-container">
@@ -138,13 +150,13 @@
 			  <button open-type="share" class="custom-share-btn" :data-obj="item">
 			        <text class="iconfont">&#xe602;</text>
 			      </button>
-		     
+
 		  </view>
         </view>
-		
+
       </swiper-item>
     </swiper>
-	
+
 	<!-- 璇勮寮圭獥 -->
 	<uni-popup ref="commentPopup" type="bottom" :is-mask-click="true" @maskClick="closeCommentPopup">
 	  <view class="comment-popup">
@@ -156,23 +168,23 @@
 		  </view>
 	      <text class="iconfont close-icon" @click="closeCommentPopup">&#xe675;</text>
 	    </view>
-	    
+
 	    <scroll-view class="comment-list" scroll-y :show-scrollbar="false" @scrolltolower="getCommentPage">
 	      <view v-if="commentLoading" class="loading">
 	        <uni-load-more status="loading"></uni-load-more>
 	      </view>
-	      
+
 	      <view v-else-if="comments.length === 0" class="empty">
 	        鏆傛棤璇勮锛屽揩鏉ュ彂琛ㄧ涓�鏉¤瘎璁哄惂~
 	      </view>
-	      
+
 	      <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id">
 			<view style="display: flex;">
 				<image class="comment-avatar" :src="comment.userAvatar || '/static/default-avatar.png'"></image>
 				<view class="comment-content">
 				  <text class="nickname">{{comment.userNickname}}</text>
 				  <text class="content">{{comment.commentContent}}</text>
-				  <view style="position: relative;">  
+				  <view style="position: relative;">
 					<text class="time">{{formatTime(comment.createTime)}}</text>
 					<text @click="openReply(comment)" class="reply-btu time">鍥炲</text>
 					<text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(comment.id, index, null)">&#xe614;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
@@ -212,19 +224,19 @@
 	      </view>
 	    </scroll-view>
 	    <view class="comment-input-area">
-		  <input 
+		  <input
 			ref="commentInput"
-			class="comment-input" 
-			v-model="commentForm.commentContent" 
-			:placeholder="commentForm.replyId ? `鍥炲 @${commentForm.replyUserNickname}` : '鍐欎笅浣犵殑璇勮...'" 
+			class="comment-input"
+			v-model="commentForm.commentContent"
+			:placeholder="commentForm.replyId ? `鍥炲 @${commentForm.replyUserNickname}` : '鍐欎笅浣犵殑璇勮...'"
 			placeholder-class="placeholder"
 		  />
 		  <button class="submit-btn" @click="submitComment" :disabled="!commentForm.commentContent.trim()">鍙戦��</button>
 		</view>
 	  </view>
 	</uni-popup>
-	
-	
+
+
 	<custom-tabbar bgColor="#333333" selected="index" selectedTextColor="#ffffff"></custom-tabbar>
   </view>
 </template>
@@ -236,7 +248,10 @@
 import { silentLogin } from "@/api/connect.js";
 import { getUserInfo } from "@/api/members";
 import storage from "@/utils/storage.js";
+import TopBar from "@/components/TopBar.vue";
+
 export default {
+  components: {TopBar},
   computed: {
 	    hasPlayTime() {
 	      return this.sliderFormatTime(this.progress > 0 ? this.duration * this.progress / 100 : 0);
@@ -295,17 +310,21 @@
 			startPlayTime: 0 // 杩欎釜瑙嗛浠庝粈涔堟椂鍊欏紑濮嬫挱鏀剧殑
 		},
 		currentVideoIsPlaying: true, // 褰撳墠瑙嗛鏄惁姝e湪鎾斁
-		isFullScreen: false,
-		windowHeight: 0,
 		currentIndex: 0, // 褰撳墠鎾斁鐨勮棰戠储寮�
-		videoList: [
-		  
-		],   // 瑙嗛鍒楄〃鏁版嵁
-		videoContexts: [], // 瑙嗛涓婁笅鏂囧璞¢泦鍚�
+		videoLoading: false, // 瑙嗛缂撳啿涓�
+		videoList: [],   // 瑙嗛鍒楄〃鏁版嵁
+		videoBufferOffset: 0.1 ,// 瑙嗛棰勫姞杞藉弬鏁�
+		videoLiveOffset: 2, // 淇濈暀褰撳墠瑙嗛鍓嶅悗鍚勫灏戜釜瑙嗛涓婁笅鏂�
+		touchXY: {  // 鐩戝惉宸︽粦鍙虫粦
+			startX: 0,
+			endX: 0,
+			startY: 0,
+			endY: 0
+		},
 		loading: false,  // 鏄惁姝e湪鍔犺浇
 		videoQuery: {
 			pageNumber: 1,
-			pageSize: 6,
+			pageSize: 10,
 			videoFrom: 'recommend'
 		}
     }
@@ -316,7 +335,7 @@
 		 //  this.wxSilentLogin(() => {
 			//   this.loadVideos();
 		 //  })
-	  // } else { 
+	  // } else {
 	  // 	  this.loadVideos();
 	  // }
 	  // 濡傛灉瑙嗛鎸変笅鏆傚仠鍚庡垏鎹㈤〉闈㈠啀鍥炲埌椤甸潰鏃讹紝鍙畻鏆傚仠鏃堕棿锛堝洜涓烘殏鍋滄椂闂村拰绂诲紑椤甸潰鏃堕棿鏄噸澶嶇殑锛屽彧绠椾竴涓級
@@ -339,13 +358,9 @@
 				  saveShareClickRecord({refId: option.videoId, shareUserId: option.userId})
 			  }
 		  })
-	  } else { 
+	  } else {
 		this.loadVideos();
 	  }
-  },
-  onReady() {
-    // 鍒濆鍖栬棰戜笂涓嬫枃
-    this.initVideoContexts();
   },
   onShareAppMessage(e) {
 	const userInfo = storage.getUserInfo();
@@ -368,6 +383,17 @@
   	}
   },
   methods: {
+	  topBarChange(titleObj) {
+		if (titleObj.index === 'home') {
+			uni.switchTab({
+				url: titleObj.pagePath
+			});
+		} else {
+			uni.redirectTo({
+				url: titleObj.pagePath
+			});
+		}
+	  },
 	  // 闈欓粯鐧诲綍
 	  wxSilentLogin(callback) {
 		  //鑾峰彇code
@@ -525,11 +551,11 @@
 	      const date = new Date(time);
 	      const now = new Date();
 	      const diff = Math.floor((now - date) / 1000); // 绉�
-	      
+
 	      if (diff < 60) return '鍒氬垰';
 	      if (diff < 3600) return `${Math.floor(diff / 60)}鍒嗛挓鍓峘;
 	      if (diff < 86400) return `${Math.floor(diff / 3600)}灏忔椂鍓峘;
-	      
+
 	      return `${date.getMonth() + 1}鏈�${date.getDate()}鏃;
 	    },
 		// 鎻愪氦璇勮
@@ -545,7 +571,7 @@
 	      addVideoComment(this.commentForm).then(res => {
 			  if(res.data.code === 200) {
 				  this.resetCommentForm()
-				  
+
 				  // 濡傛灉鏄瘎璁哄埆浜虹殑鍥炲锛岄偅涔堝氨灏嗚繖涓彂甯冨埌replies閲岄潰
 				  if(res.data.data.replyId) {
 					  for (const [index, item] of this.comments.entries()) {
@@ -655,19 +681,12 @@
 			}
 		})
 	  },
-    // 鍒濆鍖栬棰戜笂涓嬫枃
-    initVideoContexts() {
-      this.videoContexts = this.videoList.map((_, index) => {
-		  let videoContent = uni.createVideoContext(`video${index}`, this);
-		  return videoContent;
-      });
-    },
-    
+
     // 鍔犺浇瑙嗛鏁版嵁
     async loadVideos() {
       if (this.loading || this.videoNoMore) return;
       this.loading = true;
-      
+
 	  getRecommendVideos(this.videoQuery).then(res => {
 		  console.log(res, "瑙嗛鏁版嵁");
 		  if (this.videoQuery.pageNumber === 1) {
@@ -680,21 +699,19 @@
 			  ),
 			];
 		  }
-		  this.$nextTick(() => {
-		    this.initVideoContexts();
-		  });
 		  this.loading = false;
 		  if(res.data.data.length < this.videoQuery.pageSize) {
 			  this.videoNoMore = true;
 			  return;
 		  }
 		  this.videoQuery.pageNumber++;
-		  
+
 	  })
     },
-    
+
     // 婊戝姩鍒囨崲瑙嗛
     onSwiperChange(e) {
+		this.videoLoading = false
 		// 濡傛灉瑙嗛澶勪簬鏆傚仠鐘舵�佸線涓嬪埛瑙嗛锛岄偅涔堥渶瑕佸啀璁$畻涓�娆℃殏鍋滄椂闂�
 		if(!this.currentVideoIsPlaying) {
 			if(this.startPauseTime !== 0) {
@@ -706,22 +723,64 @@
 		this.savePlayRecord()
 		const oldIndex = this.currentIndex;
 		this.currentIndex = e.detail.current;
-
+		const videoContext = uni.createVideoContext(`video${oldIndex}`, this);
 		// 鏆傚仠涓婁竴涓棰�
-		if (this.videoContexts[oldIndex]) {
-			this.videoContexts[oldIndex].pause();
-		}
-		
+		videoContext.pause();
 		this.startPauseTime = 0;
-		// 鎾斁褰撳墠瑙嗛
-		if (this.videoContexts[this.currentIndex]) {
-			this.videoContexts[this.currentIndex].play();
-		}
+
 		// 璁剧疆褰撳墠鎾斁瑙嗛鐨勬�绘椂闀�
 		this.duration = this.videoList[this.currentIndex].videoDuration;
 		this.formartDuration = this.sliderFormatTime(this.duration);
+
+		// 鎾斁褰撳墠瑙嗛
+		const videoContext1 = uni.createVideoContext(`video${this.currentIndex}`, this);
+		videoContext1.play()
+		// 濡傛灉鍓╀綑瑙嗛涓嶈冻锛岃Е鍙戣姹傝幏鍙栨洿澶氳棰�
+		if (this.videoList.length - 1 < this.currentIndex + this.videoLiveOffset) {
+			this.loadVideos()
+		}
     },
-    
+
+	// 寮�濮嬭Е鎽�
+	handleSwiperStart(e) {
+		console.log("寮�濮嬭Е鎽�", e);
+	    this.touchXY.startX = e.touches[0].pageX
+	    this.touchXY.startY = e.touches[0].pageY
+	},
+	// 瑙︽懜涓�
+	handleSwiperMove(e) {
+	    this.touchXY.endX = e.touches[0].pageX
+	    this.touchXY.endY = e.touches[0].pageY
+	},
+	// 缁撴潫瑙︽懜
+	handleSwiperEnd(item) {
+		// 闃叉婊戝姩婊氬姩鏉′篃瑙﹀彂璺宠浆
+		if (this.showProcess) {
+			return
+		}
+	    const diffX = this.touchXY.endX - this.touchXY.startX
+	    const diffY = this.touchXY.endY - this.touchXY.startY
+
+	    // 鍒ゆ柇鏄惁鏄í鍚戞粦鍔紙X杞村彉鍖栧ぇ浜嶻杞村彉鍖栵級
+	    if (Math.abs(diffX) > Math.abs(diffY)) {
+	      if (diffX > 0) {
+	        console.log('鍙虫粦')
+			if (item.goodsList && item.goodsList.length > 0) {
+				this.jumpToPay(item.id)
+			}
+	      } else {
+	        console.log('宸︽粦')
+	      }
+	    }
+	    // 閲嶇疆鍧愭爣
+	    this.touchXY = {
+			startX: 0,
+			endX: 0,
+			startY: 0,
+			endY: 0
+		}
+	},
+
     // 鏀惰棌/鍙栨秷鏀惰棌
     toggleCollect(item, index) {
 	  let data = {
@@ -746,18 +805,16 @@
     },
     // 鍗曞嚮灞忓箷锛氭殏鍋滄垨缁х画鎾斁
 	togglePlay(index) {
-		console.log("鍗曞嚮瑙嗛", index, this.videoContexts);
+		console.log("鍗曞嚮瑙嗛", index);
+		const videoContext = uni.createVideoContext(`video${index}`, this);
 		if(this.currentVideoIsPlaying) {
-			this.videoContexts[index].pause();
+			videoContext.pause();
 		} else {
-			this.videoContexts[index].play();
+			videoContext.play();
 		}
 	},
     // 瑙嗛鎾斁浜嬩欢
     onPlay(id, index) {
-		this.getBarRect()
-		this.progress = 0
-		console.log(id, index, "瑙﹀彂鎾斁");
 		if(index === this.currentIndex) {
 			this.currentVideoIsPlaying = true;
 			if(! this.duration) {
@@ -766,9 +823,11 @@
 				this.formartDuration = this.sliderFormatTime(this.duration);
 			}
 		} else {
-			this.currentVideoIsPlaying = false;
 			return
 		}
+		this.getBarRect()
+		this.progress = 0
+		console.log(id, index, "瑙﹀彂鎾斁");
 		this.playRecord.videoId = id;
 		// 娌″垵濮嬪寲鎵嶈祴鍊硷紝鍥犱负涓�涓棰戦噸澶嶆挱鏀緊nPlay浼氶噸澶嶈Е鍙�
 		if(this.playRecord.startPlayTime === 0) {
@@ -778,29 +837,27 @@
 			const duration = Date.now() - this.startPauseTime
 			this.totalPauseTime += duration
 		}
-		
+		this.videoLoading = false
     },
-    
+
     // 瑙嗛鏆傚仠浜嬩欢
     onPause(index) {
 		console.log(index, "瑙﹀彂鏆傚仠");
 		if(index === this.currentIndex) {
 			this.currentVideoIsPlaying = false;
-		} else {
-			this.currentVideoIsPlaying = true;
-			return
+			this.startPauseTime = Date.now()
 		}
-	  this.startPauseTime = Date.now()
     },
     // 瑙嗛缁撴潫浜嬩欢
     onEnded(index) {
       // this.currentVideoIsPlaying = false;
     },
-	
+
 	// 璁板綍鎾斁鏃堕暱
 	onTimeUpdate(e) {
+		this.videoLoading = false
 		this.playRecord.playAt = e.detail.currentTime;
-		
+
 		this.currentTime = e.detail.currentTime;
 		this.progress = (e.detail.currentTime / this.duration) * 100
 	},
@@ -811,47 +868,54 @@
 	  this.startProgress = this.progress; // 璁板綍寮�濮嬫椂鐨勮繘搴�
 	  this.startX = e.touches[0].pageX;
 	  console.log("璁板綍寮�濮嬫椂鐨勮繘搴�", this.startProgress);
-	  this.videoContexts[this.currentIndex].pause()
+	  const videoContext = uni.createVideoContext(`video${this.currentIndex}`, this);
+	  videoContext.pause()
 	  // this.updateProgress(e);
 	},
-	
+
 	// 瑙︽懜绉诲姩
 	handleTouchMove(e) {
 	  if (!this.isDragging || !this.barWidth) return;
 	  clearTimeout(this.processHidenTimer)
-	  this.videoContexts[this.currentIndex].pause()
 	  this.updateProgress(e);
 	},
-	
+
 	// 瑙︽懜缁撴潫
 	handleTouchEnd() {
 	  this.isDragging = false;
 	  console.log("婊戝姩缁撴潫", this.duration * this.progress);
-	  this.videoContexts[this.currentIndex].seek(this.duration * this.progress / 100)
-	  this.videoContexts[this.currentIndex].play()
+	  const videoContext = uni.createVideoContext(`video${this.currentIndex}`, this);
+	  videoContext.seek(this.duration * this.progress / 100)
+	  videoContext.play()
 	  this.processHidenTimer = setTimeout(() => {
 		  this.showProcess = false;
 		}, 1000);
 	},
-	
+
 	// 鏇存柊杩涘害
 	updateProgress(e) {
 		// 鑾峰彇褰撳墠瑙︽懜鐐筙鍧愭爣
 		const currentX = e.touches[0].pageX;
-		
+
 		// 璁$畻婊戝姩璺濈(鍍忕礌)
 		const deltaX = currentX - this.startX;
-		
+
 		// 灏嗗儚绱犺窛绂昏浆鎹负杩涘害澧為噺
 		const deltaProgress = (deltaX / this.barWidth) * 100;
-		console.log("杩涘害澧為噺", deltaProgress);
 		// 璁$畻鏂拌繘搴� = 寮�濮嬫椂鐨勮繘搴� + 婊戝姩澧為噺
 		let newProgress = this.startProgress + deltaProgress;
-		
+
 		// 闄愬埗鑼冨洿鍦�0-100涔嬮棿
 		newProgress = Math.max(0, Math.min(100, newProgress));
-		
+
 		this.progress = newProgress;
+	},
+	// 瑙嗛缂撳啿
+	videoWaiting(index) {
+		if (index === this.currentIndex) {
+			console.log("瑙嗛缂撳啿涓�傘�傘��");
+			this.videoLoading = true;
+		}
 	},
 	// 鑾峰彇瑙嗛鎬绘椂闀�
 	onLoadedMetadata(e) {
@@ -862,7 +926,7 @@
 	// 淇濆瓨鎾斁璁板綍
 	async savePlayRecord() {
 		console.log(Date.now(), this.playRecord.startPlayTime, this.totalHidenTime);
-		
+
 		const data = {
 			videoId: this.playRecord.videoId,
 			viewDuration: Date.now() - this.playRecord.startPlayTime - this.totalHidenTime - this.totalPauseTime,
@@ -891,16 +955,16 @@
 	  height: 100vh;
 	  background-color: #000;
 	}
-	
+
 	.video-swiper {
 	  width: 100%;
 	  height: calc(100% - 50px);
 	}
-	
+
 	.video-item {
 	  width: 100%;
 	  height: 100%;
-	  object-fit: cover;
+	  /* object-fit: cover; */
 	}
 	.play-icon {
 	  position: absolute;
@@ -912,17 +976,17 @@
 	  z-index: 10;
 	  opacity: 0.6;
 	}
-	
+
 	.video-info {
 	  width: 70%;
 	  position: absolute;
-	  bottom: 70px;
+	  bottom: 20px;
 	  left: 20px;
 	  color: #f8f8f8;
 	  z-index: 10;
 	  letter-spacing: 1px;
 	}
-	
+
 	.action-buttons {
 	  position: absolute;
 	  right: 20px;
@@ -932,7 +996,7 @@
 	  align-items: center;
 	  z-index: 10;
 	}
-	
+
 	.action-item {
 	  margin-bottom: 18px;
 	  display: flex;
@@ -962,7 +1026,7 @@
 	  bottom: 0;  /* 瀹氫綅鍒板簳閮� */
 	  left: 50%;  /* 姘村钩灞呬腑寮�濮嬩綅缃� */
 	  transform: translate(-50%, 50%); /* 姘村钩灞呬腑骞跺悜涓嬬Щ鍔�50% */
-	  
+
 	  width: 18px;  /* 鍥炬爣澶у皬 */
 	  height: 18px;
 	  background-color: #FF5A5F; /* 鍥炬爣鑳屾櫙鑹� */
@@ -997,27 +1061,27 @@
 	  border-radius: 12rpx;
 	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 	}
-	
+
 	.goods-container {
 	  width: 100%;
 	  display: flex;
 	  align-items: center;
 	}
-	
+
 	.goods-image {
 	  width: 120rpx;
 	  height: 120rpx;
 	  border-radius: 8rpx;
 	  margin-right: 20rpx;
 	}
-	
+
 	.goods-info {
 	  flex: 1;
 	  display: flex;
 	  flex-direction: column;
 	  justify-content: center;
 	}
-	
+
 	.goods-name {
 	  font-size: 28rpx;
 	  color: #333;
@@ -1030,31 +1094,31 @@
 	  white-space: nowrap;
 	  text-overflow: ellipsis;
 	}
-	
+
 	.price-section {
 	  display: flex;
 	  align-items: center;
 	  margin-bottom: 6rpx;
 	}
-	
+
 	.current-price {
 	  font-size: 32rpx;
 	  color: #ff2e4d;
 	  font-weight: bold;
 	  margin-right: 12rpx;
 	}
-	
+
 	.original-price {
 	  font-size: 28rpx;
 	  color: #999;
 	  text-decoration: line-through;
 	}
-	
+
 	.sales-count {
 	  font-size: 22rpx;
 	  color: #999;
 	}
-	
+
 	.buy-button {
 	  background: linear-gradient(to right, #ff5a5f, #ff2e4d);
 	  color: white;
@@ -1192,16 +1256,16 @@
 		align-items: center;
 		height: 40rpx;
 	}
-	
+
 	.reply-item {
 	  display: flex;
 	  margin-bottom: 20rpx;
 	}
-	
+
 	.reply-content {
 	  flex: 1;
 	}
-	
+
 	.reply-to {
 	  color: #576b95;
 	  margin: 0 10rpx;
@@ -1213,7 +1277,7 @@
 	  font-size: 28rpx;
 	  color: #333;
 	}
-	
+
 	.cancel-reply {
 	  margin-left: 20rpx;
 	  color: #576b95;
@@ -1262,7 +1326,7 @@
 	  bottom: 0;
 	  width: 100%;
 	}
-	
+
 	.progress-bar {
 	  position: relative;
 	  width: 100%;
@@ -1270,7 +1334,7 @@
 	  background-color: #eee;
 	  overflow: hidden;
 	}
-	
+
 	.progress-fill {
 	  position: absolute;
 	  left: 0;
@@ -1312,4 +1376,10 @@
 	.custom-share-btn::after {
 	  border: none;
 	}
-</style>
\ No newline at end of file
+	.topBar {
+		position: fixed;
+		top: 20rpx;
+		left: 20rpx;
+		z-index: 1000
+	}
+</style>

--
Gitblit v1.8.0