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/Dashboard.vue | 15 ++++++-
src/components/Header.vue | 2 +
src/views/Home.vue | 48 +++++++++++++++++-------
3 files changed, 48 insertions(+), 17 deletions(-)
diff --git a/src/Dashboard.vue b/src/Dashboard.vue
index c7a3d29..db1aa12 100644
--- a/src/Dashboard.vue
+++ b/src/Dashboard.vue
@@ -19,7 +19,13 @@
}"
>
<!--头部-->
- <app-header class="absolute z-[100] top-0 left-0 right-0" :selected-id="currentProjectId" @onHomeClick="switchView" @onSelectChange="onSelectChange" />
+ <app-header
+ class="absolute z-[100] top-0 left-0 right-0"
+ :selected-id="currentProjectId"
+ @onHomeClick="switchView"
+ @onSelectChange="onSelectChange"
+ @fullscreenChange="fullscreenChange"
+ />
<!--页面内容-->
<div class="content-wrapper px-[22px] py-[10px] absolute inset-0 top-[80px] flex gap-[20px]">
@@ -38,7 +44,7 @@
<div class="w-[1080px]">
<!-- 右侧模块 -->
<div class="w-full h-full">
- <Home v-if="isReady" :selected-id="selectedId" />
+ <Home v-if="isReady" :selected-id="selectedId" :is-full-screen="isFullScreen" />
</div>
</div>
</div>
@@ -90,6 +96,7 @@
clickTab: "home",
iframeSrc: window.ProjectConfig.xieTongIframeSrc,
selectedId: "",
+ isFullScreen: false,
};
},
computed: {
@@ -105,7 +112,9 @@
methods: {
onSelectChange(val) {
this.selectedId = val;
- console.log("onSelectChange", val);
+ },
+ fullscreenChange(val) {
+ this.isFullScreen = val;
},
/**
* 切换视图
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 979b004..0d724cd 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -102,7 +102,9 @@
handleFullscreen() {
if (this.$fullscreen.isFullscreen) {
this.$fullscreen.exit();
+ this.$emit("fullscreenChange", false);
} else {
+ this.$emit("fullscreenChange", true);
this.$fullscreen.request();
}
},
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