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 | 49 +++++++++++++++++++++++++++++++++----------------
1 files changed, 33 insertions(+), 16 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 068b371..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"
@@ -63,6 +63,8 @@
v-if="currentView === '720'"
></iframe>
</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;' : ''">
@@ -81,18 +83,6 @@
<img src="../assets/images/backgrounds/zoomin.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
<img src="../assets/images/backgrounds/zoomout.png" alt="缩小" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-else />
</div>
- </div>
- <!-- 项目 -->
- <div class="w-full h-full" v-if="currentView === 'project'">
- <video
- controls
- muted
- controlslist="nodownload"
- autoplay
- class="video-box"
- ref="videoElement"
- style="width: 100%; height: 100%; background-color: #000"
- ></video>
</div>
</div>
</div>
@@ -127,6 +117,10 @@
selectedId: {
type: String,
default: "",
+ },
+ isHederFullScreen: {
+ type: Boolean,
+ default: false,
},
},
data() {
@@ -245,6 +239,13 @@
immediate: true, // 立即执行一次
},
},
+ created() {
+ window.addEventListener("resize", this.resize);
+ },
+ beforeDestroy() {
+ window.removeEventListener("resize", this.resize);
+ this.destroyPlayer(); // 销毁播放器实例
+ },
mounted() {
setTimeout(() => {
console.log("projectEndDate", getProjectEndDate());
@@ -269,8 +270,18 @@
}
}
},
-
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`;
},
@@ -546,7 +557,6 @@
height: calc(100vh - 100px);
overflow: hidden;
}
-
.top-nav {
height: 5vh;
display: flex;
@@ -682,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