fix: 优化实况UI放大缩小

Gary Gu

5 days ago a3e27f5cab583debe11a9c62d8cc0115783b0791

 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;