添加左右滑动跳转相应页面功能

zhanghua

2025-09-01 b185d60269102c404509156f7cf6859b9b0e034c

 pages/tabbar/index/home.vue

@@ -4,80 +4,38 @@
   <!-- 视频加载 -->
   <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
    <!-- 视频列表 -->
    <swiper
      class="video-swiper"
      vertical
      :current="currentIndex"
      @change="onSwiperChange"
     :duration="250"
     easing-function="linear"
    >
      <swiper-item
      v-for="(item, index) in videoList"
      :key="item.updateKey"
      @touchstart="handleSwiperStart"
      @touchmove="handleSwiperMove"
      @touchend="handleSwiperEnd(item)"
       >
      <swiper class="video-swiper" vertical :current="currentIndex" @change="onSwiperChange" :duration="250"
         easing-function="linear">
         <swiper-item v-for="(item, index) in videoList" :key="item.updateKey" @touchstart="handleSwiperStart"
            @touchmove="handleSwiperMove" @touchend="handleSwiperEnd(item)">
      <view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
           <!-- 播放按钮（仅当视频暂停时显示） -->
           <view
            class="play-icon"
            @click="togglePlay(index)"
            v-show="!currentVideoIsPlaying"
           >
            <image src="/pages/subComponents/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
               <view class="play-icon" @click="togglePlay(index)" v-show="!currentVideoIsPlaying">
                  <image src="/pages/subComponents/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="index === currentIndex"
            :controls="isControls"
            :loop="true"
            :object-fit="item.videoFit"
            :enable-progress-gesture="false"
            :show-center-play-btn="false"
            :show-progress="false"
            :show-fullscreen-btn="isControls"
            :show-play-btn="isControls"
            :show-mute-btn="false"
            class="video-item"
				
            @fullscreenchange="onFullscreenChange"
            @play="onPlay(item.id, index)"
            @pause="onPause(index)"
            @ended="onEnded(index)"
            @click="togglePlay(index)"
            @timeupdate="onTimeUpdate($event)"
            @loadedmetadata="onLoadedMetadata($event)"
            @waiting="videoWaiting(index)"
           ></video>
               <video v-if="index >= currentIndex - videoLiveOffset && index <= currentIndex + videoLiveOffset"
                  :id="'video' + index" :ref="'video' + index" :src="item.videoUrl"
                  :autoplay="index === currentIndex" :controls="isControls" :loop="true"
                  :object-fit="item.videoFit" :enable-progress-gesture="false" :show-center-play-btn="false"
                  :show-progress="false" :show-fullscreen-btn="isControls" :show-play-btn="isControls"
                  :show-mute-btn="false" class="video-item" @fullscreenchange="onFullscreenChange"
                  @play="onPlay(item.id, index)" @pause="onPause(index)" @ended="onEnded(index)"
                  @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)"
                  @loadedmetadata="onLoadedMetadata($event)" @waiting="videoWaiting(index)"></video>
            <view class="fullscreen-btn">
                 <image 
                   class="fullscreen-icon" 
                   :src="isFullScreen ? off_screen : on_screen"
                   mode="aspectFit"
                 @click="requestFullScreen('video'+index,item)"
                 ></image>
                  <image class="fullscreen-icon" :src="isFullScreen ? off_screen : on_screen" mode="aspectFit"
                     @click="requestFullScreen('video' + index, item)"></image>
             </view>
           <!-- 自定义控制条 -->
           <view
            @touchstart.stop="handleTouchStart"
            @touchmove.stop="handleTouchMove"
            @touchend.stop="handleTouchEnd"
            :style="{bottom: marginBottom + 'px'}"
            class="container">
               <view @touchstart.stop="handleTouchStart" @touchmove.stop="handleTouchMove"
                  @touchend.stop="handleTouchEnd" :style="{ bottom: marginBottom + 'px' }" class="container">
            <!-- 进度条 - 整个区域可拖动 -->
            <!-- <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }"> -->
            <view class="process-warp">
              <!-- 显示当前进度 -->
              <view v-show="isTouch" class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
              <view
               class="progress-bar"
               id="progressBar"
              >
                     <view class="progress-bar" id="progressBar">

               <!-- 已填充部分 -->
               <view class="progress-fill" :style="{ width: progress + '%' }"></view>
@@ -87,22 +45,15 @@
      </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'}"
         >
                  :dots-styles="{ width: 24, bottom: 24, selectedBackgroundColor: 'green', backgroundColor: 'gray' }">
          <swiper class="swiper-box" @change="imgChange" :autoplay="true" :interval="3000">
            <swiper-item v-for="img in item.imgs" :key="img">
              <view class="swiper-item">
                <!-- 调整 image 样式，使其居中且按比例缩放 -->
                <image
                  :src="img"
                  mode="aspectFit"
                  style="width: 100%; height: 100%; display: block; margin: 0 auto;"
                ></image>
                           <image :src="img" mode="aspectFit"
                              style="width: 100%; height: 100%; display: block; margin: 0 auto;"></image>
              </view>
            </swiper-item>
          </swiper>
@@ -124,7 +75,8 @@
                 <text class="goods-name">{{goods.goodsName}}</text>
                 <view class="price-section">
                  <text class="current-price">¥{{goods.price}}</text>
                  <text class="original-price" v-if="goods.originalPrice">¥{{goods.originalPrice}}</text>
                                 <text class="original-price" v-if="goods.originalPrice">¥{{
                                    goods.originalPrice }}</text>
                 </view>
               </view>
              </view>
@@ -136,13 +88,14 @@

        <!-- 视频信息层 -->
        <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}">
        <view style="width: 100%; position: relative;">
               <view style="width: 100%; position: relative;" @click="jumpToSearch">
           <text class="video-author">@{{item.authorName}}</text>
           <text class="iconfont" @click="jumpToSearch" style="position: absolute;right: 42px;bottom: 50rpx;">&#xe64e;</text>
                  <text class="iconfont" style="position: absolute;right: 42px;bottom: 50rpx;">&#xe64e;</text>
        </view>
          <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
           <text class="video-title">{{item.title}}</text>
           <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{tag.tagName}}</text>
                  <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{ tag.tagName
                  }}</text>
        </view>
        
        </view>
@@ -150,9 +103,11 @@
       <!-- 右侧互动按钮 -->
       <view class="action-buttons">
         <view class="avatar-container">
            <image class="avatar" @click="jumpToHomePage(item.authorId)" @touchend.stop :src="item.authorAvatar" mode="aspectFill"></image>
                  <image class="avatar" @click="jumpToHomePage(item.authorId)" @touchend.stop
                     :src="item.authorAvatar" mode="aspectFill"></image>
            <!-- 关注图标 - 使用绝对定位 -->
            <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)" @touchend.stop>
                  <view v-if="!item.subscribeThisAuthor" class="follow-icon"
                     @click="subscribeAuth(index, item.authorId)" @touchend.stop>
             <text class="iconfont">&#xe629;</text>
            </view>
         </view>
@@ -203,17 +158,25 @@

         <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>
                     <image class="comment-avatar" :src="comment.userAvatar || '/static/default-avatar.png'">
                     </image>
            <view class="comment-content">
               <view @click="replyClick(comment)">
                  <text class="nickname">{{comment.userNickname}} <text v-if="userId===comment.userId">(我)</text> </text>
                           <text class="nickname">{{ comment.userNickname }} <text
                                 v-if="userId === comment.userId">(我)</text> </text>
                  <text class="content">{{comment.commentContent}}</text>
               </view>
              <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>
               <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(comment.id, index, null)">&#xe607;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></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>
                           <text v-else class="thumbs-up time iconfont"
                              @click="cancelThumbsUp(comment.id, index, null)">&#xe607;<text
                                 v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{ comment.thumbsUpNum
                                 }}</text></text>
              </view>
            </view>
         </view>
@@ -222,41 +185,55 @@
            <view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="reply.id">
              <view class="reply-content" @click="replyClick(reply)">
               <view style="display: flex;">
                  <image class="comment-reply-avatar" :src="reply.replyUserAvatar || '/static/default-avatar.png'"></image>
                  <text class="nickname">{{reply.userNickname}}<text v-if="userId===comment.userId">(我)</text></text>
                  <text v-if="reply.replyUserId && reply.masterCommentId !== reply.replyId" class="reply-to"><text style="margin-right: 10rpx;font-size: 28rpx;" class="iconfont">&#xe666;</text>{{reply.replyUserNickname}}<text v-if="userId===comment.userId">(我)</text></text>
                              <image class="comment-reply-avatar"
                                 :src="reply.replyUserAvatar || '/static/default-avatar.png'"></image>
                              <text class="nickname">{{ reply.userNickname }}<text
                                    v-if="userId === comment.userId">(我)</text></text>
                              <text v-if="reply.replyUserId && reply.masterCommentId !== reply.replyId"
                                 class="reply-to"><text style="margin-right: 10rpx;font-size: 28rpx;"
                                    class="iconfont">&#xe666;</text>{{ reply.replyUserNickname }}<text
                                    v-if="userId === comment.userId">(我)</text></text>
               </view>
               <text class="content">{{reply.commentContent}}</text>
               <view class="reply-footer">
                 <text class="time">{{formatTime(reply.createTime)}}</text>
                 <text @click="openReply(comment, reply)" class="reply-btu time">回复</text>
                 <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(reply.id, index, replyIndex)">&#xe614;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
                 <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(reply.id, index, replyIndex)">&#xe607;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
                              <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont"
                                 @click="thubmsUp(reply.id, index, replyIndex)">&#xe614;<text
                                    v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum
                                    }}</text></text>
                              <text v-else class="thumbs-up time iconfont"
                                 @click="cancelThumbsUp(reply.id, index, replyIndex)">&#xe607;<text
                                    v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum
                                    }}</text></text>
               </view>
              </view>
            </view>
           </view>
           <view class="view-more-replies" v-if="comment.replyTotalCount > 0 && !comment.expandReply" @click="loadRepliesPage(comment, index)">
                  <view class="view-more-replies" v-if="comment.replyTotalCount > 0 && !comment.expandReply"
                     @click="loadRepliesPage(comment, index)">
            <text class="line">——</text>展开{{comment.replyTotalCount}}条回复 ↓
           </view>
           <view class="reply-op" v-if="comment.replyTotalCount > replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
              <view @click="loadNextPageReply(index)" class="reply-op-item"><text class="line">——</text>展开更多<text class="iconfont textSideIcon">&#xeb8d;</text></view>
              <view @click="retractReplyComment(index)" class="reply-op-item" style="margin-left: 50rpx;">收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
                  <view class="reply-op"
                     v-if="comment.replyTotalCount > replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
                     <view @click="loadNextPageReply(index)" class="reply-op-item"><text
                           class="line">——</text>展开更多<text class="iconfont textSideIcon">&#xeb8d;</text></view>
                     <view @click="retractReplyComment(index)" class="reply-op-item" style="margin-left: 50rpx;">
                        收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
           </view>
           <view class="reply-op" v-else-if="comment.replyTotalCount <= replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
              <view @click="retractReplyComment(index)" class="reply-op-item"><text class="line">——</text>收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
                  <view class="reply-op"
                     v-else-if="comment.replyTotalCount <= replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
                     <view @click="retractReplyComment(index)" class="reply-op-item"><text
                           class="line">——</text>收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
           </view>
         </view>
       </scroll-view>
       <view class="comment-input-area">
        <input
         ref="commentInput"
         class="comment-input"
         v-model="commentForm.commentContent"
               <input ref="commentInput" 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>
                  placeholder-class="placeholder" />
               <button class="submit-btn" @click="submitComment"
                  :disabled="!commentForm.commentContent.trim()">发送</button>
      </view>
     </view>
   </uni-popup>
@@ -264,15 +241,9 @@

   <custom-tabbar bgColor="#333333" selected="index" selectedTextColor="#ffffff"></custom-tabbar>
   
   <ActivityPopup 
         :show="activityPopup.show"
         :activityTitle="activityPopup.title"
         :activityDesc="activityPopup.desc"
         :activityImage="activityPopup.image"
         :endTime="activityPopup.endTime"
        :prizeActivityId="activityPopup.prizeActivityId"
         @close="onClosePopup"
       />
      <ActivityPopup :show="activityPopup.show" :activityTitle="activityPopup.title"
         :activityDesc="activityPopup.desc" :activityImage="activityPopup.image" :endTime="activityPopup.endTime"
         :prizeActivityId="activityPopup.prizeActivityId" @close="onClosePopup" />
  </view>
</template>

@@ -712,6 +683,18 @@
         url: '/pages/video/video-goods-detail?videoId=' + videoId
      });
     },
      // 点击商品跳转
      jumpToPayVideo(videoId) {
         uni.navigateTo({
            url: '/pages/video/video-goods-detail-swiper?videoId=' + videoId
         });
      },
      // 跳转类似视频页面
      jumpToSimilarVideo(goods, currentVideoId) {
         uni.navigateTo({
            url: '/pages/video/video-similar?goodsId=' + goods.goodsId + '&currentVideoId=' + currentVideoId
         });
      },
     // 轮播图变化
     imgChange(e) {
        this.currentImgIndex = e.detail.current;
@@ -1099,9 +1082,9 @@
   // 结束触摸
   async handleSwiperEnd(item) {
      // 防止滑动滚动条也触发跳转
      if (this.showProcess) {
         return
      }
         // if (this.showProcess) {
         //    return
         // }
       const diffX = this.touchXY.endX - this.touchXY.startX
       const diffY = this.touchXY.endY - this.touchXY.startY

@@ -1123,23 +1106,29 @@
            }
         }
         else if (item.goodsList && item.goodsList.length > 0) {
            this.jumpToPay(item.id)
                  this.jumpToPayVideo(item.id)
         }
               // else if (item.goodsList && item.goodsList.length == 1) {
               //    // 跳转相关商品视频
               //    this.jumpToSimilarVideo(item.goodsList[0], item.id)
               // }
         } else {
           console.log('左滑')
         if (this.similarlyVideoList.length < 1 || this.similarlyVideoList.length - this.similaryVideoIndex - 1 <= 3) {
            // 相关视频为空或者剩余视频不足，触发加载相关视频
            await this.getGoodsSimilarly()
         }
         // 切换下一个视频
         const oldIndex = this.similaryVideoIndex;
         this.similaryVideoIndex = Math.min(this.similaryVideoIndex + 1, this.similarlyVideoList.length - 1);
         if (this.similaryVideoIndex > oldIndex) {
            // 把竖向视频的当前播放位置替换为横向视频的当前索引元素
            const video = this.similarlyVideoList[this.similaryVideoIndex];
            video["updateKey"] = video.id + this.similaryVideoIndex
            this.videoList.splice(this.currentIndex, 1, video);
         }
               // if (this.similarlyVideoList.length < 1 || this.similarlyVideoList.length - this.similaryVideoIndex - 1 <= 3) {
               //    // 相关视频为空或者剩余视频不足，触发加载相关视频
               //    await this.getGoodsSimilarly()
               // }
               // // 切换下一个视频
               // const oldIndex = this.similaryVideoIndex;
               // this.similaryVideoIndex = Math.min(this.similaryVideoIndex + 1, this.similarlyVideoList.length - 1);
               // if (this.similaryVideoIndex > oldIndex) {
               //    // 把竖向视频的当前播放位置替换为横向视频的当前索引元素
               //    const video = this.similarlyVideoList[this.similaryVideoIndex];
               //    video["updateKey"] = video.id + this.similaryVideoIndex
               //    this.videoList.splice(this.currentIndex, 1, video);
               // }
               if (item.goodsList && item.goodsList.length > 0)
                  this.jumpToSimilarVideo(item.goodsList[0], item.id)
         }
       }
       // 重置坐标
@@ -1357,15 +1346,18 @@
     border: 1rpx solid rgba(255, 255, 255, 0.2);

   }

   /* 图标样式 */
   .fullscreen-icon {
     width: 36rpx;
     height: 36rpx;
     opacity: 0.9;
   }

   ::v-deep .custom-tabbar {
      border-top: none !important;
   }

   .video-container {
     width: 100%;
     height: 100vh;
@@ -1382,6 +1374,7 @@
     height: 100%;
     /* object-fit: cover; */
   }

   .play-icon {
     position: absolute;
     top: 50%;
@@ -1421,45 +1414,61 @@
     align-items: center;
     color: #fff;
   }

   .avatar-container {
     margin-bottom: 27px;
     position: relative;  /* 为绝对定位的子元素提供定位上下文 */
   position: relative;
   /* 为绝对定位的子元素提供定位上下文 */
     width: 40px;
     height: 40px;
     display: inline-block; /* 使容器根据内容调整大小 */
   display: inline-block;
   /* 使容器根据内容调整大小 */
   }

   .avatar {
     border: 2px solid #FFFFFF;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     border-radius: 50%;  /* 关键属性，设置为50%即可实现圆形 */
     overflow: hidden;    /* 确保图片不会超出圆形边界 */
   border-radius: 50%;
   /* 关键属性，设置为50%即可实现圆形 */
   overflow: hidden;
   /* 确保图片不会超出圆形边界 */
     display: block;
   }

   .follow-icon {
     position: absolute;
     bottom: 0;  /* 定位到底部 */
     left: 50%;  /* 水平居中开始位置 */
     transform: translate(-50%, 50%); /* 水平居中并向下移动50% */
   bottom: 0;
   /* 定位到底部 */
   left: 50%;
   /* 水平居中开始位置 */
   transform: translate(-50%, 50%);
   /* 水平居中并向下移动50% */

     width: 18px;  /* 图标大小 */
   width: 18px;
   /* 图标大小 */
     height: 18px;
     background-color: #FF5A5F; /* 图标背景色 */
   background-color: #FF5A5F;
   /* 图标背景色 */
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   /* 轻微阴影 */
   }

   .video-tag {
      margin-left: 5px;
      font-weight: bold;
      color: #eeeeee;
   }

   .video-author {
      font-size: 1.2em;
   }

   /* 商品链接悬挂层样式 */
   .goods-link-warp {
      position: absolute;
@@ -1468,6 +1477,7 @@
      color: #f8f8f8;
      z-index: 10;
   }

   .goods-link {
     position: relative;
     width: 450rpx;
@@ -1505,7 +1515,8 @@
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     margin-bottom: 8rpx;
     width: 280rpx; /* 需要指定宽度 */
   width: 280rpx;
   /* 需要指定宽度 */
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -1543,6 +1554,7 @@
     font-size: 26rpx;
     font-weight: bold;
   }

   /* 评论弹窗样式 */
   .comment-popup {
     background-color: #fff;
@@ -1590,6 +1602,7 @@
     border-radius: 50%;
     margin-right: 10rpx;
   }

   .comment-reply-avatar {
      width: 40rpx;
      height: 40rpx;
@@ -1651,15 +1664,18 @@
     font-size: 28rpx;
   }

   .loading, .empty {
.loading,
.empty {
     padding: 40rpx 0;
     text-align: center;
     color: #999;
   }

   .reply-list {
     margin-top: 20rpx;
     padding-left: 80rpx;
   }

   .reply-op {
      margin-top: 10rpx;
      padding-left: 80rpx;
@@ -1667,6 +1683,7 @@
      font-size: 28rpx;
      color: #333;
   }

   .reply-op-item {
      display: flex;
      align-items: center;
@@ -1687,6 +1704,7 @@
     margin: 0 10rpx;
     font-size: 28rpx;
   }

   .reply-title {
     display: flex;
     align-items: center;
@@ -1702,38 +1720,47 @@
     background: #f5f5f5;
     border-radius: 20rpx;
   }

   .view-more-replies {
     color: #576b95;
     font-size: 28rpx;
     padding: 10rpx 0;
     padding-left: 80rpx;
   }
   .comment-footer, .reply-footer {

.comment-footer,
.reply-footer {
     display: flex;
     align-items: center;
     font-size: 28rpx;
     color: #999;
   }

   .reply-btu {
      margin-left: 30rpx;
   }

   .thumbs-up {
      position: absolute;
      right: 20rpx;
      font-size: 32rpx;
      width: 120rpx;
   }

   .textSideIcon {
      font-size: 36rpx;
      margin-left: 5rpx;
   }

   .line {
      margin-right: 10rpx;
      color: #cccccc;
   }

   .thumbs-num {
      margin-left: 4rpx;
   }

   .container {
     display: flex;
     flex-direction: column;
@@ -1747,7 +1774,8 @@
     position: relative;
     width: 100%;
     height: 5px;
     background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
   background-color: rgba(255, 255, 255, 0.2);
   /* 半透明背景 */
     overflow: hidden;
     border-radius: 1.5px;
     cursor: pointer;
@@ -1764,21 +1792,25 @@
     background-color: lightgray;
     transition: width 0.1s;
   }

   .process-warp {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .progress-text {
     margin-top: 10px;
     font-size: 14px;
     color: #fff;
   }

   .swiper-box {
     width: 100%;
     height: 1400rpx;
   }

   .swiper-item {
     display: flex;
     justify-content: center;
@@ -1786,6 +1818,7 @@
     width: 100%;
     height: 100%;
   }

   .custom-share-btn {
     font-size: unset;
     background: none;
@@ -1794,9 +1827,11 @@
     line-height: normal;
     border: none;
   }

   .custom-share-btn::after {
     border: none;
   }

   .topBar {
      position: fixed;
      top: 20rpx;