场景1-镜头1-内容1

src/api.js

@@ -18,7 +18,7 @@ export default {
   async fetchPanoData() {
     const res = await axios({
       method: 'get',
-      url: `http://yuhuatai.4dage.com/YHT/Qjkk/local/WK1578926366500417536/someData.json?_=${Math.random()}`,
+      url: `https://4dkk.4dage.com/720yun_fd_manage/WK1729684587681992704/someData.json?_=${Math.random()}`,
     })
     console.log('fetch pano data: ', res.data)
 

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

@@ -0,0 +1,45 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['close'])
+
+</script>
+
+<style lang="less" scoped>
+.camera-content-1-1{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(60px);
+  >button.return{
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 42px;
+    top: 68px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['close'])
+
+</script>
+
+<style lang="less" scoped>
+.camera-content-1-1{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(60px);
+  >button.return{
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 42px;
+    top: 68px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>

src/components/CameraContent-1-2.vue

@@ -0,0 +1 @@
+

src/components/CameraContent-1-3.vue

@@ -0,0 +1 @@
+

src/components/CameraContent-2-1.vue

@@ -0,0 +1 @@
+

src/components/CameraContent-2-2.vue

@@ -0,0 +1 @@
+

src/components/CameraContent-2-3.vue

@@ -0,0 +1 @@
+

src/components/CameraContent-3-1.vue

@@ -0,0 +1 @@
+

src/components/CameraContent-3-2.vue

@@ -0,0 +1 @@
+

src/components/CameraDesc.vue

@@ -23,7 +23,7 @@ import { useStore } from "vuex"
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+} = useSizeAdapt(1920, 970)
 
 const emit = defineEmits(['close'])
 
@@ -67,6 +67,10 @@ const store = useStore()
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center center;
+      font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Serif CN, Source Han Serif CN;
+      font-weight: 800;
+      color: #C69E50;
     }
     >.desc{
       margin-top: calc(210 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -76,7 +80,6 @@ const store = useStore()
       margin-right: auto;
       font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-family: Source Han Serif SC, Source Han Serif SC;
-      font-weight: 600;
       color: #4A350E;
       line-height: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       letter-spacing: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/views/PanoView.vue

@@ -25,7 +25,7 @@
         class="name"
         @click="isShowCharacterDesc = true"
       >
-        <span>金二胖</span>
+        <span>趙孟頫</span>
       </button>
       <img
         class="character"
@@ -42,18 +42,21 @@
       >
       <button
         class="one btn-on-track"
+        @click="showingContentIdx = 1"
       >
-        <span>雄伟帝都</span>
+        <span>整体设计与规划</span>
       </button>
       <button
         class="two btn-on-track"
+        @click="showingContentIdx = 2"
       >
-        <span>雄伟帝都</span>
+        <span>营都人员与机构</span>
       </button>
       <button
         class="three btn-on-track"
+        @click="showingContentIdx = 3"
       >
-        <span>雄伟帝都</span>
+        <span>史料中的元大都</span>
       </button>
       <button
         class="four btn-on-track"
@@ -65,7 +68,7 @@
           }
         })"
       >
-        <span>雄伟帝都</span>
+        <span>文物长卷</span>
       </button>
     </div>
     <div class="camera-list">
@@ -100,6 +103,21 @@
       </button>
       <button class="next-camera" />
     </div>
+    <CameraContent1
+      v-if="showingContentIdx === 1"
+      class="camera-content"
+      @close="showingContentIdx = 0"
+    />
+    <CameraContent2
+      v-if="showingContentIdx === 2"
+      class="camera-content"
+      @close="showingContentIdx = 0"
+    />
+    <CameraContent3
+      v-if="showingContentIdx === 3"
+      class="camera-content"
+      @close="showingContentIdx = 0"
+    />
   </div>
 </template>
 
@@ -110,6 +128,18 @@ import { useStore } from "vuex"
 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'
+
+const CameraContent1 = defineAsyncComponent(() =>
+  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
+)
+const CameraContent2 = defineAsyncComponent(() =>
+  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.vue`)
+)
+const CameraContent3 = defineAsyncComponent(() =>
+  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
+)
+
 
 const {
   windowSizeInCssForRef,
@@ -131,6 +161,7 @@ const btnOnTrack4ActiveImgUrl = 'url(' + require(`@/assets/images/camera-btn-${N
 
 const isShowCameraDesc = ref(false)
 const isShowCharacterDesc = ref(false)
+const showingContentIdx = ref(0)
 
 const cameraList = ref([
   {
@@ -181,7 +212,7 @@ function loadScene(sceneIdx, cameraIdx) {
   removepano("#pano")
   // eslint-disable-next-line no-undef
   embedpano({
-    xml: `http://yuhuatai.4dage.com/YHT/Qjkk/local/pano/${scene.sceneCode}/vtour/tour.xml`,
+    xml: `https://4dkk.4dage.com/720yun_fd_manage/WK1729684587681992704/tour.xml`,
     swf: `${process.env.BASE_URL}static/template/tour.swf`, // 文件名tour.swf没看出来有啥作用，不写也行。但它的路径决定了 %SWFPATH% 的值。
     target: "pano",
     html5: "auto",
@@ -414,5 +445,8 @@ onBeforeRouteUpdate((to, from) => {
       height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
+  >.camera-content{
+    z-index: 10;
+  }
 }
 </style>

src/views/RelicList.vue

@@ -34,73 +34,12 @@
         ref="listEl"
         class="content-wrap"
       >
-        <div class="relic-item">
-          <img
-            class=""
-            src="@/assets/images/camera-btn-1-1-3.png"
-            alt=""
-            draggable="false"
-          >
-          <div class="name">
-            开始发力开始
-          </div>
-        </div>
-        <div class="relic-item">
-          <img
-            class=""
-            src="@/assets/images/camera-btn-1-1-3.png"
-            alt=""
-            draggable="false"
-          >
-          <div class="name">
-            开始发力开始
-          </div>
-        </div>
-        <div class="relic-item">
-          <img
-            class=""
-            src="@/assets/images/camera-btn-1-1-3.png"
-            alt=""
-            draggable="false"
-          >
-          <div class="name">
-            开始发力开始
-          </div>
-        </div>
-        <div class="relic-item">
-          <img
-            class=""
-            src="@/assets/images/camera-btn-1-1-3.png"
-            alt=""
-            draggable="false"
-          >
-          <div class="name">
-            开始发力开始
-          </div>
-        </div>
-        <div class="relic-item">
-          <img
-            class=""
-            src="@/assets/images/camera-btn-1-1-3.png"
-            alt=""
-            draggable="false"
-          >
-          <div class="name">
-            开始发力开始
-          </div>
-        </div>
-        <div class="relic-item">
-          <img
-            class=""
-            src="@/assets/images/camera-btn-1-1-3.png"
-            alt=""
-            draggable="false"
-          >
-          <div class="name">
-            开始发力开始
-          </div>
-        </div>
-        <div class="relic-item">
+        <div
+          v-for="idx in 10"
+          :key="idx"
+          class="relic-item"
+          @click="onClickItem()"
+        >
           <img
             class=""
             src="@/assets/images/camera-btn-1-1-3.png"
@@ -117,6 +56,9 @@
 </template>
 
 <script setup>
+/**
+ * todo: 自动恢复上次滚动位置
+ */
 import { ref, computed, watch, watchEffect, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
@@ -129,7 +71,6 @@ const store = useStore()
 
 const keyword = ref('')
 function onSearch() {
-
 }
 
 const sceneIdx = computed(() => {
@@ -146,9 +87,16 @@ const { hasOperatedThisTime } = useSmoothSwipe({
   viewportWidth: listWidth,
 })
 
-function onClick(e) {
+function onClickItem(idx) {
   if (!hasOperatedThisTime.value) {
-    console.log('button click!')
+    router.push({
+      name: 'RelicDetail',
+      query: {
+        sceneIdx: route.query.sceneIdx,
+        cameraIdx: route.query.cameraIdx,
+        relicIdx: idx,
+      }
+    })
   }
 }
 </script>
@@ -157,6 +105,10 @@ function onClick(e) {
 @page-height-design-px: 970;
 .relic-list{
   height: 100%;
+  background-image: url(@/assets/images/relic-list-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
   >button.return{
     position: absolute;
     width: 58px;
@@ -272,11 +224,11 @@ function onClick(e) {
     top: 150px;
     width: 100%;
     height: calc(650 / @page-height-design-px * 100vh);
-    background-image: url(@/assets/images/relic-list-bg.png);
+    background-image: url(@/assets/images/relic-list-bg-1.png);
     background-size: auto 100%;
     background-repeat: no-repeat;
     background-position: left center;
-    padding-left: calc(64 / @page-height-design-px * 100vh);
+    padding-left: calc(56 / @page-height-design-px * 100vh);
     box-sizing: border-box;
     >.content-wrap{
       &::-webkit-scrollbar { height: 0; }
@@ -287,6 +239,11 @@ function onClick(e) {
       user-select: none;
       display: flex;
       align-items: center;
+      background-image: url(@/assets/images/relic-list-bg-2.jpg);
+      background-size: auto 92%;
+      background-repeat: repeat no-repeat;
+      background-position: left 44%;
+      background-attachment: local;
       >.relic-item{
         width: calc(260 / @page-height-design-px * 100vh);
         padding: calc(10 / @page-height-design-px * 100vh);