fix: hover out unseen content

README.md

@@ -1,15 +1,17 @@
 文件存放位置：阿里云 4d-tjw/project/yzdyh-dadu/
 
-访问测试url：https://houseoss.4dkankan.com/project/yzdyh-dadu/index.html#/
+访问测试 url：https://houseoss.4dkankan.com/project/yzdyh-dadu/index.html#/
 
 蓝湖：https://lanhuapp.com/web/#/item/project/stage?pid=8f984b4f-cfb3-48b9-b070-12d64d10acfd&image_id=a862d4c6-932c-4722-ba4e-492cf64d524a&tid=de3e5e3e-a489-4b19-862a-7c87ce113467
 
-全景图官方url：https://www.4dkankan.com/panorama/show.html?id=WK1730428603763576832&vr=fd720_kdDO8sPe6&lang=zh
+全景图官方 url：https://www.4dkankan.com/panorama/show.html?id=WK1730428603763576832&vr=fd720_64h5h2hzd&lang=zh
 
 # todo
+
 import ... from '/public/dsflksdfj/...' 这样没意义啊！
 
 ## 文物列表页
+
 级联菜单恢复
 
-滚动位置恢复
+滚动位置恢复

public/relic-data/data.json

@@ -188,7 +188,7 @@
  {
   "序号": 17,
   "场景": "曲苑",
-  "名称": "文王访贤”金带头",
+  "名称": "“文王访贤”金带头",
   "文物简介": "自带剧情的“文王访贤”金带头",
   "年份": "元",
   "详细描述": "<p>“文王访贤”金带头是一套金带的带头，呈“凸”字形，前端环扣、扣舌有残失。它由一块金片锤揲出高浮雕的人物故事图像作为纹饰，周边伴有菱形几何纹边框。有学者认为这刻画了周文王在渭水边初遇姜子牙的场面，因为《封神演义》“姜太公钓鱼，愿者上钩”而广为人知，秦腔戏剧《凤鸣岐山》、豫剧《姜子牙钓鱼》演绎的就是这段故事。<\/p>",

src/App.vue

@@ -345,17 +345,12 @@ provide('fakeBack', fakeBack)
 
 button.logo{
   position: absolute;
-  left: 50px;
-  top: 30px;
-  width: 252px;
-  height: 55px;
+  left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  width: calc(252 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   z-index: 9;
   >img{
-    position: absolute;
-    left: 0;
-    top: 0;
     width: 100%;
-    height: 100%;
   }
 }
 

src/components/CameraContent-1-2-1.vue

@@ -34,7 +34,7 @@
           }"
           @click="checkedHotspotIdx = 0"
           @mouseenter="displayingHotspotIdx = 0"
-          @mouseleave="displayingHotspotIdx = -1"
+          @mouseleave="displayingHotspotIdx = 4"
         >
           <div class="label">
             {{ layoutDataList[0].title }}
@@ -53,7 +53,7 @@
           }"
           @click="checkedHotspotIdx = 1"
           @mouseenter="displayingHotspotIdx = 1"
-          @mouseleave="displayingHotspotIdx = -1"
+          @mouseleave="displayingHotspotIdx = 4"
         >
           <div class="label">
             {{ layoutDataList[1].title }}
@@ -72,7 +72,7 @@
           }"
           @click="checkedHotspotIdx = 2"
           @mouseenter="displayingHotspotIdx = 2"
-          @mouseleave="displayingHotspotIdx = -1"
+          @mouseleave="displayingHotspotIdx = 4"
         >
           <div class="label">
             {{ layoutDataList[2].title }}
@@ -91,7 +91,7 @@
           }"
           @click="checkedHotspotIdx = 3"
           @mouseenter="displayingHotspotIdx = 3"
-          @mouseleave="displayingHotspotIdx = -1"
+          @mouseleave="displayingHotspotIdx = 4"
         >
           <div class="label">
             {{ layoutDataList[3].title }}
@@ -147,7 +147,7 @@ const layoutDataList = [
 const displayingHotspotIdx = ref(4)
 const checkedHotspotIdx = ref(-1)
 
-const hotspotIdx = computed(() => displayingHotspotIdx.value > - 1 ? displayingHotspotIdx.value : checkedHotspotIdx.value)
+const hotspotIdx = computed(() => displayingHotspotIdx.value !== 4 ? displayingHotspotIdx.value : checkedHotspotIdx.value)
 </script>
 
 <style lang="less" scoped>

src/components/CameraContent-1-3-2.vue

@@ -35,10 +35,10 @@
         <div
           class="desc"
         >
-          <h3>{{ layoutDataList[displayingHotspotIdx].title }}</h3>
+          <h3>{{ layoutDataList[hotspotIdx].title }}</h3>
           <div class="hotspot-detail">
             <p
-              v-for="(item, idx) in layoutDataList[displayingHotspotIdx].detail.split('\n')"
+              v-for="(item, idx) in layoutDataList[hotspotIdx].detail.split('\n')"
               :key="idx"
               class="text-indent"
             >
@@ -52,22 +52,15 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
+import { ref, computed } from "vue"
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 968)
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
 const emit = defineEmits(['close'])
 
-const currentSwitchIdx = ref(0)
-
 const title = computed(() => {
   return '大都城内的官署机构'
 })
@@ -100,8 +93,9 @@ const layoutDataList = [
 ]
 
 const displayingHotspotIdx = ref(0)
+const checkedHotspotIdx = ref(0)
 
-
+const hotspotIdx = computed(() => displayingHotspotIdx.value !== 0 ? displayingHotspotIdx.value : checkedHotspotIdx.value)
 </script>
 
 <style lang="less" scoped>

src/components/CameraContent-2-3-2.vue

@@ -152,7 +152,7 @@
             class="tab5img"
           >
           <p class="img-tips">
-            釉里红花卉纹玉壶春瓶
+            天蓝釉贴花兽面纹连座双耳瓶
           </p>
         </div>
       </div>

src/components/HotspotDialog-1.vue

@@ -698,7 +698,7 @@ const isHY = computed(() =>
 )
 // 雄伟帝都
 const isHYM = computed(() =>
-  ["_7TQihSnc", "_CigA1HhG"].includes(props.relicInfo.name)
+  ["_7TQihSnc", "_yMLQXAYT"].includes(props.relicInfo.name)
 )
 // 大都宫阙
 const isDDGQ = computed(() => ["_G9zT4Xx9"].includes(props.relicInfo.name))

src/main.js

@@ -12,9 +12,9 @@ import VueViewer from 'v-viewer'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'lib-flexible'
-import VConsole from 'vconsole'
+// import VConsole from 'vconsole'
 
-new VConsole()
+// new VConsole()
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)

src/views/EpilogueView.vue

@@ -68,13 +68,14 @@ const $isMobile = inject('$isMobile')
 const router = useRouter()
 const isShowVideo = ref(true)
 const stopBgAudio = inject('stopBgAudio')
+const homeUrl = location.origin + location.pathname
 
 onMounted(() => {
   stopBgAudio()
 })
 
 const imageUrl = ref('')
-QRCode.toDataURL(`${location.origin}/project/yzdyh-dadu/index.html`).then((url) => {
+QRCode.toDataURL(homeUrl).then((url) => {
   imageUrl.value = url
 })
 

src/views/PanoView.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="['pano-view', (msgVisible || isShowHotspotDetail2) && 'reduceZ']">
+  <div
+    :class="['pano-view', (msgVisible || isShowHotspotDetail2) && 'reduceZ']"
+    @click="handleClick"
+  >
     <button
       class="logo"
     >
@@ -419,6 +422,9 @@ const msgVisible = ref(false)
 const curMsgIndex = ref(0)
 const showGuide = ref(false)
 const showShipGame = ref(false)
+const showScreensaver = ref(false)
+let screensaverTime = 0
+let screensaverTimer = null
 
 const charactorSpeackPositionLeft = ref(false)
 
@@ -737,6 +743,8 @@ function skipCameraIntro(showAction) {
 }
 onUnmounted(() => {
   skipCameraIntro()
+
+  clearInterval(screensaverTimer)
 })
 onBeforeRouteUpdate(() => {
   skipCameraIntro(false)
@@ -916,7 +924,7 @@ const currentVr = computed(() => {
   case 0:
     switch (cameraIdx.value) {
     case 0:
-      return 'fd720_kdDO8sPe6'
+      return 'fd720_64h5h2hzd'
     case 1:
       return 'fd720_CKI5Ly4eo'
     default:
@@ -980,6 +988,9 @@ const hotspotIndex = ref(null)
 // window.addEventListener('message', (e) => {
 //   console.log('parent window: received message!', e)
 // })
+window.clearScreenSaver = () => {
+  screensaverTime = 0
+}
 window.showHotspotDetail2 = function(hotspotInfo) {
   console.log('parent window: 展示热点高亮')
   console.log(hotspotInfo)
@@ -1104,10 +1115,21 @@ onMounted(() => {
     store.commit('setPanoData', res)
     console.log('catalogTopology', store.getters.catalogTopology)
   })
+
+  screensaverTimer = setInterval(() => {
+    if (!showScreensaver.value && !isShowSceneIntroVideoStart.value) {
+      screensaverTime++
+      console.log(screensaverTime)
+    }
+  }, 1000)
 })
 /**
  * end of 获取全景图somedata.json并处理
  */
+
+const handleClick = () => {
+  screensaverTime = 0
+}
 </script>
 
 <style lang="less" scoped>

src/views/RelicList.vue

@@ -60,9 +60,8 @@
           <span
             class="name"
             :class="{
-              wide: item['名称'].length > 11,
+              wide: item['名称'].length > 9,
               smallFontSize: item['名称'].length > 18,
-              smFontSize: item['序号'] === 95
             }"
             :title="item['名称']"
             v-html="item['名称']"
@@ -480,6 +479,8 @@ const handleScroll = debounce(() => {
           line-height: 1.5em;
           background-image: url(@/assets/images/relic-item-title-bg-wide.png);
           padding-right: 0.7em;
+          padding-top: calc(26 / @page-height-design-px * 100vh * 0.83);
+          padding-bottom: calc(26 / @page-height-design-px * 100vh * 0.83);
           z-index: 1;
         }
         >.name.smallFontSize{

t.json

@@ -59,7 +59,7 @@
                         "frameWidth": 40
                     },
                     "size": 1,
-                    "name": "_CigA1HhG",
+                    "name": "_yMLQXAYT",
                     "fontSize": 12,
                     "hotspotTitle": "内城门"
                 },
@@ -179,7 +179,7 @@
                 }
             ]
         },
-        "sceneCode": "fd720_kdDO8sPe6",
+        "sceneCode": "fd720_64h5h2hzd",
         "materialType": "pano",
         "icon": "https://4dkk.4dage.com/720yun_fd_manage/image/20231206_101651994.jpg?d=1701829012058",
         "weight": 1,
@@ -1281,7 +1281,7 @@
                             "frameWidth": 40
                         },
                         "size": 1,
-                        "name": "_CigA1HhG",
+                        "name": "_yMLQXAYT",
                         "fontSize": 12,
                         "hotspotTitle": "内城门"
                     },
@@ -1401,7 +1401,7 @@
                     }
                 ]
             },
-            "sceneCode": "fd720_kdDO8sPe6",
+            "sceneCode": "fd720_64h5h2hzd",
             "materialType": "pano",
             "icon": "https://4dkk.4dage.com/720yun_fd_manage/image/20231206_101651994.jpg?d=1701829012058",
             "weight": 1,