sb

src/views/PanoView.vue

@@ -44,19 +44,19 @@
         class="one btn-on-track"
         @click="showingContentIdx = 1"
       >
-        <span>整体设计与规划</span>
+        <span>{{ btnOnTrack1Name }}</span>
       </button>
       <button
         class="two btn-on-track"
         @click="showingContentIdx = 2"
       >
-        <span>营都人员与机构</span>
+        <span>{{ btnOnTrack2Name }}</span>
       </button>
       <button
         class="three btn-on-track"
         @click="showingContentIdx = 3"
       >
-        <span>史料中的元大都</span>
+        <span>{{ btnOnTrack3Name }}</span>
       </button>
       <button
         class="four btn-on-track"
@@ -73,7 +73,7 @@
     </div>
     <div class="camera-list">
       <button
-        v-for="(item, idx) in cameraList"
+        v-for="(item, idx) in currentCameraList"
         :key="idx"
         class="camera-entry"
         :class="{
@@ -150,30 +150,137 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-const btnOnTrack1ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.png`) + ')'
-const btnOnTrack1ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1-active.png`) + ')'
-const btnOnTrack2ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.png`) + ')'
-const btnOnTrack2ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2-active.png`) + ')'
-const btnOnTrack3ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.png`) + ')'
-const btnOnTrack3ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3-active.png`) + ')'
-const btnOnTrack4ImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-4.png`) + ')'
-const btnOnTrack4ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-4-active.png`) + ')'
+const sceneIdx = computed(() => {
+  return Number(route.query.sceneIdx)
+})
+const cameraIdx = computed(() => {
+  return Number(route.query.cameraIdx)
+})
 
 const isShowCameraDesc = ref(false)
 const isShowCharacterDesc = ref(false)
 const showingContentIdx = ref(0)
 
-const cameraList = ref([
+const sceneList = ref([
   {
-    name: '雄伟帝都',
+    sceneName: '大汗之城',
+    cameraList: [
+      {
+        name: '雄伟帝都',
+        contentPageBtnNameList: [
+          '整体设计与规划',
+          '营都人员与机构',
+          '史料中的元大都',
+        ],
+      },
+      {
+        name: '大都宫阙',
+        contentPageBtnNameList: [
+          '皇城与宫城',
+          '皇城内的建筑布局',
+          '忽必烈召见赵孟頫',
+        ],
+      },
+      {
+        name: '大都揽胜',
+        contentPageBtnNameList: [
+          '大都城内的寺庙建筑',
+          '大都城内的官署机构',
+          '重要建筑构件',
+        ],
+      },
+    ]
   },
   {
-    name: '大都宫阙',
+    sceneName: '河润大都',
+    cameraList: [
+      {
+        name: '通惠河畅',
+        contentPageBtnNameList: [
+          '大运河的历史演变',
+          '元大都用水水系',
+          '水利专家及对通惠河段的治理',
+        ],
+      },
+      {
+        name: '舳舻蔽水',
+        contentPageBtnNameList: [
+          '菏泽沉船',
+          '磁县漕船',
+          '聊城古船',
+        ],
+      },
+      {
+        name: '繁华富庶',
+        contentPageBtnNameList: [
+          '造福百姓',
+          '元代瓷器的发展',
+          ' 商品贸易中的货币',
+        ],
+      },
+    ]
   },
   {
-    name: '大都揽胜',
+    sceneName: '大都风华',
+    cameraList: [
+      {
+        name: '文人雅集',
+        contentPageBtnNameList: [
+          '元代文化艺术的发展',
+          '上流社会的雅集盛会',
+          '百工精巧',
+        ],
+      },
+      {
+        name: '曲苑杂剧',
+        contentPageBtnNameList: [
+          '元曲的文化成就',
+          '著名元曲作家与作品',
+          '表演元曲的著名演员',
+        ],
+      },
+    ]
   },
 ])
+const currentCameraList = computed(() => {
+  return sceneList.value[sceneIdx.value].cameraList
+})
+
+const btnOnTrack1ImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
+})
+const btnOnTrack1ActiveImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1-active.png`) + ')'
+})
+const btnOnTrack2ImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2.png`) + ')'
+})
+const btnOnTrack2ActiveImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2-active.png`) + ')'
+})
+const btnOnTrack3ImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3.png`) + ')'
+})
+const btnOnTrack3ActiveImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3-active.png`) + ')'
+})
+const btnOnTrack4ImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4.png`) + ')'
+})
+const btnOnTrack4ActiveImgUrl = computed(() => {
+  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4-active.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]
+})
+
 
 /**
  * 全景图
@@ -326,7 +433,9 @@ onBeforeRouteUpdate((to, from) => {
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
+      text-align: left;
       >span{
+        margin-left: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         display: none;
         font-size: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-family: Source Han Serif SC, Source Han Serif SC;