添加网页全屏

src/components/HomePage.vue

@@ -299,10 +299,11 @@ window.updateTenantName = (newName) => {
 }
 .box-1 {
   width: 100%;
-  height: rpx(50);
+  min-height: rpx(50);
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
   box-sizing: border-box;
   font-size: rpx(16); // 默认字体大小
 }
@@ -409,15 +410,17 @@ window.updateTenantName = (newName) => {
 
 .right-box {
   flex: 1;
-  position: relative; // 添加相对定位;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
   margin-right: rpx(25);
 }
 .top-right-box {
-  position: absolute; // 添加绝对定位
-  width: 100%; // 设置盒子宽度，可按需调整
-  height: 60px; // 设置盒子高度，可按需调整
+  width: 100%;
   display: flex;
   justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
   cursor: pointer; // 添加鼠标指针样式
 }
 .top-right-btn {

src/components/videopage/DialogComponents.vue

@@ -958,7 +958,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  z-index: 1001;
+  z-index: 9999; // 提高z-index值，确保在全屏模式下显示
   pointer-events: none;
 }
 
@@ -1218,7 +1218,8 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 9999; // 提高z-index值，确保在全屏模式下显示
+  pointer-events: auto; // 确保弹框可以接收点击事件
 }
 
 .child-dialog {

src/components/videopage/VideoPlayer.vue

@@ -8,6 +8,7 @@
             class="full-box-video"
             ref="videoRef"
             :controls="true"
+            :controlsList="'nofullscreen'"
             @timeupdate="handleTimeUpdate"
             @seeked="handleSeeked"
             @ended="handleVideoEnded"
@@ -34,6 +35,17 @@
               @click="seekToTime(marker.time)"
             ></div>
           </div>
+          <!-- 网页全屏按钮 -->
+          <el-tooltip 
+            :content="isWebFullscreen ? '退出网页全屏' : '进入网页全屏'" 
+            placement="left"
+            effect="dark"
+          >
+            <div class="fullscreen-btn" @click="toggleWebFullscreen">
+              <el-icon v-if="!isWebFullscreen"><FullScreen /></el-icon>
+              <el-icon v-else><Close /></el-icon>
+            </div>
+          </el-tooltip>
         </div>
       </template>
     </div>
@@ -55,7 +67,7 @@ import { videoPlay as Vue3VideoPlay } from 'vue3-video-play'
 import Hls from 'hls.js'
 import { ElMessage } from 'element-plus'
 // 导入图标
-import { CloseBold } from '@element-plus/icons-vue'
+import { CloseBold, FullScreen, Close } from '@element-plus/icons-vue'
 
 
 // 定义props
@@ -96,6 +108,8 @@ const lastPlayTime = ref(0)
 const historyTipPosition = ref(0)
 // 视频是否暂停状态
 const isVideoPaused = ref(false)
+// 是否处于网页全屏状态
+const isWebFullscreen = ref(false)
 
 // 定义节流函数
 const throttle = (fn, delay) => {
@@ -392,12 +406,78 @@ watch([() => props.contentType, () => props.videoPath], () => {
   }
 })
 
+// 切换网页全屏
+const toggleWebFullscreen = () => {
+  const videoWrapper = document.querySelector('.video-wrapper')
+  if (!videoWrapper) return
+  
+  if (!isWebFullscreen.value) {
+    // 进入网页全屏
+    videoWrapper.style.position = 'fixed'
+    videoWrapper.style.top = '0'
+    videoWrapper.style.left = '0'
+    videoWrapper.style.width = '100vw'
+    videoWrapper.style.height = '100vh'
+    videoWrapper.style.zIndex = '9999'
+    videoWrapper.style.backgroundColor = 'black'
+    videoWrapper.style.display = 'flex'
+    videoWrapper.style.justifyContent = 'center'
+    videoWrapper.style.alignItems = 'center'
+    
+    // 调整视频大小
+    const video = videoWrapper.querySelector('.full-box-video')
+    if (video) {
+      video.style.width = '100%'
+      video.style.height = '100%'
+      video.style.objectFit = 'contain'
+    }
+    
+    isWebFullscreen.value = true
+  } else {
+    // 退出网页全屏
+    videoWrapper.style.position = ''
+    videoWrapper.style.top = ''
+    videoWrapper.style.left = ''
+    videoWrapper.style.width = '70%'
+    videoWrapper.style.height = '100%'
+    videoWrapper.style.zIndex = ''
+    videoWrapper.style.backgroundColor = ''
+    videoWrapper.style.display = 'flex'
+    videoWrapper.style.justifyContent = 'center'
+    videoWrapper.style.alignItems = 'center'
+    
+    // 恢复视频大小
+    const video = videoWrapper.querySelector('.full-box-video')
+    if (video) {
+      video.style.width = '100%'
+      video.style.height = '100%'
+      video.style.objectFit = 'cover'
+    }
+    
+    isWebFullscreen.value = false
+  }
+}
+
 // 组件卸载时
 onBeforeUnmount(() => {
   if (hlsRef.value) {
     hlsRef.value.destroy()
     hlsRef.value = null
   }
+  
+  // 确保退出网页全屏
+  if (isWebFullscreen.value) {
+    const videoWrapper = document.querySelector('.video-wrapper')
+    if (videoWrapper) {
+      videoWrapper.style.position = ''
+      videoWrapper.style.top = ''
+      videoWrapper.style.left = ''
+      videoWrapper.style.width = '70%'
+      videoWrapper.style.height = '100%'
+      videoWrapper.style.zIndex = ''
+      videoWrapper.style.backgroundColor = ''
+    }
+  }
 })
 
 </script>
@@ -599,6 +679,28 @@ video::-webkit-media-controls-panel:not([hidden]) ~ .progress-markers {
   background-color: rgba(0, 0, 0, 0.6);
 }
 
+/* 网页全屏按钮样式 */
+.fullscreen-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 15;
+  transition: all 0.3s ease;
+}
+
+.fullscreen-btn:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
 /* 调整视频控件样式以适应我们的自定义标记 */
 video::-webkit-media-controls-timeline {
   margin-bottom: 10px;