From 4f759039c251fea61591a9bf7836d2c8b8993c0a Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Thu, 29 May 2025 15:48:54 +0800
Subject: [PATCH] fix: 修复el-scrollbar滑动问题
---
src/views/Home.vue | 66 +++++++++++++++-----------------
1 files changed, 31 insertions(+), 35 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5e01235..a192bb1 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%;
}
@@ -806,9 +803,8 @@
}
.el-scrollbar__wrap {
- overflow: hidden;
- margin-bottom: 0px !important;
- margin-right: 0px !important;
+ overflow-x: hidden;
+ overflow-y: scroll;
}
}
</style>
--
Gitblit v1.9.3