From a3e27f5cab583debe11a9c62d8cc0115783b0791 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 16:59:43 +0800
Subject: [PATCH] fix: 优化实况UI放大缩小
---
src/views/Home.vue | 48 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 34 insertions(+), 14 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 068b371..5e01235 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -63,6 +63,18 @@
v-if="currentView === '720'"
></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>
<!-- 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 +93,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 +127,10 @@
selectedId: {
type: String,
default: "",
+ },
+ isFullScreen: {
+ type: Boolean,
+ default: false,
},
},
data() {
@@ -244,6 +248,19 @@
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, // 立即执行一次
+ },
},
mounted() {
setTimeout(() => {
@@ -269,7 +286,11 @@
}
}
},
-
+ created() {
+ window.addEventListener("resize", function () {
+ this.$refs.vi;
+ });
+ },
methods: {
getItemImg(item) {
return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`;
@@ -546,7 +567,6 @@
height: calc(100vh - 100px);
overflow: hidden;
}
-
.top-nav {
height: 5vh;
display: flex;
--
Gitblit v1.9.3