改改改

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

@@ -109,7 +109,9 @@
         :class="['hy', hyHover && 'hover']"
         @mouseover="hyHover = true"
         @click="() => {
-          emits('openShipGame')
+          store.dispatch('openGameEntryPage', {
+            gameName: '聊城古船',
+          })
           hy3Hover = false;
           hy3DetailVisbile = false;
         }"

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/PanoView.vue

@@ -359,6 +359,13 @@
     }"
   />
 
+  <GameEntryPage
+    v-if="store.state.gameEntryPageAttrs"
+    style="z-index: 998;"
+    class="game-entry-page"
+    @playShipGame="showShipGame = true"
+  />
+
   <div
     v-if="showShipGame"
     style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;"
@@ -385,6 +392,7 @@ import UserGuide from "@/components/UserGuide.vue"
 // import OpenState from './OpenState.vue'
 import MutiRelicHotSpot from "@/components/MutiRelicHotSpot.vue"
 import ShipGameView from '@/views/ShipGame/ShipGameView.vue'
+import GameEntryPage from '@/components/GameEntryPage.vue'
 
 const GUIDE_KEY = 'is-open-guide'
 const msgVisible = ref(false)
@@ -977,8 +985,13 @@ window.showHotspotDetail = function(hotspotInfo) {
   }
 }
 window.showIframe = (hotspotInfo) => {
+  console.log('parent window: showIframe...')
   store.dispatch('openIframePage', hotspotInfo)
 }
+window.showGameEntryPage = function(hotspotInfo) {
+  console.log('parent window: showGameEntryPage. param: ', hotspotInfo)
+  store.dispatch('openGameEntryPage', hotspotInfo)
+}
 /**
  * end of iframe的逻辑
  */

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 MODULE_LIST = [
   {