fix: 修复el-scrollbar滑动问题

Gary Gu

6 days ago 4f759039c251fea61591a9bf7836d2c8b8993c0a

 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%;
  }
@@ -786,9 +803,8 @@
    }

    .el-scrollbar__wrap {
      overflow: hidden;
      margin-bottom: 0px !important;
      margin-right: 0px !important;
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }
</style>