| | |
| | | </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;' : ''"> |
| | |
| | | </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> |
| | |
| | | isFullScreen: false, |
| | | fullScreenStyle: '', |
| | | fullScreenPanoStyle: '', |
| | | fullScreenModelStyle: '', |
| | | panoList: [{ |
| | | value: 'zhinan', |
| | | label: '指南', |
| | |
| | | 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.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;` |
| | | if (this.currentView === '720') { |
| | | this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; ` |
| | | } 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 |
| | |
| | | display: flex; |
| | | overflow: hidden; |
| | | position: relative; |
| | | height: 52%; |
| | | height: 98%; |
| | | } |
| | | |
| | | .chart-content { |