style: --

README.md

@@ -4,7 +4,7 @@
 
 蓝湖：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_UjMnhAjY6&lang=zh
+全景图官方 url：https://www.4dkankan.com/panorama/show.html?id=WK1730428603763576832&vr=fd720_gIynwQ4yS&lang=zh
 
 # todo
 

postcss.config.js

@@ -10,7 +10,7 @@ module.exports = {
       fontViewportUnit: 'vw', // 字体使用的视口单位
       selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
       minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
-      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
+      mediaQuery: true, // 媒体查询里的单位是否需要转换单位
       replace: true, //  是否直接更换属性值，而不添加备用属性
       exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
       include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换

public/sceneTree.js

@@ -18,9 +18,9 @@ export default [
       {
         name: '宫阙',
         desc: `
-        <p>听完刘秉忠亲述的大都城规划设计，“我”由衷地赞叹大都城的雄伟壮阔。忽接通报，世祖皇帝忽必烈要召见自己。</p>
+        <p>感受完刘秉忠的大都城规划设计，“我”由衷地赞叹大都城的雄伟壮阔。忽接通报，世祖皇帝忽必烈要召见自己。</p>
         <br>
-        <p>接到诏令，“我”便从和义门下来，自西向东，沿外城、皇城、宫城行进。最后从宫城南部崇天门来到大明殿，接受世祖皇帝忽必烈的召见。</p>
+        <p>接到诏令，“我”便从和义门下来 自西向东，沿外城、皇城、宫城行进。最后从宫城南部崇天门来到大明殿，接受世祖皇帝忽必烈的召见。</p>
         `,
         contentPageBtnNameList: [
           '皇城与宫城',

src/App.vue

@@ -22,7 +22,7 @@
     class="iframe-page"
   >
     <img
-      class="iframe-page__close"
+      :class="['iframe-page__close', store.state.iframeAttrs.portrait && 'portrait']"
       draggable="false"
       src="@/assets/images/ship-game/icon_cancel-min.png"
       @click="store.dispatch('closeIframePage')"
@@ -206,6 +206,8 @@ provide('fakeBack', fakeBack)
     font-family: Source Han Sans SC light;
     line-height: 34px;
     letter-spacing: 4px;
+    font-size: 20px;
+    -webkit-text-size-adjust: 100%;
   }
 }
 
@@ -397,7 +399,7 @@ button.logo{
   line-height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
   text-align: center;
   font-family: "SourceHanSerifCN-SemiBold" !important;
-  font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
   color: #6A3906;
   background: linear-gradient(90deg, rgba(255,226,122,0) 0%, #E3C67F 26%, #C9AD83 49%, #DDC38A 70%, rgba(249,226,148,0) 100%);
 
@@ -443,16 +445,120 @@ button.logo{
   font-family: "Source Han Sans SC light";
 }
 
+.next-btn,
+.pre-btn {
+  width: calc(177 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  position: absolute;
+  background: url(@/assets/images/CameraContent-2-1-1-next-btn.png);
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  >span {
+    font-size: 16px;
+    color: #6A3906;
+    font-family: "Source Han Serif CN Heavy";
+    margin-left: -20px;
+  }
+}
+.pre-btn {
+  background: url(@/assets/images/CameraContent-2-1-1-pre-btn.png) no-repeat center / contain;
+  span {
+    margin-right: -30px;
+  }
+}
+
+.viewer-canvas img {
+  pointer-events: none;
+}
+
+.tips-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 2;
+
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    color: #ffffff;
+    width: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: rgba(0, 0, 0, .6);
+    border-radius: 25px;
+    letter-spacing: 4px;
+  }
+}
+
+.tipsBorder::after {
+  content: '';
+  position: absolute;
+  top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  left: 0;
+  right: 0;
+  bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  background: rgba(255, 255, 255, .25);
+  box-shadow: 0px 0px 5px #FFE062;
+}
+
+@media screen and (max-width: 740px) {
+  .iframe-page__close.portrait {
+    right: unset;
+    left: 58px;
+    width: 200px;
+  }
+}
 @media screen and (max-height: 480px) {
+  .viewer-button.viewer-close {
+    transform: scale(2.3);
+  }
+  button.logo {
+    width: calc(352 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  .img-title {
+    font-size: 26px;
+  }
   [class^="camera-content-"] {
     button.return {
-      margin-left: constant(safe-area-inset-left);
-      margin-left: env(safe-area-inset-left);
-      width: 4vw !important;
-      height: 4vw !important;
+      top: unset !important;
+      left: unset !important;
+      right: 42px;
+      bottom: 30px;
+      width: 100px !important;
+      height: 100px !important;
       z-index: 10;
     }
   }
+  .next-btn,
+  .pre-btn {
+    width: calc(266 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+    span {
+      font-size: 28px;
+    }
+  }
+  #app {
+    p {
+      font-size: 32px;
+      line-height: 42px;
+    }
+  }
+  .card-title {
+    font-size: 34px !important;
+    height: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    line-height: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+  }
 }
 
 @keyframes hotspot-icon-animation {
@@ -472,6 +578,15 @@ button.logo{
     transform: translate(-100%, 0);
   }
 }
+
+@keyframes emisse-ani {
+  0%, 20%, 40%, 70%, 90% {
+    opacity: 0.2;
+  }
+  10%, 30%, 50%, 80%, 100% {
+    opacity: 1;
+  }
+}
 </style>
 
 <style lang="less" scoped>

src/api.js

@@ -1,6 +1,6 @@
-import { deepProcess } from "@/utils.js"
+// import { deepProcess } from "@/utils.js"
 import axios from "axios"
-
+import someDataJson from './someData.json'
 // axios({
 //   method: 'post',
 //   url: `${config.backendDir}visit/saveType`,
@@ -16,22 +16,24 @@ import axios from "axios"
 
 export default {
   async fetchPanoData(panoCode) {
-    const res = await axios({
-      method: 'get',
-      url: `https://4dkk.4dage.com/720yun_fd_manage/${panoCode}/someData.json?_=${Math.random()}`,
-    })
-    console.log('fetch pano data: ', res.data)
+    // const res = await axios({
+    //   method: 'get',
+    //   url: '/someData.json'
+    //   // url: `https://4dkk.4dage.com/720yun_fd_manage/${panoCode}/someData.json?_=${Math.random()}`,
+    // })
+    // console.log('fetch pano data: ', res.data)
 
-    // function changeSubStr(str) {
-    //   return str.replace('https://4dkk.4dage.com/720yun_fd_manage/image/', `${process.env.VUE_APP_QJKK_XML_FILE_PATH}images/`)
-    // }
-    // function checkIsString(p) {
-    //   return typeof p === 'string'
-    // }
-    // if (process.env.VUE_APP_CLI_MODE === 'local') {
-    //   deepProcess(res, checkIsString, changeSubStr)
-    // }
+    // // function changeSubStr(str) {
+    // //   return str.replace('https://4dkk.4dage.com/720yun_fd_manage/image/', `${process.env.VUE_APP_QJKK_XML_FILE_PATH}images/`)
+    // // }
+    // // function checkIsString(p) {
+    // //   return typeof p === 'string'
+    // // }
+    // // if (process.env.VUE_APP_CLI_MODE === 'local') {
+    // //   deepProcess(res, checkIsString, changeSubStr)
+    // // }
 
-    return res.data
+    // return res.data
+    return someDataJson
   },
 }

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

@@ -6,48 +6,45 @@
       @click="emit('close')"
     />
     <div class="content-wrap">
-      <div class="left">
-        <h2 class="one">
-          《马可波罗行纪》中对大都城的描述
-        </h2>
-        <p class="one text-indent">
-          应知大汗居其名曰【汗八里】之契丹都城。全城中划地为方形，划线整齐，建筑房舍。每方足以建筑大屋，连同庭院园囿而有余。以方地赐各部落首领，每首领各有其赐地。方地周围皆是美丽道路，行人由斯往来。全城地面规划有如棋盘，其美善之极，未可言宣。
-        </p>
-        <h2 class="two">
-          《元史》中对大都城的描述
-        </h2>
-        <p class="two text-indent">
-          元大都“京城右拥太行，左挹沧海，枕居庸，奠朔方，城周六十里，十一门”。
-        </p>
-      </div>
-      <div class="right">
-        <img
-          class=""
-          src="@/assets/images/camera-content-1-1-3-img.jpg"
-          alt=""
-          draggable="false"
-        >
+      <img
+        draggable="false"
+        src="@/assets/images/camera-content-1-1-3-bg.png"
+      >
+      <div class="content-wrap-c">
+        <div class="left">
+          <h2 class="one">
+            《马可波罗行纪》中对大都城的描述
+          </h2>
+          <p class="one text-indent">
+            应知大汗居其名曰【汗八里】之契丹都城。全城中划地为方形，划线整齐，建筑房舍。每方足以建筑大屋，连同庭院园囿而有余。以方地赐各部落首领，每首领各有其赐地。方地周围皆是美丽道路，行人由斯往来。全城地面规划有如棋盘，其美善之极，未可言宣。
+          </p>
+          <h2 class="two">
+            《元史》中对大都城的描述
+          </h2>
+          <p class="two text-indent">
+            元大都“京城右拥太行，左挹沧海，枕居庸，奠朔方，城周六十里，十一门”。
+          </p>
+        </div>
+        <div class="right">
+          <img
+            class=""
+            src="@/assets/images/camera-content-1-1-3-img.jpg"
+            alt=""
+            draggable="false"
+          >
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 970)
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
 const emit = defineEmits(['close'])
-
 </script>
 
 <style lang="less" scoped>
@@ -70,21 +67,27 @@ const emit = defineEmits(['close'])
     background-repeat: no-repeat;
     background-position: center center;
   }
-  >.content-wrap{
+  .content-wrap{
     position: absolute;
     left: 50%;
     top: 54%;
     width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, -50%);
-    background-image: url(@/assets/images/camera-content-1-1-3-bg.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    >.left{
+
+    > img {
+      width: 100%;
+    }
+    &-c {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+    }
+    .left{
       flex: 0 0 auto;
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       >h2{
@@ -106,7 +109,6 @@ const emit = defineEmits(['close'])
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 300;
         color: #000000;
@@ -118,7 +120,7 @@ const emit = defineEmits(['close'])
         margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
-    >.right{
+    .right{
       flex: 0 0 auto;
       position: relative;
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -136,4 +138,16 @@ const emit = defineEmits(['close'])
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 > .content-wrap {
+    top: 50%;
+    width: 100%;
+
+    .left > h2 {
+      white-space: nowrap;
+      font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
 </style>

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

@@ -13,6 +13,14 @@
         class="map-wrap"
       >
         <div
+          v-if="showTipsCover"
+          class="tips-cover"
+          @click="closeTipsCover"
+        >
+          <span>点击查看</span>
+        </div>
+
+        <div
           v-if="hotspotIdx !== -1"
           class="desc"
         >
@@ -27,12 +35,31 @@
             </p>
           </div>
         </div>
+        <div
+          v-else
+          class="desc"
+        >
+          <div class="hotspot-detail">
+            <p
+              class="text-indent"
+            >
+              皇城与宫城是元大都城的核心，围绕太液池规划。皇城包含宫城，宫城里的建筑分南、北两组，南面是以大明殿为主体的前朝，北面是以延春阁为主体的后廷。宫城以北是御苑，以西即是太液池。
+            </p>
+          </div>
+        </div>
         <button
           class="hotspot"
           :class="{
-            active: hotspotIdx === 0
+            active: hotspotIdx === 0,
+            tipsBorder: showTipsCover
+          }"
+          @click="() => {
+            if (checkedHotspotIdx === 0) {
+              checkedHotspotIdx = -1
+            } else {
+              checkedHotspotIdx = 0
+            }
           }"
-          @click="checkedHotspotIdx = 0"
           @mouseenter="displayingHotspotIdx = 0"
           @mouseleave="displayingHotspotIdx = 4"
         >
@@ -49,9 +76,16 @@
         <button
           class="hotspot"
           :class="{
-            active: hotspotIdx === 1
+            active: hotspotIdx === 1,
+            tipsBorder: showTipsCover
+          }"
+          @click="() => {
+            if (checkedHotspotIdx === 1) {
+              checkedHotspotIdx = -1
+            } else {
+              checkedHotspotIdx = 1
+            }
           }"
-          @click="checkedHotspotIdx = 1"
           @mouseenter="displayingHotspotIdx = 1"
           @mouseleave="displayingHotspotIdx = 4"
         >
@@ -68,9 +102,16 @@
         <button
           class="hotspot"
           :class="{
-            active: hotspotIdx === 2
+            active: hotspotIdx === 2,
+            tipsBorder: showTipsCover
+          }"
+          @click="() => {
+            if (checkedHotspotIdx === 2) {
+              checkedHotspotIdx = -1
+            } else {
+              checkedHotspotIdx = 2
+            }
           }"
-          @click="checkedHotspotIdx = 2"
           @mouseenter="displayingHotspotIdx = 2"
           @mouseleave="displayingHotspotIdx = 4"
         >
@@ -87,9 +128,16 @@
         <button
           class="hotspot"
           :class="{
-            active: hotspotIdx === 3
+            active: hotspotIdx === 3,
+            tipsBorder: showTipsCover
+          }"
+          @click="() => {
+            if (checkedHotspotIdx === 3) {
+              checkedHotspotIdx = -1
+            } else {
+              checkedHotspotIdx = 3
+            }
           }"
-          @click="checkedHotspotIdx = 3"
           @mouseenter="displayingHotspotIdx = 3"
           @mouseleave="displayingHotspotIdx = 4"
         >
@@ -144,10 +192,17 @@ const layoutDataList = [
   },
 ]
 
+const TIPS_COVER_KEY = 'ydd-1-2-1-tips'
 const displayingHotspotIdx = ref(4)
 const checkedHotspotIdx = ref(-1)
 
 const hotspotIdx = computed(() => displayingHotspotIdx.value !== 4 ? displayingHotspotIdx.value : checkedHotspotIdx.value)
+const showTipsCover = ref(!localStorage.getItem(TIPS_COVER_KEY))
+
+const closeTipsCover = () => {
+  showTipsCover.value = false
+  localStorage.setItem(TIPS_COVER_KEY, 1)
+}
 </script>
 
 <style lang="less" scoped>
@@ -210,6 +265,12 @@ const hotspotIdx = computed(() => displayingHotspotIdx.value !== 4 ? displayingH
       background-repeat: no-repeat;
       background-position: center center;
 
+      .tips-cover {
+        span {
+          position: relative;
+          right: calc(460 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
       >button.hotspot{
         position: absolute;
         width: calc(73 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -220,6 +281,7 @@ const hotspotIdx = computed(() => displayingHotspotIdx.value !== 4 ? displayingH
         background-position: center center;
         top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        animation: emisse-ani linear 5s;
         >.label{
           position: absolute;
           left: calc(50% + 7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -346,12 +408,90 @@ const hotspotIdx = computed(() => displayingHotspotIdx.value !== 4 ? displayingH
           padding-right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           >p{
             margin-bottom: 1em;
-            font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            font-family: Source Han Sans SC, Source Han Sans SC;
-            font-weight: 300;
             color: #000000;
-            line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            // letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 {
+    > h1 {
+      top: 0;
+      font-size: 36px;
+    }
+    > .content-wrap {
+      top: 50%;
+      width: 100%;
+      height: 100%;
+
+      .map-wrap {
+        button.hotspot {
+          width: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+          .label {
+            bottom: 0;
+            font-size: 28px;
+            width: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(535 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+          &:nth-of-type(1) {
+            top: calc(565 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            left: calc(318 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+            img.deco {
+              left: calc(-86 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              width: calc(575 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              height: calc(281 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+          }
+          &:nth-of-type(2) {
+            top: calc(576 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            left: calc(470 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+            img.deco {
+              left: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              width: calc(183 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              height: calc(161 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+          }
+          &:nth-of-type(3) {
+            top: calc(620 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            left: calc(546 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+            img.deco {
+              top: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              left: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+          }
+          &:nth-of-type(4) {
+            top: calc(510 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            left: calc(540 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+            img.deco {
+              top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+          }
+        }
+        .desc {
+          top: calc(190 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          left: unset;
+          right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(800 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+          h3 {
+            top: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            left: calc(-34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            font-size: 28px;
+            width: calc(106 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(336 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           }
         }
       }

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

@@ -3,62 +3,83 @@
   <div class="camera-content-1-1">
     <button
       class="return"
-      @click="emit('close')"
+      @click="handleClose"
     />
     <div class="content-wrap">
-      <div class="left">
-        <p class="card-title left">
-          忽必烈召见赵孟頫
-        </p>
-        <p class="text-indent">
-          赵孟頫觐见忽必烈，得到忽必烈的称许：“果真是一表人才、丰神俊朗，就如那九天之上的仙人啊！朕授予你兵部郎中之职，愿你尽忠职守。”
-        </p>
-      </div>
-      <div class="map">
-        <p
-          v-for="(point, idx) in mapPoint"
-          :key="point"
-          :class="{
-            active: idx === curIndex - 1
-          }"
-          @click="curIndex = idx + 1"
-        >
-          {{ point }}
-        </p>
-      </div>
-      <div class="video">
-        <video
-          controls
-          autoplay
-          :src="require(`@/assets/videos/1-2-3/${curIndex}.mp4`)"
-          x5-playsinline="true"
-          playsinline="true"
-          webkit-playsinline="true"
-          x-webkit-airplay="true"
-          x5-video-player-type="h5-page"
-        />
-
-        <p
-          class="img-tips"
-          style="text-align: center;"
-        >
-          {{ imgTips[curIndex - 1] }}
-        </p>
+      <img
+        draggable="false"
+        src="@/assets/images/camera-content-1-1-3-bg.png"
+      >
+      <div class="content-wrap-c">
+        <div class="content-wrap-c__left">
+          <p class="card-title left">
+            忽必烈召见赵孟頫
+          </p>
+          <p class="text-indent">
+            赵孟頫觐见忽必烈，得到忽必烈的称许：“果真是一表人才、丰神俊朗，就如那九天之上的仙人啊！朕授予你兵部郎中之职，愿你尽忠职守。”
+          </p>
+        </div>
+        <div class="map">
+          <p
+            v-for="(point, idx) in mapPoint"
+            :key="point"
+            :class="{
+              active: idx === curIndex - 1
+            }"
+            @click="curIndex = idx + 1"
+          >
+            {{ point }}
+          </p>
+
+          <div
+            v-if="showTipsCover"
+            class="tips-cover"
+            @click="closeTipsCover"
+          >
+            <span>点击查看</span>
+          </div>
+        </div>
+        <div class="video">
+          <video
+            controls
+            controlsList="nodownload"
+            autoplay
+            :src="require(`@/assets/videos/1-2-3/${curIndex}.mp4`)"
+            x5-playsinline="true"
+            playsinline="true"
+            webkit-playsinline="true"
+            x-webkit-airplay="true"
+            x5-video-player-type="h5-page"
+            @play="stopBgAudio"
+            @ended="startBgAudio"
+          />
+
+          <p
+            class="img-tips"
+            style="text-align: center;"
+          >
+            {{ imgTips[curIndex - 1] }}
+          </p>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, inject } from 'vue'
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 970)
 
+const TIPS_COVER_KEY = 'ydd-1-2-3-tips'
+const startBgAudio = inject("startBgAudio")
+const stopBgAudio = inject("stopBgAudio")
 const emit = defineEmits(['close'])
 const curIndex = ref(1)
+const showTipsCover = ref(!localStorage.getItem(TIPS_COVER_KEY))
 const mapPoint = ['德清', '南浔', '宝应', '济州', '虎陂', '大都']
 const imgTips = [
   '德清——赵孟頫接获北上诏令',
@@ -68,6 +89,16 @@ const imgTips = [
   '虎陂——赵孟頫虎陂等待放闸',
   '大都——赵孟頫抵达大都'
 ]
+
+const handleClose = () => {
+  startBgAudio()
+  emit('close')
+}
+
+const closeTipsCover = () => {
+  showTipsCover.value = false
+  localStorage.setItem(TIPS_COVER_KEY, 1)
+}
 </script>
 
 <style lang="less" scoped>
@@ -79,6 +110,12 @@ const imgTips = [
   height: 100%;
   background: rgba(0,0,0,0.45);
   backdrop-filter: blur(60px);
+  .tips-cover {
+    top: calc(-50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    left: calc(-70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(-70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(-50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
   >button.return{
     position: absolute;
     width: 58px;
@@ -90,30 +127,32 @@ const imgTips = [
     background-repeat: no-repeat;
     background-position: center center;
   }
-  >.content-wrap{
+  .content-wrap{
     position: absolute;
     left: 50%;
     top: 54%;
     width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, -50%);
-    background-image: url(@/assets/images/camera-content-1-1-3-bg.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    >.left{
+    >img {
+      width: 100%;
+    }
+    &-c {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+    }
+    &-c__left{
       flex-shrink: 0;
       width: calc(637 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       .card-title {
         margin-bottom: 20px;
       }
-      p:last-child {
-        font-size: 20px;
-      }
     }
   }
   .video {
@@ -142,10 +181,12 @@ const imgTips = [
       font-weight: bold;
       color: #000000;
       padding: 0 0 1px 2px;
-      width: calc(88 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(59 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       cursor: pointer;
       box-sizing: border-box;
+      animation: emisse-ani linear 4s;
+      background: url('@/assets/images/Rectangle382.png') no-repeat center / cover;
 
       &.active {
         font-family: "Source Han Sans SC Bold" !important;
@@ -180,4 +221,45 @@ const imgTips = [
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 .video {
+    width: calc(860 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  .camera-content-1-1 .content-wrap {
+    top: 50%;
+    width: 100%;
+
+    .map {
+      width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+      p {
+        width: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        &:nth-child(1) {
+          left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        &:nth-child(2) {
+          right: calc(-120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        &:nth-child(3) {
+          left: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        &:nth-child(4) {
+          left: calc(82 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        &:nth-child(5) {
+          left: calc(-120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          bottom: calc(296 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        &:nth-child(6) {
+          top: calc(0px - 20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          left: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -287,33 +287,75 @@ const hotspotIdx = computed(() => displayingHotspotIdx.value !== 0 ? displayingH
   }
 }
 
-@media screen and (max-width: 1500px) {
+@media screen and (max-height: 480px) {
   .camera-content-1-3-2 {
+    > h1 {
+      top: 0;
+      font-size: 36px;
+    }
     > .content-wrap {
       top: 50%;
-      width: calc(2020 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(823 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 100%;
+      height: 100%;
 
       .map-wrap {
-        > .desc {
-          width: calc(786 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(561 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
         button.hotspot {
-          &.active .label {
-            width: calc(117 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+          &.active {
+            .label {
+              width: calc(117 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              height: calc(418 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+          }
+          .label {
+            font-size: 28px;
+            width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            min-height: calc(353 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+          &:nth-of-type(1){
+            left: calc(641 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            top: calc(690 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           }
-          > .label {
-            width: calc(113 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            min-height: calc(279 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          &:nth-of-type(2){
+            left: calc(828 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            top: calc(510 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+          &:nth-of-type(3){
+            left: calc(1000 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            top: calc(660 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+          &:nth-of-type(4){
+            left: calc(605 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            top: calc(226 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+          &:nth-of-type(5){
+            left: calc(721 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            top: calc(226 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+            .label {
+              letter-spacing: 0.2em;
+              padding-bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+          }
+        }
+        .desc {
+          top: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          left: unset;
+          right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(986 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(761 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+          h3 {
+            top: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            left: calc(-34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            font-size: 28px;
+            width: calc(106 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(336 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           }
         }
       }
     }
-    > h1 {
-      top: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
   }
 }
 </style>

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

@@ -12,6 +12,8 @@
           class="design-wrap-left-img"
           src="@/assets/images/CameraContent-2-1-1-img-1.png"
           alt=""
+          style="cursor: pointer;"
+          @click="handleFull"
         >
         <div class="design-wrap-right">
           <div class="right-title">
@@ -85,7 +87,7 @@
 </template>
 
 <script setup>
-import { ref, inject } from "vue"
+import { ref, inject, getCurrentInstance } from "vue"
 
 const {
   windowSizeInCssForRef,
@@ -99,6 +101,16 @@ const currentSwitchIdx = ref(0)
 
 const $isMobile = inject('$isMobile')
 const title = '大运河的历史演变'
+
+const instance = getCurrentInstance()
+const handleFull = () => {
+  instance.appContext.config.globalProperties.$viewerApi({
+    options: {},
+    images: [
+      require("@/assets/images/CameraContent-2-1-1-img-1.png")
+    ]
+  })
+}
 </script>
 
 <style lang="less" scoped>
@@ -203,7 +215,8 @@ const title = '大运河的历史演变'
       background-repeat: no-repeat;
       background-position: center center;
       display: flex;
-      justify-content: space-evenly;
+      justify-content: center;
+      gap: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       align-items: center;
 
       >.design-wrap-left-img {
@@ -266,30 +279,50 @@ const title = '大运河的历史演变'
         }
       }
     }
-    >.next-btn,
-    >.pre-btn {
-      width: calc(177 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      position: absolute;
-      background: url(@/assets/images/CameraContent-2-1-1-next-btn.png);
-      background-size: cover;
+    .next-btn,
+    .pre-btn {
       right: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       bottom: calc(69 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      >span {
-        font-size: 16px;
-        color: #6A3906;
-        font-family: 'SourceHanSerifCN-Heavy';
-        margin-left: -20px;
-      }
     }
     .pre-btn {
-      background: url(@/assets/images/CameraContent-2-1-1-pre-btn.png) no-repeat center / contain;
       right: calc(435 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 {
+    > h1 {
+      top: calc(56 / 970* 100vh);
+      font-size: calc(36 / 970* 100vh);
+    }
+    > .content-wrap {
+      top: 50%;
+
+      .design-wrap > .design-wrap-right {
+        width: calc(1243 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(560 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        .content-box > .title {
+          font-size: 28px;
+          line-height: 36px;
+        }
+        .right-title {
+          font-size: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+          span {
+            left: calc(-2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+          }
+        }
+      }
+      .pre-btn,
+      .next-btn {
+        bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      .pre-btn {
+        right: calc(525 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
 </style>

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

@@ -23,6 +23,8 @@
             class="detail-img"
             :src="require(`@/assets/images/CameraContent-2-1-2-img-${currentSwitchIdx + 1}.png`)"
             alt=""
+            style="cursor: pointer;"
+            @click="handleFull"
           >
           <div class="img-title">
             元大都水系图
@@ -34,7 +36,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue"
+import { ref, getCurrentInstance } from "vue"
 
 const {
   windowSizeInCssForRef,
@@ -46,33 +48,15 @@ const emit = defineEmits(['close'])
 
 const currentSwitchIdx = ref(0)
 
-const title = '著名元曲作家与作品'
-
-const imgLists = [
-  '@/assets/images/CameraContent-2-1-2-img-1.png',
-]
-
-const previous = () => {
-  console.log('上一页', currentSwitchIdx.value)
-  if (currentSwitchIdx.value > 0 ) {
-    console.log('上一页2')
-    currentSwitchIdx.value -= 1
-  } else {
-    return
-  }
-}
-
-const next = () => {
-  console.log('下一页')
-  if (currentSwitchIdx.value < imgLists.length - 1) {
-    currentSwitchIdx.value += 1
-  } else {
-    return
-  }
+const instance = getCurrentInstance()
+const handleFull = () => {
+  instance.appContext.config.globalProperties.$viewerApi({
+    options: {},
+    images: [
+      require(`@/assets/images/CameraContent-2-1-2-img-${currentSwitchIdx.value + 1}.png`)
+    ]
+  })
 }
-
-
-
 </script>
 
 <style lang="less" scoped>
@@ -181,7 +165,7 @@ const next = () => {
           height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           color: #6A3906 ;
           font-family: "SourceHanSerifCN-SemiBold";
-          font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-size: 22px;
           background: url(@/assets/images/camera-content-3-1-3-tab-1-img.png);
           background-size: cover;
           line-height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -207,10 +191,6 @@ const next = () => {
       }
       >.design-wrap-right {
         width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        // background: rgba(145,129,117,0.25);
-        // border: 1px solid #FFE88B;
-        // padding: 15px 10px;
         position: relative;
         display: flex;
         flex-direction: column;
@@ -226,4 +206,26 @@ const next = () => {
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 > .content-wrap {
+    top: 50%;
+
+    .design-wrap {
+      .design-wrap-left {
+        width: calc(820 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        .left-title {
+          font-size: 26px !important;
+        }
+        .left-text {
+          height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+      .design-wrap-right {
+        width: calc(920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
 </style>

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

@@ -6,29 +6,35 @@
       @click="emit('close')"
     />
     <div class="content-wrap">
-      <div class="left">
-        <h2 class="one">
-          菏泽沉船
-        </h2>
-        <p class="one text-indent">
-          2010 年发现的菏泽元代沉船，向世人展示了一处完整的内河沉船遗迹。该船为木质单桅货船，船型狭长，方首，方尾，平底，共 12 个舱，主体用材为杉木。据专家研究，这艘沉船发现的位置正在元朝的黄河北支上，而黄河北支此时与会通河相接，当时凡从运河北上元大都或南下去往杭州方向的船只，在徐州到济宁段都需要经过这段河道。
-        </p>
-        <h2 class="two">
-          菏泽沉船上的瓷器
-        </h2>
-        <p class="two text-indent">
-          沉船中还出土了包括精美瓷器在内的160余件遗物，其中瓷器主要为景德镇青花与青白釉瓷器、磁州窑瓷器、龙泉窑瓷器、钧窑瓷器等，而这也是元大都内最常发现的瓷器组合。
-        </p>
-      </div>
-      <div class="right">
-        <img
-          class=""
-          src="@/assets/images/camera-content-2-1-1-img.png"
-          alt=""
-          draggable="false"
-        >
-        <div class="img-title">
-          修复后的菏泽沉船
+      <img
+        draggable="false"
+        src="@/assets/images/camera-content-2-1-1-design-bg.png"
+      >
+      <div class="content-wrap-c">
+        <div class="left">
+          <h2 class="one">
+            菏泽沉船
+          </h2>
+          <p class="one text-indent">
+            2010年发现的菏泽元代沉船，向世人展示了一处完整的内河沉船遗迹。该船为木质单桅货船，船型狭长，方首，方尾，平底，共 12 个舱，主体用材为杉木。据专家研究，这艘沉船发现的位置正在元朝的黄河北支上，而黄河北支此时与会通河相接，当时凡从运河北上元大都或南下去往杭州方向的船只，在徐州到济宁段都需要经过这段河道。
+          </p>
+          <h2 class="two">
+            菏泽沉船上的瓷器
+          </h2>
+          <p class="two text-indent">
+            沉船中还出土了包括精美瓷器在内的160余件遗物，其中瓷器主要为景德镇青花与青白釉瓷器、磁州窑瓷器、龙泉窑瓷器、钧窑瓷器等，而这也是元大都内最常发现的瓷器组合。
+          </p>
+        </div>
+        <div class="right">
+          <img
+            class=""
+            src="@/assets/images/camera-content-2-1-1-img.png"
+            alt=""
+            draggable="false"
+          >
+          <div class="img-title">
+            修复后的菏泽沉船
+          </div>
         </div>
       </div>
     </div>
@@ -36,19 +42,11 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 970)
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
 const emit = defineEmits(['close'])
 
 </script>
@@ -73,23 +71,28 @@ const emit = defineEmits(['close'])
     background-repeat: no-repeat;
     background-position: center center;
   }
-  >.content-wrap{
+  .content-wrap{
     position: absolute;
     left: 50%;
     top: 54%;
-    padding: 0 calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: 100%;
-    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, -50%);
-    background-image: url(@/assets/images/camera-content-2-1-1-design-bg.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    >.left{
+    img {
+      width: 100%;
+    }
+    &-c {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 0 calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      z-index: 1;
+    }
+    .left{
       flex: 1;
       >h2{
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -108,18 +111,13 @@ const emit = defineEmits(['close'])
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        // font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 300;
         color: #000000;
-        line-height: 30px;
-        // letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p.one{
         margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
-    >.right{
+    .right{
       margin-left: 150px;
       flex-shrink: 0;
       position: relative;
@@ -142,4 +140,22 @@ const emit = defineEmits(['close'])
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 .content-wrap {
+    top: 50%;
+    &-c {
+      padding: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    .left {
+      padding-right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      h2 {
+        font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    .right {
+      margin-left: 50px;
+    }
+  }
+}
 </style>

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

@@ -120,12 +120,7 @@ const emit = defineEmits(['close'])
         margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p{
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        // font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 300;
         color: #000000;
-        line-height: 30px;
-        // letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p.one{
         margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -133,4 +128,16 @@ const emit = defineEmits(['close'])
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 > .content-wrap {
+    top: 50%;
+
+    .left {
+      h2 {
+        font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
 </style>

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

@@ -16,17 +16,17 @@
         </p>
       </div>
       <div
-        v-if="currentSwitchIdx == 1"
         class="right"
       >
-        <!-- <img
+        <img
           v-if="currentSwitchIdx == 0"
           class=""
-          src="@/assets/images/camera-content-2-3-1-img.png"
+          src="@/assets/images/pic-yunhe-min.jpg"
           alt=""
           draggable="false"
-        > -->
+        >
         <img
+          v-if="currentSwitchIdx == 1"
           class=""
           src="@/assets/images/camera-content-2-3-1-img-2.png"
           alt=""
@@ -34,12 +34,18 @@
         >
       </div>
       <div
+        v-if="currentSwitchIdx === 1"
+        class="pre-btn"
+        @click="currentSwitchIdx = 0"
+      >
+        <span>上一页</span>
+      </div>
+      <div
+        v-if="currentSwitchIdx === 0"
         class="next-btn"
-        @click="() => {
-          currentSwitchIdx == 0 ? currentSwitchIdx += 1 : currentSwitchIdx -= 1
-        }"
+        @click="currentSwitchIdx = 1"
       >
-        <span>{{ currentSwitchIdx == 0 ? '下一页' : '上一页' }}</span>
+        <span>下一页</span>
       </div>
     </div>
   </div>
@@ -112,12 +118,15 @@ const currentSwitchIdx = ref(0)
     background-repeat: no-repeat;
     background-position: center center;
     display: flex;
-    justify-content: space-evenly;
+    justify-content: center;
+    gap: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     align-items: center;
     >.left{
       flex: 0 0 auto;
+      padding-right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      overflow-y: auto;
       >h2{
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -140,6 +149,7 @@ const currentSwitchIdx = ref(0)
         font-weight: 300;
         color: #000000;
         line-height: 30px;
+        text-align: justify;
         // letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
       >p.one{
@@ -162,23 +172,33 @@ const currentSwitchIdx = ref(0)
         width: calc(726 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
-    >.next-btn {
-      width: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      position: absolute;
-      background: url(@/assets/images/CameraContent-2-1-1-next-btn.png);
-      background-size: cover;
+    .next-btn,
+    .pre-btn {
       right: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       bottom: calc(69 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      >span {
-        font-size: 16px;
-        color: #6A3906;
-        font-family: 'SourceHanSerifCN-Heavy';
-        margin-left: -20px;
+    }
+  }
+}
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 {
+    > h1 {
+      font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    .content-wrap {
+      .left {
+        height: calc(538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        h2 {
+          white-space: nowrap;
+          font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+      .right img {
+        width: calc(980 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      .next-btn,
+      .pre-btn {
+        bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
   }

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

@@ -6,33 +6,31 @@
       @click="emit('close')"
     />
     <div class="content-wrap">
-      <div class="left">
-        <h2 class="one">
-          元代商品贸易使用的货币
-        </h2>
-        <p class="one text-indent">
-          商品的贸易、货物的流通离不开货币。元代除了使用金银和铜钱，也曾发行纸币。从中统元年（1260）忽必烈颁行中统元宝交钞开始，元代共发行了五种纸币。其中，至元通行宝钞从至元二十四年（1287）发行，一直沿用到元代结束，是元代重要的货币。元代版图辽阔，纸币发行量大、流通范围广，河北平山县也曾出土至元通行宝钞伍佰文的铜版。
-        </p>
+      <img
+        draggable="false"
+        src="@/assets/images/camera-content-2-1-1-design-bg.png"
+      >
+      <div class="content-wrap-c">
+        <div class="left">
+          <h2 class="one">
+            元代商品贸易使用的货币
+          </h2>
+          <p class="one text-indent">
+            商品的贸易、货物的流通离不开货币。元代除了使用金银和铜钱，也曾发行纸币。从中统元年（1260）忽必烈颁行中统元宝交钞开始，元代共发行了五种纸币。其中，至元通行宝钞从至元二十四年（1287）发行，一直沿用到元代结束，是元代重要的货币。元代版图辽阔，纸币发行量大、流通范围广，河北平山县也曾出土至元通行宝钞伍佰文的铜版。
+          </p>
+        </div>
+        <div class="right" />
       </div>
-      <div class="right" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 970)
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
 const emit = defineEmits(['close'])
 
 </script>
@@ -57,22 +55,27 @@ const emit = defineEmits(['close'])
     background-repeat: no-repeat;
     background-position: center center;
   }
-  >.content-wrap{
+  .content-wrap{
     position: absolute;
     left: 50%;
     top: 54%;
     width: 100%;
-    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, -50%);
-    background-image: url(@/assets/images/camera-content-2-1-1-design-bg.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    >.left{
+    >img {
+      width: 100%;
+    }
+    &-c {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      z-index: 1;
+    }
+    .left{
       flex: 0 0 auto;
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -104,7 +107,7 @@ const emit = defineEmits(['close'])
         margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
-    >.right{
+    .right{
       flex: 0 0 auto;
       position: relative;
       width: calc(444 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -119,4 +122,22 @@ const emit = defineEmits(['close'])
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 .content-wrap {
+    top: 50%;
+
+    .left {
+      height: calc(538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+      h2 {
+        font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    .right {
+      width: calc(644 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(483 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
 </style>

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

@@ -20,27 +20,26 @@
           />
         </div>
         <div class="design-wrap-right">
-          <!-- 左右按钮 -->
           <img
-            class="btn-left"
-            src="@/assets/images/CameraContent-3-1-3-left.png"
+            class="detail-img"
+            :src="require(`@/assets/images/CameraContent-3-1-3-img-${currentSwitchIdx + 1}.png`)"
             alt=""
+          >
+
+          <div
+            class="pre-btn"
             :style="{opacity: currentSwitchIdx == 0 ? '0.4':'1'}"
             @click="previous()"
           >
-          <img
-            class="btn-right"
-            src="@/assets/images/CameraContent-3-1-3-right.png"
-            alt=""
+            <span>上一页</span>
+          </div>
+          <div
+            class="next-btn"
             :style="{opacity: currentSwitchIdx == imgLists.length - 1 ? '0.4':'1'}"
-
             @click="next()"
           >
-          <img
-            class="detail-img"
-            :src="require(`@/assets/images/CameraContent-3-1-3-img-${currentSwitchIdx + 1}.png`)"
-            alt=""
-          >
+            <span>下一页</span>
+          </div>
         </div>
       </div>
     </div>
@@ -234,7 +233,7 @@ const next = () => {
           height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           color: #6A3906 ;
           font-family: "SourceHanSerifCN-SemiBold";
-          font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-size: 22px;
           background: url(@/assets/images/camera-content-3-1-3-tab-1-img.png);
           background-size: cover;
           line-height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -259,38 +258,19 @@ const next = () => {
       }
       >.design-wrap-right {
         width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        // background: rgba(145,129,117,0.25);
-        // border: 1px solid #FFE88B;
-        // padding: 15px 10px;
+        padding-bottom: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         position: relative;
-        >.btn-left {
-          width: 60px;
-          height: 60px;
-          position: absolute;
-          left: -30px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
+
+        >.next-btn,
+        >.pre-btn {
+          right: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          bottom: 0;
         }
-        >.btn-right {
-          width: 60px;
-          height: 60px;
-          position: absolute;
-          right: -30px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
+        .pre-btn {
+          left: 0;
         }
-        .btn-left,
-        .btn-right {
-          transition: all linear .2s;
-
-          &:hover {
-            transform: translateY(-50%) scale(1.2);
-          }
+        .next-btn {
+          right: 0;
         }
         >.detail-img {
           width: 100%;
@@ -299,4 +279,26 @@ const next = () => {
     }
   }
 }
-</style>
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 {
+    > h1 {
+      font-size: calc(36 / 970* 100vh);
+    }
+    .content-wrap > .design-wrap {
+      .design-wrap-left {
+        width: calc(820 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        .left-title {
+          font-size: 26px;
+        }
+        .left-text {
+          height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+      .design-wrap-right {
+        padding-bottom: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

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

@@ -217,4 +217,25 @@ const next = () => {
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 > h1 {
+    font-size: calc(36 / 970* 100vh);
+  }
+  .camera-content-1-1 > .content-wrap > .design-wrap > .design-wrap-left {
+    width: calc(1150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    margin-right: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+    > .left-title {
+      padding-left: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(795 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      line-height: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    .left-text {
+      height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
 </style>

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

@@ -132,4 +132,10 @@ const title = '表演元曲的著名演员'
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 > h1 {
+    font-size: calc(36 / 970* 100vh);
+  }
+}
 </style>

src/components/CharacterDesc.vue

@@ -76,7 +76,8 @@ const emit = defineEmits(['close'])
         margin-bottom: 21px;
       }
       >.desc{
-        height: 180px;
+        overflow-y: auto;
+        height: 170px;
         font-size: 20px;
         font-family: Source Han Sans SC, Source Han Sans SC;
         font-weight: 400;
@@ -88,4 +89,15 @@ const emit = defineEmits(['close'])
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .character-desc .wrap > .wrap-2 > .desc {
+    font-size: 26px;
+    line-height: 34px;
+  }
+  .character-desc > button.close {
+    width: 100px;
+    height: 100px;
+  }
+}
 </style>

src/components/GameEntryPage.vue

@@ -164,4 +164,13 @@ const isDBG = gameName === '多宝阁'
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .game-entry-page {
+    button.return {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
 </style>

src/components/HotspotDialog-1.vue

@@ -645,7 +645,7 @@ const sszHover = ref(false)
 // const openedBoxList = reactive([])
 
 // 曲苑
-const isQY = computed(() => ["_k8TlaWyt"].includes(props.relicInfo.name))
+const isQY = computed(() => ["_t1IQIFtV"].includes(props.relicInfo.name))
 // 河畅
 const isHC = computed(() => ["_Kd6Z3CsH"].includes(props.relicInfo.name))
 // 航运
@@ -654,10 +654,10 @@ const isHY = computed(() =>
 )
 // 雄伟帝都
 const isHYM = computed(() =>
-  ["_pICESRR2"].includes(props.relicInfo.name)
+  ["_IAX28GCU"].includes(props.relicInfo.name)
 )
 // 大都宫阙
-const isDDGQ = computed(() => ["_Nwzqz2gG", "_g2dCy5lq"].includes(props.relicInfo.name))
+const isDDGQ = computed(() => ["_3ZEcp71i"].includes(props.relicInfo.name))
 // 大都揽胜
 const isDDLS = computed(() =>
   ['_WLw1HodV', '_uBW2UP8N'].includes(props.relicInfo.name)
@@ -848,8 +848,8 @@ const close = () => {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 40px;
-  height: 40px;
+  width: 70px;
+  height: 70px;
   overflow: hidden;
   z-index: 2;
   transform: translate(-50%, -50%);
@@ -1341,6 +1341,46 @@ const close = () => {
   }
 }
 
+@media screen and (max-height: 480px) {
+  .hzcc-video {
+    width: calc(1200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  .box3-min {
+    width: calc(1261 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  .hotspot-dialog-1 {
+    .back {
+      width: 100px;
+    }
+    &__info {
+      top: 6vh;
+
+      img:first-child {
+        top: -30px;
+        right: -50px;
+        width: 100px;
+      }
+    }
+    &__label {
+      width: 61px;
+      height: 201px;
+      font-size: 24px;
+    }
+  }
+  .hotspot-dialog-1__qss {
+    top: 7vh;
+
+    img:last-child {
+      width: calc(509 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    img:first-child {
+      top: -50px;
+      right: -50px;
+      width: 100px;
+    }
+  }
+}
+
 @keyframes flashing {
   0% {
     opacity: 1;

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

@@ -0,0 +1,96 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left-c">
+        <p class="card-title left one">
+          《马可波罗行纪》中对大都城的描述
+        </p>
+        <p class="one text-indent">
+          应知大汗居其名曰【汗八里】之契丹都城。全城中划地为方形，划线整齐，建筑房舍。每方足以建筑大屋，连同庭院园囿而有余。以方地赐各部落首领，每首领各有其赐地。方地周围皆是美丽道路，行人由斯往来。全城地面规划有如棋盘，其美善之极，未可言宣。
+        </p>
+        <p class="card-title left one">
+          《元史》中对大都城的描述
+        </p>
+        <p class="two text-indent">
+          元大都“京城右拥太行，左挹沧海，枕居庸，奠朔方，城周六十里，十一门”。
+        </p>
+      </div>
+      <div class="right">
+        <img
+          class=""
+          src="@/assets/images/camera-content-1-1-3-img.jpg"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+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;
+  }
+  .content-wrap{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0 calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    align-items: center;
+    gap: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: url(@/assets/images/mobile/bg_1-min.jpg) no-repeat center / 100% 100%;
+
+    .left-c {
+      flex: 0 0 1;
+      padding-left: constant(safe-area-inset-left);
+      padding-left: env(safe-area-inset-left);
+
+      .card-title {
+        width: 70%;
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    .right{
+      flex-shrink: 0;
+      >img{
+        width: calc(1000 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,209 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="handleClose"
+    />
+    <div class="content-wrap">
+      <div class="content-wrap__left">
+        <p class="card-title left">
+          忽必烈召见赵孟頫
+        </p>
+        <p class="text-indent">
+          赵孟頫觐见忽必烈，得到忽必烈的称许：“果真是一表人才、丰神俊朗，就如那九天之上的仙人啊！朕授予你兵部郎中之职，愿你尽忠职守。”
+        </p>
+      </div>
+      <div class="map">
+        <p
+          v-for="(point, idx) in mapPoint"
+          :key="point"
+          :class="{
+            active: idx === curIndex - 1
+          }"
+          @click="curIndex = idx + 1"
+        >
+          {{ point }}
+        </p>
+
+        <div
+          v-if="showTipsCover"
+          class="tips-cover"
+          @click="closeTipsCover"
+        >
+          <span>点击查看</span>
+        </div>
+      </div>
+      <div class="video">
+        <video
+          controls
+          controlsList="nodownload"
+          autoplay
+          :src="require(`@/assets/videos/1-2-3/${curIndex}.mp4`)"
+          x5-playsinline="true"
+          playsinline="true"
+          webkit-playsinline="true"
+          x-webkit-airplay="true"
+          x5-video-player-type="h5-page"
+          @play="stopBgAudio"
+          @ended="startBgAudio"
+        />
+
+        <p
+          class="img-tips"
+          style="text-align: center;"
+        >
+          {{ imgTips[curIndex - 1] }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue'
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+const TIPS_COVER_KEY = 'ydd-1-2-3-tips'
+const startBgAudio = inject("startBgAudio")
+const stopBgAudio = inject("stopBgAudio")
+const emit = defineEmits(['close'])
+const curIndex = ref(1)
+const showTipsCover = ref(!localStorage.getItem(TIPS_COVER_KEY))
+const mapPoint = ['德清', '南浔', '宝应', '济州', '虎陂', '大都']
+const imgTips = [
+  '德清——赵孟頫接获北上诏令',
+  '南浔——赵孟頫南浔北得独孤赠兰亭序，舟中写跋',
+  '宝应——赵孟頫舟中展卷',
+  '济州——赵孟頫济州急登船',
+  '虎陂——赵孟頫虎陂等待放闸',
+  '大都——赵孟頫抵达大都'
+]
+
+const handleClose = () => {
+  startBgAudio()
+  emit('close')
+}
+
+const closeTipsCover = () => {
+  showTipsCover.value = false
+  localStorage.setItem(TIPS_COVER_KEY, 1)
+}
+</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);
+  .tips-cover {
+    top: calc(-50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    left: calc(-70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(-70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(-50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >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;
+  }
+  .content-wrap{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0 calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    align-items: center;
+    gap: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: url(@/assets/images/mobile/bg_1-min.jpg) no-repeat center / 100% 100%;
+
+    &__left{
+      flex: 1;
+      padding-left: constant(safe-area-inset-left);
+      padding-left: env(safe-area-inset-left);
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      .card-title {
+        margin-bottom: 20px;
+      }
+    }
+  }
+  .video {
+    width: 850px;
+
+    video {
+      width: 100%;
+    }
+    .img-tips {
+      font-size: 14px;
+    }
+  }
+  .map {
+    flex-shrink: 0;
+    position: relative;
+    width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: url('@/assets/images/map_line-min.png') no-repeat center / contain;
+
+    p {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 0 1px 2px;
+      width: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      cursor: pointer;
+      box-sizing: border-box;
+      animation: emisse-ani linear 4s;
+      background: url('@/assets/images/Rectangle382.png') no-repeat center / cover;
+
+      &.active {
+        font-family: "Source Han Sans SC Bold" !important;
+        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        color: #6A3906;
+        background: url('@/assets/images/hightline -min.png') no-repeat center / cover;
+      }
+      &:nth-child(1) {
+        left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        bottom: calc(0px - 16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      &:nth-child(2) {
+        right: calc(-120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        bottom: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      &:nth-child(3) {
+        left: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        bottom: calc(86 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      &:nth-child(4) {
+        left: calc(82 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        bottom: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      &:nth-child(5) {
+        left: calc(-120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        bottom: calc(296 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      &:nth-child(6) {
+        top: calc(0px - 20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        left: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,147 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <img
+        draggable="false"
+        src="@/assets/images/mobile/bg_1-min.jpg"
+      >
+      <div class="content-wrap-c">
+        <div class="design-wrap-left">
+          <p class="card-title left">
+            重要建筑构件瓦当与滴水
+          </p>
+          <p class="text-indent">
+            瓦当与滴水是用在古代建筑檐口的瓦件，分别与筒瓦、板瓦相连，既具有保护木构的作用，也有装饰和等级意味。元代高等级建筑使用的龙纹瓦当、滴水，在元大都、元中都、元上都都有不少发现，其中以黄绿琉璃最为常见。元人尚白，考古也曾发现白色瓷瓦或琉璃瓦。发现数量更多的是灰陶瓦件，元大都出土的灰陶瓦当、滴水，以花草纹、凤鸟纹、兽面纹为大宗。
+          </p>
+        </div>
+        <div class="design-wrap-right">
+          <img
+            class="detail-img"
+            draggable="false"
+            :src="require(`@/assets/images/1331.png`)"
+            alt=""
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+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;
+    z-index: 1;
+  }
+  .content-wrap{
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+
+    > img {
+      width: 100%
+    }
+    &-c {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .card-title {
+      margin-bottom: 20px;
+    }
+    .text-indent {
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+  .design-wrap-left {
+    position: relative;
+    top: calc(0px - 30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 690px;
+  }
+  .design-wrap-right {
+    margin-left: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 709px;
+    >.btn-left {
+      width: 60px;
+      height: 60px;
+      position: absolute;
+      left: -30px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 2;
+      cursor: pointer;
+    }
+    >.btn-right {
+      width: 60px;
+      height: 60px;
+      position: absolute;
+      right: -30px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 2;
+      cursor: pointer;
+    }
+    .btn-left,
+    .btn-right {
+      transition: all linear .2s;
+
+      &:hover {
+        transform: translateY(-50%) scale(1.2);
+      }
+    }
+    .detail-img {
+      width: 100%;
+    }
+  }
+}
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 .content-wrap {
+    top: 50%;
+
+    .design-wrap-right {
+      margin-left: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 900px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,148 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <img
+        draggable="false"
+        src="@/assets/images/mobile/bg_2-min.jpg"
+      >
+      <div class="content-wrap-c">
+        <div class="left">
+          <p class="card-title left one">
+            菏泽沉船
+          </p>
+          <p class="one text-indent">
+            2010年发现的菏泽元代沉船，向世人展示了一处完整的内河沉船遗迹。该船为木质单桅货船，船型狭长，方首，方尾，平底，共 12 个舱，主体用材为杉木。据专家研究，这艘沉船发现的位置正在元朝的黄河北支上，而黄河北支此时与会通河相接，当时凡从运河北上元大都或南下去往杭州方向的船只，在徐州到济宁段都需要经过这段河道。
+          </p>
+          <p class="card-title left one">
+            菏泽沉船上的瓷器
+          </p>
+          <p class="two text-indent">
+            沉船中还出土了包括精美瓷器在内的160余件遗物，其中瓷器主要为景德镇青花与青白釉瓷器、磁州窑瓷器、龙泉窑瓷器、钧窑瓷器等，而这也是元大都内最常发现的瓷器组合。
+          </p>
+        </div>
+        <div class="right">
+          <img
+            class=""
+            src="@/assets/images/camera-content-2-1-1-img.png"
+            alt=""
+            draggable="false"
+          >
+          <div class="img-title">
+            修复后的菏泽沉船
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+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;
+  }
+  .content-wrap{
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+    img {
+      width: 100%;
+    }
+    &-c {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 0 calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      z-index: 1;
+    }
+    .left{
+      flex: 1;
+      .card-title {
+        width: 70%
+      }
+      >p{
+        color: #000000;
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    .right{
+      margin-left: 150px;
+      flex-shrink: 0;
+      position: relative;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      >img{
+        flex: 0 0 auto;
+        width: 100%;
+        // background: rgba(145,129,117,0.25);
+        // border: 1px solid #FFE88B;
+        // padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >.img-title{
+        flex: 0 0 auto;
+        margin-top: 0.5em;
+      }
+    }
+  }
+}
+
+@media screen and (max-height: 480px) {
+  .camera-content-1-1 .content-wrap {
+    top: 50%;
+    &-c {
+      padding: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    .left {
+      padding-right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      h2 {
+        font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    .right {
+      margin-left: 50px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,115 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left">
+        <p class="card-title left one">
+          运河上的船
+        </p>
+      </div>
+      <div class="inner">
+        <div class="inner__item">
+          <img
+            class=""
+            src="@/assets/images/camera-content-2-2-2-img.png"
+            alt=""
+            draggable="false"
+          >
+          <p>磁县漕船（模型）</p>
+        </div>
+
+        <div class="inner__item">
+          <img
+            class=""
+            src="@/assets/images/camera-content-2-2-2-img2.png"
+            alt=""
+            draggable="false"
+          >
+          <p>聊城古船（模型）</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+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);
+  .inner {
+    display: flex;
+    align-items: flex-end;
+    padding: 0 calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+    p {
+      letter-spacing: 3px !important;
+      text-align: center;
+      font-size: 18px;
+    }
+    &__item {
+      flex: 1;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  >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;
+    z-index: 1;
+  }
+  >.content-wrap{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-image: url(@/assets/images/mobile/bg_2-min.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    >.left{
+      position: absolute;
+      top: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      .card-title {
+        width: calc(700 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p{
+        color: #000000;
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,87 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left-c">
+        <p class="card-title left one">
+          元代商品贸易使用的货币
+        </p>
+        <p class="one text-indent">
+          商品的贸易、货物的流通离不开货币。元代除了使用金银和铜钱，也曾发行纸币。从中统元年（1260）忽必烈颁行中统元宝交钞开始，元代共发行了五种纸币。其中，至元通行宝钞从至元二十四年（1287）发行，一直沿用到元代结束，是元代重要的货币。元代版图辽阔，纸币发行量大、流通范围广，河北平山县也曾出土至元通行宝钞伍佰文的铜版。
+        </p>
+      </div>
+      <img
+        class="right"
+        draggable="false"
+        src="@/assets/images/camera-content-2-3-3-img.png"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+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;
+  }
+  .content-wrap{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+    background: url(@/assets/images/mobile/bg_2-min.jpg) no-repeat center / cover;
+
+    .left-c{
+      flex: 1;
+      padding-left: constant(safe-area-inset-left);
+      padding-left: env(safe-area-inset-left);
+
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      .card-title {
+        width: 75%;
+      }
+    }
+    .right{
+      flex-shrink: 0;
+      width: calc(900 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,130 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <h1>{{ title }}</h1>
+    <div class="wrap-1">
+      <div class="wrap-2">
+        <div class="content-wrap__left">
+          <img
+            src="@/assets/images/CameraContent-3-2-3-left-bg.png"
+          >
+          <div class="img-title">
+            元墓戏曲壁画
+          </div>
+        </div>
+        <div class="content-wrap__right text-indent">
+          <div>
+            <p class="text-indent">
+              大都的著名女演员，有珠帘秀、顺时秀、天然秀、赛帘秀、燕山秀（均为艺名）等。珠帘秀本姓朱，她的“杂剧为当今独步”，名震一时。赛帘秀、燕山秀等，都是她的门徒，后辈都尊称她为朱娘娘。顺时秀原名郭顺卿，元代中期也很有名，“教坊女乐顺时秀，岂独歌博天下名！意态由来看不足，揭帘半面已倾城”。
+            </p>
+            <p class="text-indent">
+              大都著名的男演员有魏、武、刘三人，“魏长于念诵，武长于筋斗，刘长于科泛（表演动作之意——引者），后代乐人“皆宗之”。可惜他们的名字都没有流传下来。
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+
+const emit = defineEmits(['close'])
+
+const title = '表演元曲的著名演员'
+</script>
+
+<style lang="less" scoped>
+@page-height-design-px: 970;
+
+.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;
+    z-index: 10;
+  }
+
+  >h1 {
+    position: absolute;
+    left: 0;
+    top: calc(10 / @page-height-design-px * 100vh);
+    width: 100%;
+    height: calc(140 / @page-height-design-px * 100vh);
+    background-image: url(@/assets/images/camera-content-3-1-3-title-bg.png);
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: 36px;
+    font-family: "SourceHanSerifCN-SemiBold";
+    color: #FFEEC0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  .wrap-1 {
+    >.wrap-2 {
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 100px;
+      padding: 30px 97px 0 195px;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      background: url(@/assets/images/mobile/bg_3-min.jpg) no-repeat center / cover;
+      .content-wrap__left{
+        flex: 0 1 calc(620 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        >img{
+          width: 100%;
+        }
+        >.img-title{
+          margin-top: 0.5em;
+        }
+      }
+      .content-wrap__right {
+        flex-shrink: 0;
+        padding: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(1268 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(630 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: url('@/assets/images/CameraContent-3-2-3-right-bg.png') no-repeat center / contain;
+
+        > div {
+          padding-right: 20px;
+          height: 100%;
+          overflow: auto;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/MobileCameraContent/PanelView.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="mobile-panel">
+    <button
+      class="return"
+      @click="emits('close')"
+    />
+
+    <div
+      class="mobile-panel__title"
+      :style="{
+        backgroundImage: `url(${require(`@/assets/images/mobile/bg_${theme}_01.jpg`)})`
+      }"
+    >
+      <h1 :class="{small: title.length >= 9}">
+        {{ title }}
+      </h1>
+    </div>
+    <div
+      class="mobile-panel__main"
+      :class="{
+        hasTab: tabbar.length
+      }"
+      :style="{
+        backgroundImage: `url(${require(`@/assets/images/mobile/bg_${theme}_02.jpg`)})`
+      }"
+    >
+      <div
+        v-if="tabbar.length"
+        class="tabbar"
+      >
+        <template
+          v-for="(item, idx) in tabbar"
+          :key="idx"
+        >
+          <span
+            :class="{
+              active: activeTabIdx === idx
+            }"
+            @click="activeTabIdx = idx"
+          >
+            {{ item }}
+          </span>
+        </template>
+      </div>
+
+      <slot />
+    </div>
+    <img
+      class="mobile-panel__bd"
+      :src="require(`@/assets/images/mobile/bg_${theme}_03.jpg`)"
+    >
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+const props = defineProps({
+  theme: {
+    type: Number,
+    default: 1
+  },
+  tabbar: {
+    type: Array,
+    default: () => [],
+    required: false
+  },
+  curTab: {
+    type: Number,
+    default: 0,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  }
+})
+const emits = defineEmits(['update:curTab', 'close'])
+
+const activeTabIdx = computed({
+  set(val) {
+    emits('update:curTab', val)
+  },
+  get() {
+    return props.curTab
+  }
+})
+</script>
+
+<style lang="less" scoped>
+  .mobile-panel {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+
+    .return{
+      position: absolute;
+      margin-left: constant(safe-area-inset-left);
+      margin-left: env(safe-area-inset-left);
+      width: 100px;
+      height: 100px;
+      right: 42px;
+      bottom: 30px;
+      background-image: url(@/assets/images/btn-return.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      z-index: 1;
+    }
+    &__title {
+      flex-shrink: 0;
+      position: relative;
+      width: calc(475 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: 100%;
+      background: url("@/assets/images/mobile/bg_1_01.jpg") no-repeat center / cover;
+
+      h1 {
+        position: absolute;
+        left: calc(50% + 12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        top: calc(50% + 80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: "SourceHanSerifCN-SemiBold";
+        color: #FBF7DC;
+        writing-mode: vertical-lr;
+        letter-spacing: 0.3em;
+        transform: translate(-50%, -50%);
+        white-space: nowrap;
+        z-index: 1;
+
+        &.small {
+          font-size: calc(54 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+    }
+    &__main {
+      position: relative;
+      flex: 1;
+      background: url("@/assets/images/mobile/bg_1_02.jpg") no-repeat center / cover;
+
+      &.hasTab {
+        padding-top: 70px;
+      }
+      .tabbar {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        left: 0;
+        top: 0;
+
+        span{
+          position: relative;
+          padding: 0 20px;
+          line-height: 70px;
+          color: #FFF3C3;
+          background: #AC997F;
+          font-size: 32px;
+          letter-spacing: 8px;
+          font-family: "SourceHanSerifCN-SemiBold";
+          box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
+          cursor: pointer;
+
+          &:not(:last-child)::after {
+            content: '';
+            top: 50%;
+            right: -0.5px;
+            position: absolute;
+            width: 1px;
+            height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            background-color: #FFF3C3;
+            transform: translateY(-50%);
+          }
+        }
+        .active{
+          color: #43310E;
+          background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
+        }
+      }
+    }
+    &__bd {
+      flex-shrink: 0;
+      height: 100%;
+    }
+  }
+</style>

src/components/MsgContent.vue

@@ -139,7 +139,7 @@ watch(curMsg, handleAudio, {
       right: 10vw;
       bottom: 0;
       color: #FFF1BE;
-      font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-size: 20px;
       letter-spacing: 4px;
       line-height: 37px;
       text-indent: 2em;
@@ -158,4 +158,14 @@ watch(curMsg, handleAudio, {
       width: calc(121 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
+
+  @media screen and (max-height: 480px) {
+    .msg-content__inner {
+      font-size: 28px !important;
+    }
+    .msg-content__tips {
+      width: 338px;
+      top: -187px;
+    }
+  }
 </style>

src/components/MutiRelicHotSpot.vue

@@ -224,7 +224,7 @@ const showRandomPoster = () => {
 
     span {
       background: linear-gradient(180deg, #FFFBC4 0%, #E5C05B 100%);
-      -webkit-background-clip: text;
+      background-clip: text;
       -webkit-text-fill-color: transparent;
     }
   }
@@ -312,8 +312,9 @@ const showRandomPoster = () => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     position: relative;
-    padding: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0;
+    padding: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: calc(442 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(565 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     background: url('@/assets/images/hotspot-relic/Label_wenwu-min.png') no-repeat center / cover;
@@ -329,23 +330,18 @@ const showRandomPoster = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      width: calc(269 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding: 0 calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(268 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(71 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       text-align: center;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       box-sizing: border-box;
       background: url('@/assets/images/hotspot-relic/tab_title-min.png') no-repeat center / contain;
 
       p {
         flex: 1;
         width: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         font-size: 17px;
+        line-height: 26px !important;
         letter-spacing: 1px !important;
         font-family: "Source Han Serif CN Heavy" !important;
         color: #724B26;
@@ -353,6 +349,7 @@ const showRandomPoster = () => {
     }
     .img {
       flex-shrink: 0;
+      margin-bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       width: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background-repeat: no-repeat;
@@ -365,10 +362,35 @@ const showRandomPoster = () => {
       font-size: 18px;
       letter-spacing: 0 !important;
       font-family: "Source Han Sans SC light" !important;
-      white-space: nowrap;
-      overflow: hidden;
       text-align: center;
-      text-overflow: ellipsis;
+    }
+  }
+}
+
+@media screen and (max-height: 480px) {
+  .muti-relic {
+    &__close {
+      top: 60px;
+      width: 100px;
+    }
+    &__btn {
+      width: 329px;
+      height: 85px;
+      font-size: 32px;
+    }
+    &__item {
+      padding-top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(500 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(639 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+      &__title {
+        width: calc(350 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(92 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        p {
+          line-height: 32px !important;
+        }
+      }
     }
   }
 }

src/components/RelicDetailForHotspot.vue

@@ -31,6 +31,23 @@
         src="@/assets/images/full.png"
         @click="handleFull"
       >
+
+      <template v-if="imageList.length > 1">
+        <div
+          class="pre-btn"
+          :style="{opacity: activeSwiperItemIndex > 0 ? '1' :'0.4'}"
+          @click="handlePre"
+        >
+          <span>上一页</span>
+        </div>
+        <div
+          class="next-btn"
+          :style="{opacity: activeSwiperItemIndex < imageList.length - 1 ? '1' :'0.4'}"
+          @click="handleNext"
+        >
+          <span>下一页</span>
+        </div>
+      </template>
     </div>
     <div
       class="right"
@@ -72,6 +89,11 @@ const emit = defineEmits(['close'])
 const props = defineProps(['relicInfo', 'relicIndex'])
 const store = useStore()
 
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 968)
+
 console.log('relicInfo: ', props.relicInfo)
 
 const relicInfo = computed(() => {
@@ -291,5 +313,43 @@ const handleFull = () => {
     margin-right: calc(-577 / @page-width-design-px * 100vw);
   }
 
+  .next-btn,
+  .pre-btn {
+    right: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  .pre-btn {
+    left: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+
+@media screen and (max-height: 480px) {
+  .relic-detail-for-hotspot {
+    button.return {
+      width: 100px;
+      height: 100px;
+    }
+    .left {
+      .swiper-root {
+        padding-bottom: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      .full {
+        width: 50px;
+      }
+    }
+    .right {
+      h1 {
+        margin-top: 3vw;
+      }
+      .detail,
+      .age {
+        font-size: 1.25vw;
+      }
+      button.show-hide.right {
+        width: 80px;
+        height: 80px;
+      }
+    }
+  }
 }
 </style>

src/components/ScreenSaver.vue

@@ -54,7 +54,7 @@ const handleClose = () => {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .8);
-  z-index: 9999;
+  z-index: 99999;
 
   .play-icon {
     position: absolute;

src/components/StartUp.vue

@@ -33,6 +33,7 @@
       />
     </transition>
     <img
+      v-if="loaded"
       class="person-animation"
       src="@/assets/images/startup-animation.png"
       alt=""
@@ -75,6 +76,7 @@ import { usePreloader } from '@/hooks/usePreloader'
 
 const $isMobile = inject('$isMobile')
 const store = useStore()
+const loaded = ref(false)
 const { percent: loadingProgress, status, start, reload } = usePreloader({
   list: preloadList,
   cb: () => {
@@ -84,9 +86,9 @@ const { percent: loadingProgress, status, start, reload } = usePreloader({
 
 onMounted(() => {
   Promise.all([
-    preloaderImage(require('@/assets/images/start-up-bg.jpg')),
     preloaderImage(require('@/assets/images/startup-animation.png'))
   ]).then(() => {
+    loaded.value = true
     start()
   })
 })
@@ -245,4 +247,13 @@ function onClickSkip() {
   opacity: 0;
   scale: 1.4;
 }
+
+@media screen and (max-height: 480px) {
+  .start-up > button.start {
+    width: 320px;
+  }
+  .start-up > .video-wrap > button.skip {
+    width: 320px;
+  }
+}
 </style>

src/components/UserGuide.vue

@@ -490,4 +490,19 @@ const handleClose = () => {
     object-fit: cover;
   }
 }
+
+@media screen and (max-height: 480px) {
+  .user-guide {
+    .btn,
+    .left-line,
+    .top-line,
+    .top-line p {
+      font-size: 1.5vw !important;
+    }
+  }
+
+  .guide-tab span {
+    font-size: 1.3vw;
+  }
+}
 </style>

src/hooks/usePreloader.js

@@ -49,7 +49,7 @@ export function usePreloader(params) {
 
             downloadLength += value.length
 
-            if (fileSizeStack.length === params.list.length) {
+            if (fileSizeStack.length >= params.list.length) {
               const mediaSize = fileSizeStack.reduce(
                 (pre, cur) => pre + cur
               )

src/preloadList.js

@@ -8,7 +8,7 @@ export default [
   require('@/assets/images/pose1-min.png'),
   require('@/assets/images/pose2-min.png'),
   require('@/assets/images/pose3-min.png'),
-  require('@/assets/images/pose4-min.png'),
+  // require('@/assets/images/pose4-min.png'),
   require('@/assets/images/slow_talking.png'),
   require('@/assets/images/talk2-min.png'),
   // require('@/assets/images/hotspot-relic/bg_quyuan-min.jpg'),
@@ -38,9 +38,9 @@ export default [
   require('@/assets/videos/screen/screensaver-1-1.mp4'),
   require('@/assets/videos/screen/screensaver-1-2.mp4'),
   require('@/assets/videos/screen/screensaver-1-3.mp4'),
-  // require('@/assets/videos/screen/screensaver-2-1.mp4'),
-  // require('@/assets/videos/screen/screensaver-2-2.mp4'),
-  // require('@/assets/videos/screen/screensaver-2-3.mp4'),
-  // require('@/assets/videos/screen/screensaver-3-1.mp4'),
-  // require('@/assets/videos/screen/screensaver-3-2.mp4'),
+  require('@/assets/videos/screen/screensaver-2-1.mp4'),
+  require('@/assets/videos/screen/screensaver-2-2.mp4'),
+  require('@/assets/videos/screen/screensaver-2-3.mp4'),
+  require('@/assets/videos/screen/screensaver-3-1.mp4'),
+  require('@/assets/videos/screen/screensaver-3-2.mp4'),
 ]

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import PanoView from "@/views/PanoView.vue"
 import RelicList from "@/views/RelicList.vue"
+import RelicListMobile from '@/views/RelicListMobile.vue'
 import RelicDetail from "@/views/RelicDetail.vue"
 import EpilogueView from "@/views/EpilogueView.vue"
 // import ShipGameView from "@/views/ShipGame/ShipGameView.vue"
@@ -24,6 +25,11 @@ const routes = [
     component: RelicList,
   },
   {
+    path: '/relic-list-mobile',
+    name: 'RelicListMobile',
+    component: RelicListMobile,
+  },
+  {
     path: '/relic-detail',
     name: 'RelicDetail',
     component: RelicDetail,

src/views/EpilogueView.vue

@@ -70,7 +70,7 @@ import { useRouter } from "vue-router"
 
 const $isMobile = inject('$isMobile')
 const router = useRouter()
-const isShowVideo = ref(false)
+const isShowVideo = ref(true)
 const stopBgAudio = inject('stopBgAudio')
 // const homeUrl = location.origin + location.pathname
 
@@ -110,7 +110,7 @@ function onClickOfflineMuseumEntry() {
     left: 158px;
     width: 298px;
   }
-  @media only screen and (max-width: 1500px) {
+  @media screen and (max-height: 480px) {
     >img.character{
       left: -20px;
     }
@@ -196,4 +196,10 @@ function onClickOfflineMuseumEntry() {
     }
   }
 }
+
+@media screen and (max-height: 480px) {
+  .epilogue-view > .bottom-wrap > .button-group img {
+    width: 299px !important;
+  }
+}
 </style>