Merge branch 'master' into flexible

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

@@ -41,12 +41,12 @@
               大德年间，任仁发因治水有功，入宫觐见元成宗，任都水司监丞，至大二年（1309），任中尚院判官，并主持修治通惠河河闸、开掘会通河僵沙等，以此升任都水司少监。赵孟頫在为任仁发《水利集》所作跋中称赞任仁发“世居江乡，素谙农务水利之辙。……川泽在人心，名声满天下”。
               经调查，任仁发家族墓地共有六座，皆为石室墓。出土墓志八方，分属任仁发及其子贤才、贤能、贤德，三侄任良佑、任明、任良辅，一孙媳钦察台守真荣。任仁发墓地出土器物丰富，但因文物遭到盗扰，无法确定归属，现分藏中国国家博物馆、上海博物馆和南京博物院。
             </p>
-            <div class="img-box">
+            <!-- <div class="img-box">
               <img
                 src="@/assets/images/camera-content-2-1-3-tab-1-img.png"
                 alt=""
               >
-            </div>
+            </div> -->
           </div>
         </div>
         <div

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

@@ -105,7 +105,12 @@
               </div>
             </div>
           </div>
-          <img src="@/assets/images/camera-content-3-1-2-tab-2-img.png">
+          <div class="right-img">
+            <img src="@/assets/images/camera-content-3-1-2-tab-2-img.png">
+            <div class="title">
+              玉山雅集图
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -335,8 +340,20 @@ const activeTabIdx = ref(1)
             width: 50%;
           }
         }
-        >img {
+        > .right-img{
+          position: relative;
           height: calc(464 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          >img {
+            height: 100%;
+          }
+          >.title{
+            position: absolute;
+            left: 50%;
+            top: 100%;
+            transform: translate(-50%, 100%);
+            font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            font-family: "Source Han Sans SC light";
+          }
         }
       }
     }

src/components/GameEntryPage.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="game-entry-page">
+    <button
+      class="return"
+      @click="store.dispatch('closeGameEntryPage')"
+    />
+    <div class="entry-list">
+      <div
+        class="entry-item"
+        @click="store.dispatch('openIframePage', {
+          url: 'https://houseoss.4dkankan.com/project/yzdyh-dadu/ghg/index.html',
+          style: 'width: 100%; height: 100%'
+        })"
+      >
+        <img
+          v-if="gameName !== '广寒宫'"
+          class=""
+          src="@/assets/images/game-entry-jigsaw.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-if="gameName === '广寒宫'"
+          class="highlight"
+          src="@/assets/images/game-entry-jigsaw-highlight.png"
+          alt=""
+          draggable="false"
+        >
+        <h3>广寒胜境</h3>
+      </div>
+      <div
+        class="entry-item"
+        @click="emit('playShipGame')"
+      >
+        <img
+          v-if="gameName !== '聊城古船'"
+          class=""
+          src="@/assets/images/game-entry-boat.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-if="gameName === '聊城古船'"
+          class="highlight"
+          src="@/assets/images/game-entry-boat-highlight.png"
+          alt=""
+          draggable="false"
+        >
+        <h3>舟楫千里</h3>
+      </div>
+      <div
+        class="entry-item"
+        @click="store.dispatch('openIframePage', {
+          url: 'https://houseoss.4dkankan.com/project/yzdyh-dadu/duobaoge/index.html',
+          style: 'width: 100%; height: 100%'
+        })"
+      >
+        <img
+          v-if="gameName !== '多宝阁'"
+          class=""
+          src="@/assets/images/game-entry-relic-show.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          v-if="gameName === '多宝阁'"
+          class="highlight"
+          src="@/assets/images/game-entry-relic-show-highlight.png"
+          alt=""
+          draggable="false"
+        >
+        <h3>古瓷集珍</h3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const gameName = store.state.gameEntryPageAttrs.gameName
+
+const emit = defineEmits(['playShipGame'])
+
+</script>
+
+<style lang="less" scoped>
+.game-entry-page{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/game-entry-page-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  >button.return{
+    position: absolute;
+    top: 68px;
+    left: 42px;
+    width: 58px;
+    height: 58px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >.entry-list{
+    position: absolute;
+    left: 50%;
+    top: 60%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 106px;
+    >.entry-item{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      cursor: pointer;
+      >img{
+        width: 284px;
+        height: 284px;
+        margin-bottom: 43px;
+      }
+      >img.highlight{
+        width: 326px;
+        height: 326px;
+        margin-bottom: 0px;
+        transform: translateY(-20px);
+      }
+      >h3{
+        font-size: 28px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        color: #43310E;
+        line-height: 36px;
+      }
+    }
+  }
+}
+</style>

src/components/HotspotDialog-1.vue

@@ -149,7 +149,9 @@
         :class="['hy', hyHover && 'hover']"
         @mouseover="hyHover = true"
         @click="() => {
-          emits('openShipGame')
+          store.dispatch('openGameEntryPage', {
+            gameName: '聊城古船',
+          })
           hy3Hover = false;
           hy3DetailVisbile = false;
         }"
@@ -687,7 +689,7 @@ const isDDLS = computed(() =>
 
 const openNewWindow = async() => {
   store.dispatch('openIframePage', {
-    url: 'http://192.168.0.44:8082' || 'https://houseoss.4dkankan.com/project/yzdyh-dadu/game/index.html',
+    url: 'https://houseoss.4dkankan.com/project/yzdyh-dadu/game/index.html',
     style: $isMobile ? 'width: 100vh; height: 100%' : 'width: 375px; height: 812px'
   })
 }
@@ -769,7 +771,7 @@ const currentMsg = computed(() => {
     // }
     if (hy3DetailVisbile.value) {
       return [
-        "<p>元末运粮官船，1975年河北磁县漳河故道附近出土，共六艘，有的船只尾部还烫有“漳河分省粮船”等字。六艘船都已残破，但仍可看出方头平底，分为数舱。其中最大的五号船，残长16.6米，十一舱，也是平衡舵。</p>",
+        "元末运粮官船，1975年河北磁县漳河故道附近出土，共六艘，有的船只尾部还烫有“漳河分省粮船”等字。六艘船都已残破，但仍可看出方头平底，分为数舱。其中最大的五号船，残长16.6米，十一舱，也是平衡舵。",
       ]
     }
     return []

src/components/MsgContent.vue

@@ -8,6 +8,7 @@
         _curIndex = 0
         emits('end')
       }
+      removeAudio()
     }"
   >
     <div
@@ -53,23 +54,26 @@ const curMsg = computed(() => {
 let audio = null
 
 const removeAudio = () => {
-  audio?.pause()
+  if (!audio) return
+  audio.pause()
+  audio.remove()
   audio = null
 }
 
-onBeforeUnmount(() => {
-  removeAudio()
-})
-
-watch(curMsg, () => {
+const handleAudio = () => {
   const item = props.list[_curIndex.value]
-  audio?.pause()
   if (typeof item === 'object') {
     audio = new Audio(require(`@/assets/audios/${props.list[_curIndex.value].audio}`))
     audio.volume = 0.7
     audio.play()
   }
-}, {
+}
+
+onBeforeUnmount(() => {
+  removeAudio()
+})
+
+watch(curMsg, handleAudio, {
   immediate: true
 })
 </script>
@@ -100,7 +104,7 @@ watch(curMsg, () => {
       text-indent: 2em;
 
       p {
-        font-family: "SourceHanSansSC-Normal" !important;
+        font-family: "Source Han Sans SC Normal" !important;
       }
     }
     img:first-child {
@@ -110,7 +114,7 @@ watch(curMsg, () => {
       position: absolute;
       right: 36px;
       bottom: 23px;
-      width: calc(121 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+      width: calc(121 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
 </style>

src/components/MutiRelicHotSpot.vue

@@ -299,8 +299,9 @@ const showRandomPoster = () => {
   &__compose,
   &__poster {
     position: absolute;
-    top: 50%;
+    top: 44%;
     left: 50%;
+    height: 85%;
     animation: bounceIn linear .2s;
     transform: translate(-50%, -50%);
     cursor: pointer;

src/store/index.js

@@ -14,10 +14,12 @@ export default createStore({
     haveShownSceneEffect: [false, false, false],
     relicDataRaw: projectData['长轴展示文物清单'],
     hotRelicDataRaw: projectData['宝盒文物清单'],
-    iframeAttrs: null
+    iframeAttrs: null,
+    gameEntryPageAttrs: null,
   },
   getters: {
     iframeAttrs: (state) => state.iframeAttrs,
+    gameEntryPageAttrs: (state) => state.gameEntryPageAttrs,
     catalogTopology: (state) => {
       if (!state.panoData || !state.panoData.catalogRoot || !state.panoData.catalogs) {
         return
@@ -78,6 +80,9 @@ export default createStore({
     setIframeAttrs(state, value) {
       state.iframeAttrs = value
     },
+    setGameEntryPageAttrs(state, value) {
+      state.gameEntryPageAttrs = value
+    },
     setPanoData(state, value) {
       state.panoData = value
     },
@@ -98,9 +103,15 @@ export default createStore({
     openIframePage({ commit }, attrs) {
       commit('setIframeAttrs', attrs)
     },
+    openGameEntryPage({ commit }, attrs) {
+      commit('setGameEntryPageAttrs', attrs)
+    },
     closeIframePage({ commit }) {
       commit('setIframeAttrs', null)
     },
+    closeGameEntryPage({ commit }) {
+      commit('setGameEntryPageAttrs', null)
+    },
   },
   modules: {
   }

src/views/EpilogueView.vue

@@ -34,11 +34,18 @@
         大都，朔土高厚，民生劲强，千官笏列，彤墀仙簇，梯航入贡，玉帛来庭。独特的风貌与鲜明的特点，成为大都有别于他处的城市名片。于此，我们借往昔之映像，拨记忆之心弦；历史娓娓道来，城的厚重与瑰丽也得以再现。
       </p>
 
-      <img
-        class="restart"
-        src="@/assets/images/btn-min.png"
-        @click="router[$isMobile? 'replace' : 'push']('/')"
-      >
+      <div class="button-group">
+        <img
+          class="restart"
+          src="@/assets/images/btn-min.png"
+          @click="router[$isMobile? 'replace' : 'push']('/')"
+        >
+        <img
+          class="offline-museum-entry"
+          src="@/assets/images/btn-offline-museum.png"
+          @click="onClickOfflineMuseumEntry"
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -61,6 +68,11 @@ const imageUrl = ref('')
 QRCode.toDataURL(`${location.origin}/project/yzdyh-dadu/index.html`).then((url) => {
   imageUrl.value = url
 })
+
+function onClickOfflineMuseumEntry() {
+  location.assign('https://houseoss.4dkankan.com/project/yuanDaDu/index.html')
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -119,8 +131,17 @@ QRCode.toDataURL(`${location.origin}/project/yzdyh-dadu/index.html`).then((url)
       font-size: 20px;
       font-family: "SourceHanSansSC-Normal";
     }
-    .restart {
-      cursor: pointer;
+    >.button-group{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 39px;
+      >.restart {
+        cursor: pointer;
+      }
+      >.offline-museum-entry{
+        cursor: pointer;
+      }
     }
     >.qr-code{
       display: flex;

src/views/RelicList.vue

@@ -429,6 +429,7 @@ const handleScroll = debounce(() => {
           color: #43310E;
           overflow: hidden;
           writing-mode: vertical-rl;
+          letter-spacing: 0.2em;
           background-image: url(@/assets/images/relic-item-title-bg.png);
           background-size: contain;
           background-repeat: no-repeat;

src/views/ShipGame/ShipGameView.vue

@@ -119,7 +119,7 @@ import { ref, watch } from 'vue'
 import { Container, Draggable } from "vue3-smooth-dnd"
 
 // const router = useRouter()
-const showBanner = ref(true)
+const showBanner = ref(false)
 const showVideo = ref(false)
 const {
   windowSizeInCssForRef,