feat: anything

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

@@ -180,7 +180,7 @@ const displayingHotspotIdx = ref(-1)
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #FFFFFF;
     line-height: calc(38 / @page-height-design-px * 100vh);
@@ -233,7 +233,7 @@ const displayingHotspotIdx = ref(-1)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-family: "SourceHanSansSC-Normal";
           font-weight: bold;
           color: #F4D085;
           line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -332,7 +332,7 @@ const displayingHotspotIdx = ref(-1)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-family: "SourceHanSansSC-Normal";
           font-weight: bold;
           color: #43310E;
           line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

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

@@ -137,7 +137,7 @@ const displayingHotspotIdx = ref(0)
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #FFFFFF;
     line-height: calc(38 / @page-height-design-px * 100vh);
@@ -186,7 +186,7 @@ const displayingHotspotIdx = ref(0)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-family: "SourceHanSansSC-Normal";
           font-weight: bold;
           color: #F4D085;
           line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -263,7 +263,7 @@ const displayingHotspotIdx = ref(0)
           align-items: center;
           writing-mode: vertical-lr;
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-family: "SourceHanSansSC-Normal";
           font-weight: bold;
           color: #43310E;
           line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

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

@@ -130,7 +130,7 @@ const title = '大运河的历史演变'
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #514418;
     line-height: calc(38 / @page-height-design-px * 100vh);

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

@@ -108,7 +108,7 @@ const next = () => {
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #FFEEC0;
     line-height: calc(38 / @page-height-design-px * 100vh);

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

@@ -92,7 +92,7 @@ const currentSwitchIdx = ref(0)
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #514418;
     line-height: calc(38 / @page-height-design-px * 100vh);
@@ -155,8 +155,8 @@ const currentSwitchIdx = ref(0)
     >.right{
       flex: 0 0 auto;
       position: relative;
-      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(788 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(387 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background: rgba(145,129,117,0.25);
       border: 1px solid #FFE88B;
       padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -165,8 +165,7 @@ const currentSwitchIdx = ref(0)
       justify-content: center;
       align-items: center;
       >img{
-        width: 100%;
-        height: 100%;
+        width: calc(726 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
     >.next-btn {

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

@@ -5,7 +5,7 @@
       class="return"
       @click="emit('close')"
     />
-    <div class="content-wrap">
+    <div :class="['content-wrap', activeTabIdx === 1 && 'first']">
       <h1>元代瓷器的大发展</h1>
       <div class="tabbar">
         <button
@@ -67,18 +67,6 @@
             <p>
               元代在景德镇专设浮梁磁局，负责为宫廷、官府督造瓷器事宜，极大促进了景德镇制瓷业的发展。浮梁磁局是元王朝在景德镇设置的全国唯一的一所为皇室服务的磁局，秩正九品，至元十五年(1278年)立。掌烧造瓷器，并漆造马尾、棕藤笠帽等事。大使、副使各一员。 在磁局的掌管下创烧了枢府釉瓷、青花、釉里红、蓝釉、蓝地白花、孔雀蓝釉瓷器等。
             </p>
-            <!-- <div
-              class="img-box"
-              style="position: relative;"
-            >
-              <img
-                src="@/assets/images/camera-content-2-3-2-tab-1-img.png"
-                alt=""
-              >
-              <p style="position:absolute;left:0;right: 0;text-align:center;bottom:-25px;color: #666; text-indent: 0;">
-                浮梁古城
-              </p>
-            </div> -->
           </div>
         </div>
       </div>
@@ -95,38 +83,50 @@
             alt=""
           >
           <p
-            class="remark"
-            style="margin-top: -40px;"
+            class="img-tips"
           >
             青白釉串珠纹玉壶春瓶
           </p>
+          <div class="img-box__bg" />
         </div>
       </div>
       <div
         v-if="activeTabIdx === 3"
-        class="tab-content tab-2-content "
+        class="tab-content tab-2-content"
+        style="align-items: center;"
       >
-        <p class="text-indent">
+        <p
+          class="text-indent"
+          style="width: 288px;"
+        >
           元代龙泉窑蓬勃发展，生产规模扩大，产量剧增。龙泉窑遗址曾发现印有八思巴文的碗、盘等遗物，因此有专家认为龙泉窑曾为官府烧造瓷器。龙泉窑瓷器也是元大都遗址出土瓷器的重要种类之一。
         </p>
         <div class="img-box">
           <img
             src="@/assets/images/camera-content-2-3-2-tab-3-img.png"
             alt=""
+            style="bottom: 40px;"
           >
           <p
-            class="remark"
-            style="margin-top: 10px;"
+            class="img-tips"
           >
             青釉海水云龙纹瓶
           </p>
+          <div
+            class="img-box__bg"
+            style="left: 0; bottom: -10px;"
+          />
         </div>
       </div>
       <div
         v-if="activeTabIdx === 4"
         class="tab-content tab-2-content "
+        style="align-items: center; justify-content: center;"
       >
-        <p class="text-indent">
+        <p
+          class="text-indent"
+          style="width: 282px;  padding-right: 55px;"
+        >
           以磁州窑为代表的许多北方窑场，在元代烧制以白地黑花或剔划花为主的陶瓷器，其中不乏器形较大、胎体厚重、装饰题材丰富的器物，具有突出的时代风格。有学者曾进行统计，经考古发掘在元大都出土的瓷器（包括瓷片）中，以磁州窑系的数量最多，约占总数的 40%。
         </p>
         <div class="img-box">
@@ -134,7 +134,9 @@
             src="@/assets/images/camera-content-2-3-2-tab-4-img.png"
             alt=""
           >
-          <p class="remark">
+          <p
+            class="img-tips"
+          >
             白地黑花龙凤纹罐
           </p>
         </div>
@@ -151,10 +153,7 @@
             src="@/assets/images/camera-content-2-3-2-tab-5-img.png"
             alt=""
           >
-          <p
-            class="remark"
-            style="margin-top: 20px;"
-          >
+          <p class="img-tips">
             釉里红花卉纹玉壶春瓶
           </p>
         </div>
@@ -179,6 +178,11 @@ const activeTabIdx = ref(1)
 </script>
 
 <style lang="less" scoped>
+.img-tips {
+  position:absolute;left:0;right: 0;text-align:center;bottom:18px;color: #43310E; text-indent: 0;
+  letter-spacing: 2px;
+  font-size: 14px;
+}
 .camera-content-1-1 {
   position: absolute;
   left: 0;
@@ -211,10 +215,10 @@ const activeTabIdx = ref(1)
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    &:has(.tab-1-content){
-      background-image: url(@/assets/images/camera-content-2-1-3-bg-0.png);
-    }
 
+    &.first {
+      background-image: url(@/assets/images/camera-content-2-1-3-bg2.png);
+    }
     >h1 {
       position: absolute;
       left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -273,8 +277,30 @@ const activeTabIdx = ref(1)
       height: calc(750 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       display: flex;
       justify-content: center;
+    }
+
+    .img-box {
+      position: relative;
+      width: calc(448 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding: 10px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
       align-items: center;
 
+      &__bg {
+        position: absolute;
+        left: -40px;
+        bottom: 0;
+        width: 448px;
+        height: 287px;
+        background: url('@/assets/images/Group482-min.png') no-repeat center / cover;
+        z-index: -1;
+      }
+      img {
+        position: relative;
+        bottom: 18px;
+      }
     }
 
     >.tab-1-content {
@@ -297,42 +323,24 @@ const activeTabIdx = ref(1)
           height: 100%;
 
           >p {
-            // width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            width: 100%;
             max-height: 70%;
             overflow: auto;
             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'));
             padding-right: 0.5em;
             margin-left: 10px;
-          }
-          >.img-box {
-            margin-left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            width: calc(509 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            height: 60%;
-            padding: 10px;
-            box-sizing: border-box;
-            background: rgba(145,129,117,0.25);
-            border: 1px solid #FFE88B;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            >img {
-              width: 100%;
-              height: 100%;
-            }
+            letter-spacing: 4px;
+            font-family: "SourceHanSansSC-Normal";
           }
 
         }
 
         >h3 {
-          width: calc(990 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(762 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(63 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           display: flex;
           justify-content: center;
           align-items: center;
@@ -346,7 +354,7 @@ const activeTabIdx = ref(1)
           color: #6A3906;
           line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          margin-bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin: 0 auto calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
 
       }
@@ -422,18 +430,21 @@ const activeTabIdx = ref(1)
       padding-top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       padding-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       display: flex;
-      justify-content: space-evenly;
-      align-items: center;
+      justify-content: space-between;
 
       >p {
-        width: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-top: 20px;
+        padding-left: 40px;
+        width: calc(410 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         max-height: calc(650 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         // overflow: auto;
         font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         // font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 300;
+        // font-weight: 300;
         color: #000000;
         line-height: 30px;
+        font-family: "SourceHanSansSC-Normal";
+        box-sizing: content-box;
         // letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
 
@@ -447,9 +458,5 @@ const activeTabIdx = ref(1)
       }
     }
   }
-  .remark{
-    padding-top: 5px;
-    text-align: center;
-  }
 }
 </style>

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

@@ -14,14 +14,7 @@
           商品的贸易、货物的流通离不开货币。元代除了使用金银和铜钱，也曾发行纸币。从中统元年（1260）忽必烈颁行中统元宝交钞开始，元代共发行了五种纸币。其中，至元通行宝钞从至元二十四年（1287）发行，一直沿用到元代结束，是元代重要的货币。元代版图辽阔，纸币发行量大、流通范围广，河北平山县也曾出土至元通行宝钞伍佰文的铜版。
         </p>
       </div>
-      <div class="right">
-        <img
-          class=""
-          src="@/assets/images/camera-content-2-3-3-img.png"
-          alt=""
-          draggable="false"
-        >
-      </div>
+      <div class="right" />
     </div>
   </div>
 </template>
@@ -118,11 +111,9 @@ const emit = defineEmits(['close'])
     >.right{
       flex: 0 0 auto;
       position: relative;
-      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: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(788 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(387 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: url('@/assets/images/camera-content-2-3-3-img.png') no-repeat center / cover;
       box-sizing: border-box;
       display: flex;
       justify-content: center;

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

@@ -147,7 +147,7 @@ const next = () => {
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #FFEEC0;
     line-height: calc(38 / @page-height-design-px * 100vh);

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

@@ -113,7 +113,7 @@ const next = () => {
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #FFEEC0;
     line-height: calc(38 / @page-height-design-px * 100vh);

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

@@ -94,7 +94,7 @@ const title = '表演元曲的著名演员'
     background-repeat: no-repeat;
     background-position: center center;
     font-size: calc(32 / @page-height-design-px * 100vh);
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: 800;
     color: #FFEEC0;
     line-height: calc(38 / @page-height-design-px * 100vh);

src/components/CameraDesc.vue

@@ -86,7 +86,7 @@ const descHtml = computed(() => {
       background-repeat: no-repeat;
       background-position: center center;
       font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Serif CN, Source Han Serif CN;
+      font-family: "SourceHanSansSC-Normal";
       font-weight: 800;
       color: #C69E50;
     }
@@ -117,7 +117,7 @@ const descHtml = computed(() => {
       background-position: center center;
       >span{
         font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif CN, Source Han Serif CN;
+        font-family: "SourceHanSansSC-Normal";
         font-weight: 800;
         background: linear-gradient(180deg, #FFFBC4 0%, #E5C05B 100%);
         background-clip: text;

src/components/MsgContent.vue

@@ -93,7 +93,7 @@ watch(curMsg, () => {
       font-size: 22px;
       letter-spacing: 4px;
       line-height: 37px;
-      font-family: Source Han Serif CN, Source Han Serif CN;
+      font-family: "SourceHanSansSC-Normal";
       text-indent: 2em;
     }
     img:first-child {

src/components/MutiRelicHotSpot.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="muti-relic">
+    <div class="muti-relic-container">
+      <div
+        v-for="(item, idx) in relicInfo"
+        :key="idx"
+        class="muti-relic__item"
+        @click="handleClick(idx)"
+      >
+        <p>{{ item['名称'] }}</p>
+        <div
+          class="img"
+          :style="{
+            backgroundImage: `url(${getImgUrl(item)})`
+          }"
+        />
+      </div>
+    </div>
+
+    <div
+      class="mask"
+      @click="emits('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useStore } from "vuex"
+
+const store = useStore()
+const props = defineProps({
+  relicInfo: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emits = defineEmits(['close', 'openRelicDetail'])
+
+const relicInfo = computed(() => {
+  if (!props.relicInfo.hotspotTitle) return []
+
+  const stack = props.relicInfo.hotspotTitle.split(',')
+
+  return stack.map(relicIndex => store.getters.hotRelicData[Number(relicIndex) - 1])
+})
+
+const getImgUrl = (item) => {
+  return `${process.env.BASE_URL}relic-data/big-photo/${item['图片名'][0]}`
+}
+
+const handleClick = (idx) => {
+  const stack = props.relicInfo.hotspotTitle.split(',')
+  emits('openRelicDetail', Number(stack[idx]))
+}
+</script>
+
+<style lang="less" scoped>
+.muti-relic {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9;
+
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.85);
+    z-index: -1;
+  }
+  &-container {
+    display: flex;
+  }
+  &__item {
+    position: relative;
+    width: 427px;
+    height: 491px;
+    background: url('@/assets/images/hotspot-relic/Group491-min.png') no-repeat center / cover;
+    cursor: pointer;
+    transition: transform linear .2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+    p {
+      position: absolute;
+      top: 52px;
+      left: 110px;
+      right: 110px;
+      font-size: 20px;
+      font-family: "Source Han Serif CN-Bold";
+      color: #724B26;
+      line-height: 23px;
+      letter-spacing: 2px;
+      text-align: center;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .img {
+      position: absolute;
+      top: 131px;
+      left: 102px;
+      width: 222px;
+      height: 207px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+  }
+}
+</style>

src/components/RelicDetailForHotspot copy 2.vue

@@ -134,7 +134,7 @@ onMounted(() => {
     top: calc(115 / @page-height-design-px * 100vh);
     writing-mode: vertical-lr;
     font-size: 24px;
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: bold;
     color: #43310E;
     line-height: 28px;

src/components/RelicDetailForHotspot copy.vue

@@ -134,7 +134,7 @@ onMounted(() => {
     top: calc(115 / @page-height-design-px * 100vh);
     writing-mode: vertical-lr;
     font-size: 24px;
-    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-family: "SourceHanSansSC-Normal";
     font-weight: bold;
     color: #43310E;
     line-height: 28px;

src/components/RelicDetailForHotspot.vue

@@ -41,9 +41,9 @@
       <h1 :title="relicInfo['名称']">
         {{ relicInfo['名称'] }}
       </h1>
-      <div
-        v-if="relicInfo['年份']"
-        class="age"
+      <div
+        v-if="relicInfo['年份']"
+        class="age"
       >
         {{ relicInfo['年份'] }}
       </div>
@@ -226,7 +226,7 @@ const handleFull = () => {
       background: linear-gradient(90deg, rgba(255,226,122,0) 0%, #C9AD83 49%, rgba(249,226,148,0) 100%);
       font-size: 30px;
       line-height: 62px;
-      font-family: Source Han Serif CN, Source Han Serif CN;
+      font-family: "SourceHanSansSC-Normal";
       font-weight: 800;
       color: #43310E;
       line-height: 62px;

src/components/UserGuide.vue

@@ -1,93 +1,102 @@
 <template>
   <div class="user-guide">
-    <div
-      class="btn"
-      @click="handleClose"
-    >
-      {{ curStep === 6 ? '我知道了' : '下一步' }}
-    </div>
-    <template v-if="curStep === 0">
-      <div class="user-guide-1" />
-    </template>
-    <template v-else>
-      <template v-if="curStep > 1">
-        <div
-          class="left-line"
-          style="top: 70px"
-        >
-          返回首页
-        </div>
-        <div class="guide-home" />
-
-        <div
-          class="left-line"
-          style="top: 159px"
-        >
-          操作指引
-        </div>
-        <div class="guide-guide" />
-      </template>
+    <video
+      v-if="showVideo"
+      autoplay
+      src="@/assets/videos/guide.mp4"
+      @ended="showVideo = false"
+    />
 
+    <template v-else>
       <div
-        class="guide-dot"
+        class="btn"
+        @click="handleClose"
       >
-        <div
-          class="left-line"
-          style="width: 84px; top: 50%; left: -180px; transform: translateY(-50%)"
-        >
-          <span>场景互动</span>
-        </div>
+        {{ curStep === 6 ? '我知道了' : '下一步' }}
       </div>
+      <template v-if="curStep === 0">
+        <div class="user-guide-1" />
+      </template>
+      <template v-else>
+        <template v-if="curStep > 1">
+          <div
+            class="left-line"
+            style="top: 70px"
+          >
+            返回首页
+          </div>
+          <div class="guide-home" />
 
-      <template v-if="curStep > 5">
-        <div class="top-line">
-          对话赵孟頫
-        </div>
-        <div class="character">
-          <img
-            class="default-frames"
-            src="@/assets/images/pose1-min.png"
-            alt=""
-            draggable="false"
+          <div
+            class="left-line"
+            style="top: 159px"
           >
-        </div>
-      </template>
+            操作指引
+          </div>
+          <div class="guide-guide" />
+        </template>
 
-      <template v-if="curStep > 2">
         <div
-          class="top-line"
-          style="left: 382px; bottom: 520px;"
+          class="guide-dot"
         >
-          阅读历史
-        </div>
-        <div class="guide-menu">
-          营都人员与机构
+          <div
+            class="left-line"
+            style="width: 84px; top: 50%; left: -180px; transform: translateY(-50%)"
+          >
+            <span>场景互动</span>
+          </div>
         </div>
-      </template>
 
-      <template v-if="curStep > 3">
-        <div
-          class="guide-tab"
-          :style="guideTabStyle"
-        >
-          <span>帝都</span>
+        <template v-if="curStep > 5">
+          <div class="top-line">
+            对话赵孟頫
+          </div>
+          <div class="character">
+            <img
+              class="default-frames"
+              src="@/assets/images/pose1-min.png"
+              alt=""
+              draggable="false"
+            >
+          </div>
+        </template>
 
+        <template v-if="curStep > 2">
           <div
             class="top-line"
-            style="left: 15%; top: -110px; height: 21px"
+            style="left: 382px; bottom: 520px;"
           >
-            <p>改变场景位置</p>
+            阅读历史
           </div>
+          <div class="guide-menu">
+            营都人员与机构
+          </div>
+        </template>
+
+        <template v-if="curStep > 3">
+          <div
+            class="guide-tab"
+            :style="guideTabStyle"
+          >
+            <span>帝都</span>
+
+            <div
+              class="top-line"
+              style="left: 15%; top: -110px; height: 21px"
+            >
+              <p>改变场景位置</p>
+            </div>
+          </div>
+        </template>
+
+        <div
+          v-if="curStep > 4"
+          class="top-line"
+          style="left: unset; right: calc(25 / 1920 * 100vw); bottom: calc(290 / 1080 * 100vh);"
+        >
+          切换场景
         </div>
       </template>
-
-      <div
-        v-if="curStep > 4"
-        class="top-line"
-        style="left: unset; right: calc(25 / 1920 * 100vw); bottom: calc(290 / 1080 * 100vh);"
-      >
-        切换场景
-      </div>
     </template>
   </div>
 </template>
@@ -97,6 +106,7 @@ import { onMounted, ref } from "vue"
 
 const curStep = ref(0)
 const guideTabStyle = ref('')
+const showVideo = ref(true)
 const emits = defineEmits(['close'])
 
 onMounted(() => {
@@ -199,7 +209,7 @@ const handleClose = () => {
 }
 .guide-dot {
   position: absolute;
-  top: 12.5%;
+  top: 13%;
   right: 44.8%;
   width: 35px;
   height: 35px;

src/views/PanoView.vue

@@ -18,6 +18,13 @@
         })"
       />
       <button
+        v-if="sceneIdx === 1"
+        class="ship-btn"
+        @click="router.push({
+          name: 'ShipGame',
+        })"
+      />
+      <button
         v-if="sceneIdx === 0 && cameraIdx === 0"
         class="guide-btn"
         @click="showGuide = true"
@@ -327,7 +334,17 @@
     v-if="showGuide"
     @close="() => {
       showGuide = false
-      isShowCharacterDesc = true
+      // isShowCharacterDesc = true
+    }"
+  />
+
+  <MutiRelicHotSpot
+    v-if="isShowHotspotDetail3"
+    :relic-info="hotspotRelicInfo"
+    @close="isShowHotspotDetail3 = false"
+    @open-relic-detail="(e) => {
+      hotspotIndex = e
+      isShowHotspotDetail = true
     }"
   />
 </template>
@@ -346,6 +363,7 @@ import { useWindowSize } from '@vueuse/core'
 import MsgContent from '@/components/MsgContent.vue'
 import UserGuide from "@/components/UserGuide.vue"
 import OpenState from './OpenState.vue'
+import MutiRelicHotSpot from "@/components/MutiRelicHotSpot.vue"
 
 const GUIDE_KEY = 'is-open-guide'
 const msgVisible = ref(false)
@@ -700,6 +718,10 @@ watch(sceneIdx, (vNew) => {
 let sceneIntroAudioTimeoutId = null
 let audio = null
 
+/**
+ * 禁用讲解视频跳过按钮
+ */
+let jumpIntroduceDisable = false
 function onPlayedFirstSceneIntroVideoEnded() {
   store.commit('setHaveShownSceneEffect', {
     idx: sceneIdx.value,
@@ -716,6 +738,8 @@ function onPlayedFirstSceneIntroVideoEnded() {
     cameraIdx: cameraIdx.value,
     canPlay: !isShowSceneIntroVideoStart.value
   })
+
+  jumpIntroduceDisable = false
 }
 
 // 跳过按钮 位置
@@ -753,6 +777,9 @@ function skipSceneIntro() {
   sceneIntrovideoEndEl.value?.pause()
 }
 function skipFirstSceneIntro() {
+  if (jumpIntroduceDisable) return
+
+  jumpIntroduceDisable = true
   const video = sceneIntrovideoStartEl.value
   switch (sceneIdx.value) {
   case 0:
@@ -849,12 +876,12 @@ const currentVr = computed(() => {
     case 1:
       return 'fd720_I2StypBk9'
     default:
-      return 'fd720_s9WjwfMcG'
+      return 'fd720_tnhWSM7pp'
     }
   default:
     switch (Number(route.query.cameraIdx)) {
     case 0:
-      return 'fd720_Xzq2fjoBa'
+      return 'fd720_PC5bdcJnU'
     default:
       return 'fd720_0vzJY3UBA'
     }
@@ -880,6 +907,7 @@ watch(cameraIdx, (vNew) => {
 
 const isShowHotspotDetail = ref(false)
 const isShowHotspotDetail2 = ref(!!route.query.hotspot)
+const isShowHotspotDetail3 = ref(false)
 const hotspotRelicInfo = ref(route.query.hotspot ? {
   name: route.query.hotspot
 } : {})
@@ -893,7 +921,14 @@ window.showHotspotDetail2 = function(hotspotInfo) {
   console.log(hotspotInfo)
   console.log(hotspotInfo.hotspotTitle)
   hotspotRelicInfo.value = hotspotInfo
-  isShowHotspotDetail2.value = true
+  msgVisible.value = false
+
+  if (hotspotInfo.hotspotTitle.split(',').length > 1) {
+    // 多文物
+    isShowHotspotDetail3.value = true
+  } else {
+    isShowHotspotDetail2.value = true
+  }
 }
 window.showHotspotDetail = function(hotspotInfo) {
   console.log('parent window: 展示热点详情')
@@ -1040,6 +1075,21 @@ onMounted(() => {
       background-position: center center;
       z-index: 5;
     }
+    >button.ship-btn{
+      position: absolute;
+      width: 77px;
+      height: 77px;
+      top: 128px;
+      right: 51px;
+      background-image: url('@/assets/images/ship-game/tbn_game_boat-min.png');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      z-index: 5;
+      &:hover{
+        background-image: url('@/assets/images/ship-game/btn_game boat_hover_green-min.png');
+      }
+    }
     >button.return-home{
       position: absolute;
       width: 77px;

src/views/RelicDetail.vue

@@ -221,7 +221,7 @@ const handleFull = () => {
       background: linear-gradient(90deg, rgba(255,226,122,0) 0%, #C9AD83 49%, rgba(249,226,148,0) 100%);
       font-size: 30px;
       line-height: 62px;
-      font-family: Source Han Serif CN, Source Han Serif CN;
+      font-family: "SourceHanSansSC-Normal";
       font-weight: 800;
       color: #43310E;
       line-height: 62px;

src/views/RelicList.vue

@@ -425,7 +425,7 @@ const handleScroll = debounce(() => {
           line-height: calc(47 / @page-height-design-px * 100vh * 0.83);
           height: calc(261 / @page-height-design-px * 100vh * 0.83);
           font-size: calc(19 / @page-height-design-px * 100vh * 0.83);
-          font-family: Source Han Serif CN, Source Han Serif CN;
+          font-family: "SourceHanSansSC-Normal";
           font-weight: 800;
           color: #43310E;
           display: -webkit-box;

src/views/ShipGame/ShipGameView.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="ship-game">
+    <img
+      class="close"
+      draggable="false"
+      src="@/assets/images/ship-game/icon_cancel-min.png"
+      @click="back"
+    >
+
     <div
       v-if="showBanner"
       class="ship-game-banner"
@@ -18,77 +25,99 @@
       </button>
     </div>
 
-    <img
-      class="logo2"
-      src="@/assets/images/ship-game/Group 493-min.png"
-    >
-    <p class="tips">
-      长按下方部件并拖动到正确位置，完成船只拼图
-    </p>
-
-    <div class="ship-game-container">
-      <template
-        v-for="item in MODULE_LIST"
-        :key="item.key"
+    <template v-else>
+      <img
+        class="logo2"
+        draggable="false"
+        src="@/assets/images/ship-game/Group 493-min.png"
       >
-        <Container
-          v-if="curDragKey === item.key || checkedModule.includes(item.key)"
-          class="img"
-          group-name="default"
-          :should-animate-drop="() => false"
-          :style="`${item.hightImgStyle} background: url(${checkedModule.includes(item.key) ? item.img : item.hightImg}) no-repeat center / cover`"
-          @drop="res => {
-            checkedModule.push(res.payload.key)
-          }"
+      <p class="tips">
+        长按下方部件并拖动到正确位置，完成船只拼图
+      </p>
+
+      <div class="ship-game-container">
+        <template
+          v-for="item in MODULE_LIST"
+          :key="item.key"
         >
-          <div />
-        </Container>
-      </template>
-    </div>
+          <Container
+            v-if="curDragKey === item.key || checkedModule.includes(item.key)"
+            class="img"
+            group-name="default"
+            :should-animate-drop="() => false"
+            :style="`${item.hightImgStyle} background: url(${checkedModule.includes(item.key) ? item.img : item.hightImg}) no-repeat center / cover`"
+            @drop="res => {
+              if (!checkedModule.includes(res.payload.key)) {
+                checkedModule.push(res.payload.key)
+              }
+            }"
+          >
+            <div />
+          </Container>
+        </template>
+      </div>
 
-    <Container
-      behaviour="copy"
-      drag-class="drag-class"
-      class="ship-game-footer drag"
-      group-name="default"
-      :get-child-payload="(x) => MODULE_LIST[x]"
-      @drag-end="() => {
-        curDragKey = ''
-      }"
-    >
-      <Draggable
-        v-for="item in MODULE_LIST"
-        :key="item.key"
-        class="ship-game-footer__item"
-        @mousedown="() => {
-          curDragKey = item.key
+      <Container
+        behaviour="copy"
+        drag-class="drag-class"
+        class="ship-game-footer drag"
+        group-name="default"
+        non-drag-area-selector=".checked"
+        :get-child-payload="(x) => MODULE_LIST[x]"
+        @drag-end="() => {
+          curDragKey = ''
         }"
       >
-        <img
-          draggable="false"
-          :src="item.img"
-          :style="{width: item.imgWidth}"
+        <Draggable
+          v-for="item in MODULE_LIST"
+          :key="item.key"
+          :class="['ship-game-footer__item', checkedModule.includes(item.key) && 'checked']"
+          @mousedown="() => {
+            curDragKey = item.key
+          }"
         >
-      </Draggable>
-    </Container>
+          <img
+            draggable="false"
+            :src="item.img"
+            :style="{width: item.imgWidth}"
+          >
 
-    <div class="ship-game-footer">
-      <div
-        v-for="item in MODULE_LIST"
-        :key="item.key"
-        :class="['ship-game-footer__item', checkedModule.includes(item.key) && 'checked']"
-      >
-        <span>{{ item.label }}</span>
+          <div
+            v-if="checkedModule.includes(item.key)"
+            class="icon"
+          />
+        </Draggable>
+      </Container>
+
+      <div class="ship-game-footer">
+        <div
+          v-for="item in MODULE_LIST"
+          :key="item.key"
+          :class="['ship-game-footer__item']"
+        >
+          <span>{{ item.label }}</span>
+        </div>
       </div>
-    </div>
+    </template>
+
+    <video
+      v-if="showVideo"
+      class="video"
+      autoplay
+      src="@/assets/videos/ship-game/end.mp4"
+      @ended="back"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { Container, Draggable } from "vue3-smooth-dnd"
 
-const showBanner = ref(false)
+const router = useRouter()
+const showBanner = ref(true)
+const showVideo = ref(false)
 const MODULE_LIST = [
   {
     label: '甲板',
@@ -141,6 +170,20 @@ const MODULE_LIST = [
 ]
 const curDragKey = ref('')
 const checkedModule = ref([])
+
+watch(checkedModule, val => {
+  if (val.length === 6) {
+    setTimeout(() => {
+      showVideo.value = true
+    }, 200)
+  }
+}, {
+  deep: true
+})
+
+const back = () => {
+  router.back()
+}
 </script>
 
 <style lang="less" scoped>
@@ -152,6 +195,21 @@ const checkedModule = ref([])
   height: 100vh;
   background: #F3EAE3;
 
+  .close {
+    position: absolute;
+    top: 52px;
+    right: 58px;
+    cursor: pointer;
+    z-index: 8;
+  }
+  .video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9;
+  }
   &-container {
     position: absolute;
     top: 40px;
@@ -180,6 +238,7 @@ const checkedModule = ref([])
     font-size: 22px;
     color: #2E5A89;
     line-height: 37px;
+    user-select: none;
   }
   &-footer {
     position: fixed;
@@ -212,6 +271,29 @@ const checkedModule = ref([])
       box-sizing: border-box;
       background: #524B4B;
 
+      &.checked {
+        user-select: none;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(255, 255, 255, .3);
+          z-index: 1;
+        }
+      }
+      .icon {
+        position: absolute;
+        top: 9px;
+        right: 13px;
+        width: 45px;
+        height: 45px;
+        background: url('@/assets/images/ship-game/Frame-min.png') no-repeat center / cover;
+        z-index: 2;
+      }
       img {
         width: 100%;
         cursor: pointer;
@@ -237,7 +319,7 @@ const checkedModule = ref([])
     height: 100vh;
     background: url("@/assets/images/ship-game/bg_-min.png") no-repeat center /
       cover;
-    z-index: 2;
+    z-index: 5;
 
     p {
       padding: 20px 0 120px;