From 3b94e8e5ce58a243a992d1fca3874d5d3dfd8997 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Thu, 29 May 2025 10:31:25 +0800
Subject: [PATCH] feat: 优化main布局高度

---
 src/views/Home.vue |   61 ++++++++++++++----------------
 1 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5e01235..7296437 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -40,7 +40,7 @@
         </div>
 
         <!-- 主要内容区域 -->
-        <div class="main-content" :style="isFullScreen ? fullScreenStyle : ''" v-loading="isLoading">
+        <div class="main-content" :style="isFullScreen ? fullScreenStyle : ''" v-loading="isLoading" ref="mainContent">
           <!-- 模型 / 720 -->
           <div
             class="w-full h-full"
@@ -64,17 +64,7 @@
             ></iframe>
           </div>
           <!-- 项目 -->
-          <div class="w-full h-full" ref="videoWrapper" v-if="currentView === 'project'">
-            <video
-              controls
-              muted
-              controlslist="nodownload"
-              autoplay
-              class="video-box"
-              ref="videoElement"
-              :style="'width: 100%; height: 450px;background-color: #000'"
-            ></video>
-          </div>
+          <video v-if="currentView === 'project'" controls muted controlslist="nodownload" autoplay class="video-box" ref="videoElement"></video>
           <!-- 720全景图版本选择 -->
           <!--<div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'">
       <div v-for="item in panoVersionList" :key="item.value" :style="isFullScreen ? 'z-index: 100;' : ''">
@@ -128,7 +118,7 @@
         type: String,
         default: "",
       },
-      isFullScreen: {
+      isHederFullScreen: {
         type: Boolean,
         default: false,
       },
@@ -248,19 +238,13 @@
         deep: true, // 深度监听对象内部变化
         immediate: true, // 立即执行一次
       },
-      isFullScreen: {
-        handler(newVal) {
-          console.log("实况界面接收到的数据:", newVal);
-          // 处理数据变化的逻辑
-          if (newVal) {
-            this.$refs.videoElement.style.height = "100%";
-          } else {
-            this.$refs.videoElement.style.height = "450px";
-          }
-        },
-        deep: true, // 深度监听对象内部变化
-        immediate: true, // 立即执行一次
-      },
+    },
+    created() {
+      window.addEventListener("resize", this.resize);
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", this.resize);
+      this.destroyPlayer(); // 销毁播放器实例
     },
     mounted() {
       setTimeout(() => {
@@ -286,12 +270,18 @@
         }
       }
     },
-    created() {
-      window.addEventListener("resize", function () {
-        this.$refs.vi;
-      });
-    },
     methods: {
+      resize() {
+        const windowInfo = {
+          width: window.innerWidth,
+          height: window.innerHeight,
+        };
+        if (windowInfo.height > 1080) {
+          this.$refs.mainContent.style.height = "100%";
+        } else {
+          this.$refs.mainContent.style.height = "450px";
+        }
+      },
       getItemImg(item) {
         return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`;
       },
@@ -702,8 +692,15 @@
   }
 
   .main-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex: 1;
-    background-color: #fff;
+    background-color: #000;
+    width: 100%;
+    height: 450px;
+  }
+  .video-box {
     width: 100%;
     height: 100%;
   }

--
Gitblit v1.9.3