全景页各图片适配不同场景，等等

README.md

@@ -1,4 +1,7 @@
 ## 部署测试环境
 文件存放位置：
 
-访问url：
+访问url：
+
+## todo
+import ... from '/public/dsflksdfj/...' 这样没意义吧？

src/assets/images/大都：元代北京城_files/iconfont.css

@@ -1,483 +0,0 @@
-@font-face {
-  font-family: "iconfont"; /* Project id 2947721 */
-  src: url('iconfont.woff2?t=1647573254226') format('woff2'),
-       url('iconfont.woff?t=1647573254226') format('woff'),
-       url('iconfont.ttf?t=1647573254226') format('truetype');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.iconshow_more_finish:before {
-  content: "\e67a";
-}
-
-.iconshow_more_music:before {
-  content: "\e67c";
-}
-
-.iconshow_more:before {
-  content: "\e67e";
-}
-
-.iconshow_more_vr:before {
-  content: "\e67f";
-}
-
-.icontop:before {
-  content: "\e6f3";
-}
-
-.iconeditor_play:before {
-  content: "\e6ef";
-}
-
-.iconeditor_3d:before {
-  content: "\e6f0";
-}
-
-.iconeditor_update:before {
-  content: "\e6f1";
-}
-
-.iconeditor_list_delete:before {
-  content: "\e6f2";
-}
-
-.iconmaterial_panoramic_picture:before {
-  content: "\e6e8";
-}
-
-.iconmaterial_preview_upload:before {
-  content: "\e6e9";
-}
-
-.icontoast_yellow:before {
-  content: "\e6ea";
-}
-
-.iconworks_search:before {
-  content: "\e6eb";
-}
-
-.iconworks_share:before {
-  content: "\e6ec";
-}
-
-.iconworks_look:before {
-  content: "\e6ed";
-}
-
-.iconworks_delete:before {
-  content: "\e6ee";
-}
-
-.iconeditor_folder_off:before {
-  content: "\e6c5";
-}
-
-.iconeditor_folder_on:before {
-  content: "\e6c6";
-}
-
-.iconeditor_add:before {
-  content: "\e6c7";
-}
-
-.iconeditor_hot_add:before {
-  content: "\e6c8";
-}
-
-.iconeditor_off:before {
-  content: "\e6c9";
-}
-
-.iconeditor_list_add:before {
-  content: "\e6ca";
-}
-
-.iconeditor_on:before {
-  content: "\e6cb";
-}
-
-.iconeditor_playback:before {
-  content: "\e6cc";
-}
-
-.iconeditor_list_edit:before {
-  content: "\e6cd";
-}
-
-.iconmaterial_image:before {
-  content: "\e6ce";
-}
-
-.iconmaterial_music:before {
-  content: "\e6cf";
-}
-
-.iconeditor_panoramic:before {
-  content: "\e6d0";
-}
-
-.iconeditor_list_image:before {
-  content: "\e6d1";
-}
-
-.iconmaterial_preview_drop_out:before {
-  content: "\e6d2";
-}
-
-.iconeditor_preview:before {
-  content: "\e6d3";
-}
-
-.iconeditor_search:before {
-  content: "\e6d4";
-}
-
-.iconmaterial_operation_delete:before {
-  content: "\e6d5";
-}
-
-.iconmaterial_operation_editor:before {
-  content: "\e6d6";
-}
-
-.iconeditor_return:before {
-  content: "\e6d7";
-}
-
-.iconmaterial_preview_full_screen:before {
-  content: "\e6d8";
-}
-
-.iconmaterial_preview_enlarge:before {
-  content: "\e6d9";
-}
-
-.iconeditor_save:before {
-  content: "\e6da";
-}
-
-.iconmaterial_preview_next1:before {
-  content: "\e6db";
-}
-
-.iconmaterial_preview_next:before {
-  content: "\e6dc";
-}
-
-.iconmaterial_preview_narrow:before {
-  content: "\e6dd";
-}
-
-.iconmaterial_preview_previous:before {
-  content: "\e6de";
-}
-
-.iconmaterial_operation_image:before {
-  content: "\e6df";
-}
-
-.iconmaterial_video:before {
-  content: "\e6e0";
-}
-
-.iconmaterial_preview_upload_collect:before {
-  content: "\e6e1";
-}
-
-.iconpop-ups_shut-down:before {
-  content: "\e6e2";
-}
-
-.icontoast_green:before {
-  content: "\e6e3";
-}
-
-.icontoast_red:before {
-  content: "\e6e4";
-}
-
-.iconworks_editor:before {
-  content: "\e6e5";
-}
-
-.iconpop-ups_crop:before {
-  content: "\e6e6";
-}
-
-.iconmaterial_prompt:before {
-  content: "\e6e7";
-}
-
-.iconbs_close:before {
-  content: "\e74c";
-}
-
-.iconbs_folder:before {
-  content: "\e74d";
-}
-
-.iconbs_list_menu:before {
-  content: "\e74e";
-}
-
-.iconbs_list_edit:before {
-  content: "\e74f";
-}
-
-.iconbs_list_info:before {
-  content: "\e750";
-}
-
-.iconbs_list_play:before {
-  content: "\e751";
-}
-
-.iconbs_list_stop:before {
-  content: "\e752";
-}
-
-.iconbs_plus:before {
-  content: "\e753";
-}
-
-.iconbs_reduce:before {
-  content: "\e754";
-}
-
-.iconbs_next:before {
-  content: "\e755";
-}
-
-.iconbs_nav_panorama:before {
-  content: "\e756";
-}
-
-.iconbs_upload:before {
-  content: "\e757";
-}
-
-.iconbs_search:before {
-  content: "\e758";
-}
-
-.iconbs_nav_photo:before {
-  content: "\e759";
-}
-
-.iconbs_nav_video:before {
-  content: "\e75a";
-}
-
-.iconedit_add:before {
-  content: "\e75b";
-}
-
-.iconbs_nav_sound:before {
-  content: "\e75c";
-}
-
-.iconedit_input_arrow:before {
-  content: "\e75d";
-}
-
-.iconedit_close:before {
-  content: "\e75e";
-}
-
-.iconedit_case_delete:before {
-  content: "\e75f";
-}
-
-.iconbs_share:before {
-  content: "\e760";
-}
-
-.iconedit_input_unvisible:before {
-  content: "\e761";
-}
-
-.iconedit_input_visible:before {
-  content: "\e762";
-}
-
-.iconedit_list_more:before {
-  content: "\e763";
-}
-
-.iconedit_list_default:before {
-  content: "\e764";
-}
-
-.iconedit_nav_hotpoint:before {
-  content: "\e765";
-}
-
-.iconedit_nav_base:before {
-  content: "\e766";
-}
-
-.iconedit_next:before {
-  content: "\e767";
-}
-
-.iconedit_jumpsview:before {
-  content: "\e768";
-}
-
-.iconedit_pre:before {
-  content: "\e769";
-}
-
-.iconedit_linkview:before {
-  content: "\e76a";
-}
-
-.iconedit_select:before {
-  content: "\e76b";
-}
-
-.iconedit_nav_scenenav:before {
-  content: "\e76c";
-}
-
-.iconedit_soundview:before {
-  content: "\e76d";
-}
-
-.iconedit_photoview:before {
-  content: "\e76e";
-}
-
-.iconedit_search:before {
-  content: "\e76f";
-}
-
-.iconedit_textview:before {
-  content: "\e770";
-}
-
-.iconedit_nav_screen:before {
-  content: "\e771";
-}
-
-.iconedit_type_3d:before {
-  content: "\e772";
-}
-
-.iconedit_top_save:before {
-  content: "\e773";
-}
-
-.iconedit_type_panorama:before {
-  content: "\e774";
-}
-
-.iconedit_top_view:before {
-  content: "\e775";
-}
-
-.iconedit_videoview:before {
-  content: "\e776";
-}
-
-.iconlist_views:before {
-  content: "\e777";
-}
-
-.iconnav_scene_down:before {
-  content: "\e778";
-}
-
-.icontool_about:before {
-  content: "\e779";
-}
-
-.iconnav_scene_up:before {
-  content: "\e77a";
-}
-
-.icontool_vr:before {
-  content: "\e77b";
-}
-
-.icontool_window:before {
-  content: "\e77c";
-}
-
-.icontool_full:before {
-  content: "\e77d";
-}
-
-.iconimg_logo:before {
-  content: "\e77e";
-}
-
-.iconbs_list_cover:before {
-  content: "\e77f";
-}
-
-.iconlist_delete:before {
-  content: "\e780";
-}
-
-.iconbs_stop:before {
-  content: "\e781";
-}
-
-.iconbs_play:before {
-  content: "\e782";
-}
-
-.iconbs_list_circle:before {
-  content: "\e783";
-}
-
-.iconshow_playback:before {
-  content: "\e681";
-}
-
-.iconshow_suspension:before {
-  content: "\e683";
-}
-
-.iconshow_3d_normal:before {
-  content: "\e677";
-}
-
-.iconshow_plane_normal:before {
-  content: "\e67d";
-}
-
-.iconshow_roaming_selected:before {
-  content: "\e682";
-}
-
-.iconshow_plane_selected:before {
-  content: "\e684";
-}
-
-.iconshow_3d_selected:before {
-  content: "\e685";
-}
-
-.iconshow_roaming_normal:before {
-  content: "\e686";
-}
-
-.iconshow_function_collect:before {
-  content: "\e687";
-}
-
-.iconshow_drop-down:before {
-  content: "\e673";
-}
-

src/assets/images/大都：元代北京城_files/perfect-scrollbar.css

@@ -1,114 +0,0 @@
-/*
- * Container style
- */
- .ps {
-    overflow: hidden !important;
-    overflow-anchor: none;
-    -ms-overflow-style: none;
-    touch-action: auto;
-    -ms-touch-action: auto;
-  }
-  
-  /*
-   * Scrollbar rail styles
-   */
-  .ps__rail-x {
-    display: none;
-    opacity: 0;
-    transition: background-color .2s linear, opacity .2s linear;
-    -webkit-transition: background-color .2s linear, opacity .2s linear;
-    height: 6px;
-    /* there must be 'bottom' or 'top' for ps__rail-x */
-    bottom: 0px;
-    /* please don't change 'position' */
-    position: absolute;
-  }
-  
-  .ps__rail-y {
-    display: none;
-    opacity: 0;
-    transition: background-color .2s linear, opacity .2s linear;
-    -webkit-transition: background-color .2s linear, opacity .2s linear;
-    width: 6px;
-    /* there must be 'right' or 'left' for ps__rail-y */
-    right: 0;
-    /* please don't change 'position' */
-    position: absolute;
-  }
-  
-  .ps--active-x > .ps__rail-x,
-  .ps--active-y > .ps__rail-y {
-    display: block;
-    opacity: 0.75;
-  }
-  
-  .ps:hover > .ps__rail-x,
-  .ps:hover > .ps__rail-y,
-  .ps--focus > .ps__rail-x,
-  .ps--focus > .ps__rail-y,
-  .ps--scrolling-x > .ps__rail-x,
-  .ps--scrolling-y > .ps__rail-y {
-    opacity: 0.85;
-  }
-  
-  .ps .ps__rail-x:hover,
-  .ps .ps__rail-y:hover,
-  .ps .ps__rail-x:focus,
-  .ps .ps__rail-y:focus,
-  .ps .ps__rail-x.ps--clicking,
-  .ps .ps__rail-y.ps--clicking {
-    opacity: 0.9;
-  }
-  
-  /*
-   * Scrollbar thumb styles
-   */
-  .ps__thumb-x {
-    background-color: rgb(98, 102, 102);
-    border-radius: 6px;
-    transition: background-color .2s linear, height .2s ease-in-out;
-    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
-    height: 6px;
-    /* there must be 'bottom' for ps__thumb-x */
-    bottom: 0px;
-    /* please don't change 'position' */
-    position: absolute;
-  
-  }
-  
-  .ps__thumb-y {
-    background-color: rgb(98, 102, 102);
-    border-radius: 6px;
-    transition: background-color .2s linear, width .2s ease-in-out;
-    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
-    width: 6px;
-    /* there must be 'right' for ps__thumb-y */
-    right: 0px;
-    /* please don't change 'position' */
-    position: absolute;
-  }
-  
-  .ps__rail-x:hover > .ps__thumb-x,
-  .ps__rail-x:focus > .ps__thumb-x,
-  .ps__rail-x.ps--clicking .ps__thumb-x {
-    background-color: rgb(153,153,153);
-  }
-  
-  .ps__rail-y:hover > .ps__thumb-y,
-  .ps__rail-y:focus > .ps__thumb-y,
-  .ps__rail-y.ps--clicking .ps__thumb-y {
-    background-color: rgb(153,153,153);
-  }
-  
-  /* MS supports */
-  @supports (-ms-overflow-style: none) {
-    .ps {
-      overflow: auto !important;
-    }
-  }
-  
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .ps {
-      overflow: auto !important;
-    }
-  }

src/views/HomeView.vue

@@ -247,7 +247,7 @@ function onClickLogo() {
   >.btn-group{
     position: absolute;
     width: 100%;
-    bottom: 100px;
+    bottom: 50px;
     display: flex;
     >button.scene-entry.entry-1{
       position: absolute;

src/views/PanoView.vue

@@ -65,7 +65,7 @@
       </div>
       <img
         class="btn-track"
-        src="@/assets/images/people-btn-track.png"
+        :src="require(`@/assets/images/people-btn-track-${sceneIdx + 1}.png`)"
         alt=""
         draggable="false"
       >
@@ -106,10 +106,10 @@
         :key="idx"
         class="camera-entry"
         :class="{
-          active: idx === activeCameraIdx
+          active: idx === (mouseEnterCameraItemIdx === -1 ? cameraIdx : mouseEnterCameraItemIdx)
         }"
-        @mouseenter="activeCameraIdx = idx"
-        @mouseleave="activeCameraIdx = sceneIdx"
+        @mouseenter="mouseEnterCameraItemIdx = idx"
+        @mouseleave="mouseEnterCameraItemIdx = -1"
         @click="router.push({
           name: route.name,
           query:{
@@ -121,18 +121,21 @@
         <span>{{ item.name }}</span>
         <img
           class="bg-normal"
-          src="@/assets/images/camera-list-item-bg.png"
+          :src="require(`@/assets/images/camera-list-item-bg-${sceneIdx + 1}.png`)"
           alt=""
           draggable="false"
         >
         <img
           class="bg-active"
-          src="@/assets/images/camera-list-item-bg-active.png"
+          :src="require(`@/assets/images/camera-list-item-bg-active-${sceneIdx + 1}.png`)"
           alt=""
           draggable="false"
         >
       </button>
-      <button class="next-camera" />
+      <button
+        class="next-camera"
+        @click="onClickNextCamera"
+      />
     </div>
     <CameraContent1
       v-if="showingContentIdx === 1"
@@ -160,6 +163,53 @@ import * as krfn from "@/libs/pano-core/index.js"
 import CameraDesc from '@/components/CameraDesc.vue'
 import CharacterDesc from '@/components/CharacterDesc.vue'
 import { defineAsyncComponent } from 'vue'
+import sceneTree from '/public/sceneTree.js'
+
+const btnReturnHomeImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-${sceneIdx.value + 1}.png`) + ')'
+})
+const btnReturnHomeActiveImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-active-${sceneIdx.value + 1}.png`) + ')'
+})
+
+const btnOnTrack1ImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
+})
+const btnOnTrack1ActiveImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1-active.png`) + ')'
+})
+const btnOnTrack2ImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2.png`) + ')'
+})
+const btnOnTrack2ActiveImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2-active.png`) + ')'
+})
+const btnOnTrack3ImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3.png`) + ')'
+})
+const btnOnTrack3ActiveImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3-active.png`) + ')'
+})
+const btnOnTrack4ImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4.png`) + ')'
+})
+const btnOnTrack4ActiveImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4-active.png`) + ')'
+})
+
+const cameraListBgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-list-bg-${sceneIdx.value + 1}.png`) + ')'
+})
+
+const btnOnTrack1Name = computed(() => {
+  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[0]
+})
+const btnOnTrack2Name = computed(() => {
+  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[1]
+})
+const btnOnTrack3Name = computed(() => {
+  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[2]
+})
 
 const CameraContent1 = defineAsyncComponent(() =>
   import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
@@ -171,7 +221,6 @@ const CameraContent3 = defineAsyncComponent(() =>
   import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
 )
 
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -219,131 +268,21 @@ function onClickCharacter() {
   }
 }
 
-const sceneList = ref([
-  {
-    sceneName: '大汗之城',
-    cameraList: [
-      {
-        name: '雄伟帝都',
-        // panoCode: 'WK1730511898643845120',
-        panoCode: 'WK1730428603763576832',
-        contentPageBtnNameList: [
-          '整体设计与规划',
-          '营都人员与机构',
-          '史料中的元大都',
-        ],
-      },
-      {
-        name: '大都宫阙',
-        panoCode: 'WK1730165377477955584',
-        contentPageBtnNameList: [
-          '皇城与宫城',
-          '皇城内的建筑布局',
-          '忽必烈召见赵孟頫',
-        ],
-      },
-      {
-        name: '大都览胜',
-        panoCode: 'WK1730164600466362368',
-        contentPageBtnNameList: [
-          '大都城内的寺庙建筑',
-          '大都城内的官署机构',
-          '重要建筑构件',
-        ],
-      },
-    ]
-  },
-  {
-    sceneName: '河润大都',
-    cameraList: [
-      {
-        name: '通惠河畅',
-        contentPageBtnNameList: [
-          '大运河的历史演变',
-          '元大都用水水系',
-          '水利专家及对通惠河段的治理',
-        ],
-      },
-      {
-        name: '舳舻蔽水',
-        contentPageBtnNameList: [
-          '菏泽沉船',
-          '磁县漕船',
-          '聊城古船',
-        ],
-      },
-      {
-        name: '繁华富庶',
-        contentPageBtnNameList: [
-          '造福百姓',
-          '元代瓷器的发展',
-          ' 商品贸易中的货币',
-        ],
-      },
-    ]
-  },
-  {
-    sceneName: '大都风华',
-    cameraList: [
-      {
-        name: '文人雅集',
-        contentPageBtnNameList: [
-          '元代文化艺术的发展',
-          '上流社会的雅集盛会',
-          '百工精巧',
-        ],
-      },
-      {
-        name: '曲苑杂剧',
-        contentPageBtnNameList: [
-          '元曲的文化成就',
-          '著名元曲作家与作品',
-          '表演元曲的著名演员',
-        ],
-      },
-    ]
-  },
-])
 const currentCameraList = computed(() => {
-  return sceneList.value[sceneIdx.value].cameraList
-})
-const activeCameraIdx = ref(sceneIdx.value)
-
-const btnOnTrack1ImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
-})
-const btnOnTrack1ActiveImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1-active.png`) + ')'
-})
-const btnOnTrack2ImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2.png`) + ')'
-})
-const btnOnTrack2ActiveImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2-active.png`) + ')'
-})
-const btnOnTrack3ImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3.png`) + ')'
-})
-const btnOnTrack3ActiveImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3-active.png`) + ')'
-})
-const btnOnTrack4ImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4.png`) + ')'
-})
-const btnOnTrack4ActiveImgUrl = computed(() => {
-  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4-active.png`) + ')'
+  return sceneTree[sceneIdx.value].cameraList
 })
 
-const btnOnTrack1Name = computed(() => {
-  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[0]
-})
-const btnOnTrack2Name = computed(() => {
-  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[1]
-})
-const btnOnTrack3Name = computed(() => {
-  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[2]
-})
+const mouseEnterCameraItemIdx = ref(-1)
 
+function onClickNextCamera() {
+  router.push({
+    name: route.name,
+    query: {
+      sceneIdx: sceneIdx.value + 1,
+      cameraIdx: cameraIdx.value,
+    }
+  })
+}
 
 /**
  * 全景图
@@ -481,9 +420,9 @@ onMounted(() => {
 
 onBeforeRouteUpdate((to, from) => {
   console.log('to: ', to)
-  if (to.name === route.name) {
-    loadScene(Number(to.query.sceneIdx), Number(to.query.cameraIdx))
-  }
+  // if (to.name === route.name) {
+  //   loadScene(Number(to.query.sceneIdx), Number(to.query.cameraIdx))
+  // }
 })
 </script>
 
@@ -507,12 +446,12 @@ onBeforeRouteUpdate((to, from) => {
     height: 77px;
     top: 43px;
     right: 51px;
-    background-image: url(@/assets/images/btn-return-home.png);
+    background-image: v-bind(btnReturnHomeImgUrl);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     &:hover{
-      background-image: url(@/assets/images/btn-return-home-active.png);
+      background-image: v-bind(btnReturnHomeActiveImgUrl);
     }
   }
   >.camera-desc{
@@ -679,7 +618,7 @@ onBeforeRouteUpdate((to, from) => {
     right: 0;
     width: calc(1346 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(161 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    background-image: url(@/assets/images/camera-list-bg.png);
+    background-image: v-bind(cameraListBgUrl);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;