ow

WebVue/src/views/master/PreviewVideo.vue

@@ -2,12 +2,12 @@
     <div class="pv-page" :style="{
         height: bsInfo.height - 120 + 'px',
     }">
-        <VideoPlayer :videos="videos" />
+        <VideoPlayer v-model:controls="controlsVisible" :videos="videos" />
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import VideoPlayer from "@/components/basic/VideoPlayer.vue";
@@ -32,6 +32,21 @@ const mode = ref<string>(route.params.mode as string);
 // 视频列表：与 VinylAudioPlayer 的 tracks 一致，组件负责 UI，页面只负责数据
 const videos = ref<VideoItem[]>([]);
 
+/**
+ * 底部控制区显隐（点播放器控制栏里的眼睛图标切换）。
+ * 影视厅是整页用法，收起控制区时连 layout 顶部的两条栏（标题栏 + 页面头）一起藏掉，
+ * 视频才能占满整屏。class 挂在 body 上，离开本页/恢复显示时立即移除，不会影响其它页面。
+ */
+const controlsVisible = ref(true);
+
+watch(controlsVisible, (visible) => {
+    document.body.classList.toggle("pv-fullscreen", !visible);
+});
+
+onUnmounted(() => {
+    document.body.classList.remove("pv-fullscreen");
+});
+
 onMounted(async () => {
     await loadVideos();
 });
@@ -113,4 +128,29 @@ const loadVideos = async () => {
     padding-right: 8px;
     box-sizing: border-box;
 }
+</style>
+
+<style>
+/* 注意：这里是全局样式，但所有选择器都要求 body 上有 .pv-fullscreen
+   （只在影视厅收起控制区时由 PreviewVideo.vue 临时挂上，离开页面即移除），
+   所以不会影响其它页面。
+
+   收起控制区 = 页面全屏：
+   1. 藏掉 layout 顶部两条栏（标题栏 64px + 页面头 42px）；
+   2. 内容区和视频容器撑到整屏，去掉原有的 8px 内边距，做到真正的全屏铺满。
+   容器高度是行内样式（bsInfo.height - 100/-120），只能用 !important 覆盖。 */
+body.pv-fullscreen .layout-header,
+body.pv-fullscreen .layout-page-header {
+    display: none !important;
+}
+
+body.pv-fullscreen .layout-content-view {
+    height: 100vh !important;
+    padding: 0 !important;
+}
+
+body.pv-fullscreen .pv-page {
+    height: 100vh !important;
+    padding-right: 0 !important;
+}
 </style>