From 239933482fd30e099ab9d038bc1a2e0164a65cb4 Mon Sep 17 00:00:00 2001 From: gjj <Ganjj@probim.com.cn> Date: Mon, 17 Mar 2025 14:41:10 +0800 Subject: [PATCH] 增加标段筛选和接口字段,调整样式,增加全局放大 --- src/views/Home.vue | 34 ++++++++++++++++++---------------- 1 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index ce401b6..b44eb36 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -26,15 +26,12 @@ </div> <!-- 主要内容区域 --> - <div class="main-content" v-loading="isLoading"> - <!-- 模型 --> - <div class="w-full h-full" v-if="currentView === 'model'"> - <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0"></iframe> - </div> - <!-- 720 --> - <div :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720'"> - <div id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''"> - </div> + <div class="main-content" :style="isFullScreen ? fullScreenStyle : ''" v-loading="isLoading"> + <!-- 模型 / 720 --> + <div class="w-full h-full" :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720' || currentView === 'model'"> + <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0" :style="isFullScreen ? fullScreenModelStyle : ''" v-if="currentView === 'model'"></iframe> + <div id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''" v-if="currentView === '720'"></div> + </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;' : ''"> @@ -45,7 +42,7 @@ </div>--> <!-- 放大镜 --> - <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%]" v-if="currentView === '720'" @click="handleZoomOut"> + <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%] z-[100]" v-if="currentView === 'model' || currentView === '720'" @click="handleZoomOut"> <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> @@ -107,6 +104,7 @@ isFullScreen: false, fullScreenStyle: '', fullScreenPanoStyle: '', + fullScreenModelStyle: '', panoList: [{ value: 'zhinan', label: '指南', @@ -193,11 +191,15 @@ console.log('放大') this.isFullScreen = !this.isFullScreen if (this.isFullScreen) { - const clientX = document.documentElement.clientWidth || document.body.clientWidth - const clientY = document.documentElement.clientHeight || document.body.clientHeight - this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; ` - this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;` - } + const clientX = document.documentElement.clientWidth || document.body.clientWidth + const clientY = document.documentElement.clientHeight || document.body.clientHeight + this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; ` + if (this.currentView === '720') { + this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;` + } else if(this.currentView === 'model'){ + this.fullScreenModelStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;` + } + } }, handleChange(view) { this.isLoading = true @@ -382,7 +384,7 @@ display: flex; overflow: hidden; position: relative; - height: 52%; + height: 98%; } .chart-content { -- Gitblit v1.9.3