样式调整

gjj

2025-02-26 70bebe9dae89ebddd7e77543aac618e78d730fc9

 src/views/Home.vue

@@ -11,7 +11,7 @@
   <div class="time-info-item">
    <i class="el-icon-date" style="color: #FFBF00;font-size: 20px;"></i>
    <div class="text-white text-[16px] ml-[4px]">工程倒计时/天</div>
    <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">175</div>
    <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">{{endDate}}</div>
   </div>
   <div class="time-line">
   </div>
@@ -20,7 +20,7 @@
 <div class="bottom-nav">
  <div class="content-wrapper mb-[20px]">
   <!-- 720菜单 -->
   <div class="side-menu" v-if="currentView === '720'">
   <div class="side-menu z-[100]" v-if="currentView === '720'">
    <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange" :props="{ value: 'id',label: 'label',children: 'Children'}">
    </el-cascader>
   </div>
@@ -36,23 +36,23 @@
     <div id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''">
     </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 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 class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]" @click="panoPreview(panoObj, item)">
        <img :src="getItemImg(item)" alt="全景图" class="w-full h-full" />
       </div>
      </div>
     </div>
     </div>-->

     <!-- 放大镜 -->
     <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%]" v-if="currentView === '720'" @click="handleZoomOut">
      <img src="../assets/images/backgrounds/zoomout.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
      <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'">
     <iframe id="scene-iframe" class="scene-frame w-full h-full" src="" frameborder="0"></iframe>
      <iframe id="scene-iframe" frameborder='0' allowfullscreen class="scene-frame w-full h-full"></iframe>
    </div>
   </div>

@@ -83,7 +83,8 @@
} from "../api/home";
import {
 getProjectId,
 getToken
 getToken,
 getProjectEndDate
} from "../utils/getToken.js";
export default {
 name: 'Home',
@@ -142,8 +143,25 @@
   panoValue: [],
   backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
    import.meta.url).href,
   endDate: 0,
  }
 },
 watch: {
  projectEndDate:{
      deep: true,
      handler (newVal) {
        console.log('newVal', newVal)
      const date = new Date(newVal);
      // 获取当前日期作为Date对象
      const now = new Date();
      // 计算两个日期的差异（毫秒）
      const diffTime = Math.abs(now - date);
      // 将毫秒转换为天数
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
      this.endDate = diffDays
    }
  }
 }, 
 computed: {
  sectionStyle() {
   return {
@@ -152,10 +170,19 @@
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  },
  }, 
  projectId() {
   return getProjectId()
  },
  projectEndDate() {
    return getProjectEndDate()
  }
 },
 mounted() {
  setTimeout(() => {
    console.log('projectEndDate', getProjectEndDate())
    this.modelShow()
  }, 1000)
 },

 methods: {
@@ -186,6 +213,7 @@
    })
   } else if (view === 'project') {
    nextTick(() => {
      removepano('krpanoSWFObject')
     this.sceneShow()
    })
   }
@@ -210,7 +238,8 @@
   const projectId = this.projectId
   let ifrSrc = ''
   console.log('模型中查看')
   ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
  //  ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
   ifrSrc = window.ProjectConfig.modelUrl
   iframe.src = ifrSrc
   console.log('加载iframe地址', ifrSrc)
   this.isLoading = false
@@ -255,6 +284,7 @@
   })
  },
  panoPreview(item, scene) {
    removepano('krpanoSWFObject')
   const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
   const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
   let setting = {}
@@ -280,6 +310,7 @@
   let ifrSrc = ''
   ifrSrc = window.ProjectConfig.sceneUrl
   iframe.src = ifrSrc
   this.isLoading = false
  },
  mounted() {
   this.isLoading = true