图片

root/detail/job.vue

@@ -93,55 +93,28 @@
 					</div>
 					
 					 <view class="m-banner g_pb_16 g_border_f5_b g_mt_12" v-if="swiperArray.length > 0">
-					    <swiper class="swiper" :circular="false" :autoplay="false" :display-multiple-items="swiperArray.length < 5 ? swiperArray.length : 5" style="height: 58px">
+					 	<scroll-view class="banner-scroll" scroll-x="true" show-scrollbar="false"
-					      <swiper-item 
+					 		:scroll-with-animation="true">
-					        v-for="(item, index) in swiperArray" 
+					 		<view class="scroll-content">
-					        :style="{
+					 			<view v-for="(item, index) in swiperArray" :key="index" class="scroll-item"
-					          maxWidth: '58px', 
-					          paddingRight: '12px'
-					        }" 
-					        :key="index" 
 					 				:class="index == 0 ? 'g_ml_0 g_mr_0' : ''"
-					      >
+					 				@click="item.type == 'image' ? handleViewBig(item, index) : showVideo(item)">
-					        <u-image 
+					 				<u-image :radius="4" v-if="item.type == 'image'" :showLoading="true" :src="item.image"
-					          :radius="4" 
+					 					width="58px" height="58px" style="border-radius: 4px">
-					          v-if="item.type == 'image'" 
+					 				</u-image>
-					          :showLoading="true" 
+					 				<view class="g_w_58 g_h_58 g_radius_4 videoContainer" v-else>
-					          :src="item.image" 
+					 					<video class="theVideo" :show-fullscreen-btn="true" :show-play-btn="true"
-					          width="58px" 
+					 						:show-center-play-btn="true" :enable-play-gesture="true" :id="item.id"
-					          height="58px" 
+					 						:src="item.image" @fullscreenchange="fullScreen" :muted="muted"
-					          style="border-radius: 4px" 
+					 						:show-mute-btn="isFullscreen" :show-progress="isFullscreen"
-					          @click="handleViewBig(item, index)"
+					 						:show-time="isFullscreen" :controls="isFullscreen"
-					        ></u-image>
+					 						:enable-progress-gesture="isFullscreen" :object-fit="'cover'"
-					        <view 
+					 						style="width: 100%; height: 100%;">
-					          class="g_w_60 g_h_58 g_radius_4 videoContainer" 
-					          style="overflow: hidden" 
-					          @click="showVideo(item)" 
-					          v-else
-					        >
-					          <video 
-					            class="theVideo" 
-					            :show-fullscreen-btn="false" 
-					            :show-play-btn="false" 
-					            :show-center-play-btn="false" 
-					            :enable-play-gesture="true" 
-					            :id="item.id" 
-					            :src="item.image" 
-					            @fullscreenchange="fullScreen" 
-					            :muted="muted" 
-					            :show-mute-btn="true"
-					          >
-					           <!-- <view class="shareVideo">
-					              <icon 
-					                @click="shareVideo(item)" 
-					                class="iconfont" 
-					                :class="wxPlat == 'wxwork' ? 'icon-huidaodingbu' : 'icon-zhuanfa1'"
-					              ></icon>
-					            </view> -->
 					 					</video>
 					 				</view>
-					      </swiper-item>
+					 			</view>
-					    </swiper>
+					 		</view>
+					 	</scroll-view>
 					 </view>
 					
 					
@@ -352,7 +325,6 @@
 				</div>
 			</div> -->
 				<!-- 轮播banner -->
-				1{{swiperArray}}2
 				<div class="m-banner g_pb_16 g_border_f5_b" v-if="swiperArray.length > 0">
 					<swiper class="swiper" :circular="false" :autoplay="false" :display-multiple-items="swiperArray.length < 5 ? swiperArray.length : 5" style="height: 58px">
 						<swiper-item v-for="(item, index) in swiperArray" style="max-width: 58px; padding-right: 12px" :key="index" :class="index == 0 ? 'g_ml_0 g_mr_0' : ''">
@@ -687,6 +659,7 @@ export default {
 	},
 	data() {
 		return {
+			isFullscreen: false, // 添加全屏状态跟踪
 			globalData: getApp().globalData,
 			videoContextTemp: {},
 			goImLoading: false, // 跳转im的loading
@@ -1240,7 +1213,9 @@ export default {
 			console.log("showVideo that.swiperArray", that.swiperArray);
 			this.videoContext = uni.createVideoContext(`${e.id}`, this);
 			that.videoContextTemp = that.videoContext;
-			this.videoContext.requestFullScreen();
+			this.videoContext.requestFullScreen({
+				direction: "landscape", // 横屏全屏
+			});
 			this.videoContext.hideStatusBar();
 			this.videoContext.play();
 		},
@@ -1284,6 +1259,9 @@ export default {
 		},
 		fullScreen(e) {
 		    console.log(e);
+		    this.muted = true;
+		    this.isFullscreen = e.detail.fullScreen; // 更新全屏状态
+		    
 		    if (!e.detail.fullScreen) {
 		      this.videoContext.stop();
 		    }
@@ -1651,10 +1629,63 @@ export default {
 		.u-swiper__wrapper__item {
 			margin-right: 10px;
 		}
+	
 		image {
 			border-radius: 4px !important;
 		}
+	
+		.banner-scroll {
+			width: 100%;
+			white-space: nowrap;
+	
+			.scroll-content {
+				display: inline-block;
+				white-space: nowrap;
+	
+				.scroll-item {
+					display: inline-block;
+					width: 58px;
+					height: 58px;
+					margin-right: 12px;
+					vertical-align: top;
+	
+					&:last-child {
+						margin-right: 0;
+					}
+	
+					.videoContainer {
+						position: relative;
+						background-color: #000; // 黑色背景
+	
+						.theVideo {
+							width: 100%;
+							height: 100%;
+	
+							// 小图时隐藏控制栏
+							::v-deep .uni-video-controls {
+								display: none !important;
+							}
+	
+							// 全屏时显示控制栏
+							::v-deep .uni-video-fullscreen-controls {
+								display: block !important;
+							}
+						}
+	
+						// 小图时只显示居中的播放按钮
+						::v-deep .uni-video-cover-play-button {
+							display: block !important;
+							width: 40px;
+							height: 40px;
+							margin: auto;
+						}
+					}
+				}
+			}
+		}
+	
 		// .swiper {
+	
 		// 	// 为最后一个视频项目添加特殊处理
 		// 	swiper-item:last-child {
 		// 		.videoContainer {
@@ -1676,6 +1707,8 @@ export default {
 		// 	}
 		// }
 	}
+	
+	
 	.m-state {
 		position: fixed;
 		left: 0;