style: --

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

@@ -129,8 +129,8 @@ const activeTabIdx = ref(0)
       flex: 0 0 437px;
       margin-left: 23px;
       padding: 20px;
-      border: 1px solid #FFE88B;
-      background: rgba(145,129,117,0.25);
+      // border: 1px solid #FFE88B;
+      // background: rgba(145,129,117,0.25);
     }
     p {
       font-size: 20px;

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

@@ -10,7 +10,7 @@
         <p class="card-title left">
           忽必烈召见赵孟頫
         </p>
-        <p>
+        <p class="text-indent">
           赵孟頫觐见忽必烈，得到忽必烈的称许：“果真是一表人才、丰神俊朗，就如那九天之上的仙人啊！朕授予你兵部郎中之职，愿你尽忠职守。”
         </p>
       </div>
@@ -21,6 +21,8 @@
           playsinline
           webkit-playsinline="true"
           x5-video-player-type="h5"
+          @play="stopBgAudio"
+          @pause="startBgAudio"
         />
       </div>
     </div>
@@ -28,21 +30,20 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
+import { inject, onBeforeUnmount } from 'vue'
 
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 970)
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
 const emit = defineEmits(['close'])
+const stopBgAudio = inject('stopBgAudio')
+const startBgAudio = inject('startBgAudio')
 
+onBeforeUnmount(() => {
+  startBgAudio()
+})
 </script>
 
 <style lang="less" scoped>
@@ -95,8 +96,6 @@ const emit = defineEmits(['close'])
       position: relative;
 
       video {
-        background: black;
-        width: calc(900 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(453 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }

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

@@ -186,11 +186,11 @@ const activeTabIdx = ref(1)
       &__inner {
         margin-right: 40px;
       }
-      > img {
-        padding: 17px;
-        background: rgba(145,129,117,0.25);
-        border: 1px solid #FFE88B;
-      }
+      // > img {
+      //   padding: 17px;
+      //   background: rgba(145,129,117,0.25);
+      //   border: 1px solid #FFE88B;
+      // }
     }
     >.default-content{
       padding: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'))

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

@@ -13,25 +13,10 @@
         瓦当与滴水是用在古代建筑檐口的瓦件，分别与筒瓦、板瓦相连，既具有保护木构的作用，也有装饰和等级意味。元代高等级建筑使用的龙纹瓦当、滴水，在元大都、元中都、元上都都有不少发现，其中以黄绿琉璃最为常见。元人尚白，考古也曾发现白色瓷瓦或琉璃瓦。发现数量更多的是灰陶瓦件，元大都出土的灰陶瓦当、滴水，以花草纹、凤鸟纹、兽面纹为大宗。
       </p>
       <div class="design-wrap-right">
-        <!-- 左右按钮 -->
-        <img
-          class="btn-left"
-          src="@/assets/images/CameraContent-3-1-3-left.png"
-          alt=""
-          :style="{opacity: currentSwitchIdx == 0 ? '0.4':'1'}"
-          @click="previous()"
-        >
-        <img
-          class="btn-right"
-          src="@/assets/images/CameraContent-3-1-3-right.png"
-          alt=""
-          :style="{opacity: currentSwitchIdx == imgLists.length - 1 ? '0.4':'1'}"
-          @click="next()"
-        >
         <img
           class="detail-img"
           draggable="false"
-          :src="require(`@/assets/images/133${currentSwitchIdx + 1}.png`)"
+          :src="require(`@/assets/images/1331.png`)"
           alt=""
         >
       </div>
@@ -40,39 +25,12 @@
 </template>
 
 <script setup>
-import { ref } from "vue"
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 970)
 
 const emit = defineEmits(['close'])
-const currentSwitchIdx = ref(0)
-const imgLists = [
-  '@/assets/images/1331',
-  '@/assets/images/1332',
-  '@/assets/images/1333',
-]
-
-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
-  }
-}
 </script>
 
 <style lang="less" scoped>
@@ -100,7 +58,7 @@ const next = () => {
     left: 50%;
     top: 54%;
     padding: 140px 975px 140px 150px;
-    width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 100vw;
     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);
@@ -120,13 +78,13 @@ const next = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(816 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(436 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    background: rgba(145,129,117,0.25);
-    border: 1px solid #FFE88B;
+    width: calc(719 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(196 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    // background: rgba(145,129,117,0.25);
+    // border: 1px solid #FFE88B;
     position: absolute;
-    top: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    right: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: calc(295 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(149 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     >.btn-left {
       width: 60px;
       height: 60px;

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

@@ -36,13 +36,13 @@
             style="margin-top: -40px;"
           >
             <div class="title text-indent">
-              第一次全线贯通：隋唐大运河。
+              第一次全线贯通：隋唐大运河
             </div>
             <p
               class="content text-indent"
               :style="{marginBottom: '27px'}"
             >
-              大运河隋代完成第一次全线贯通，形成隋唐宋时期以洛阳为中心沟通中国南方北方的大运河（隋唐大运河）
+              大运河隋代完成第一次全线贯通，形成隋唐宋时期以洛阳为中心沟通中国南方北方的大运河（隋唐大运河）。
             </p>
             <div class="title text-indent">
               截弯取直再次大贯通：京杭大运河
@@ -66,6 +66,15 @@
         </div>
       </div>
       <div
+        class="pre-btn"
+        :style="{opacity: currentSwitchIdx > 0 ? '1' :'0.4'}"
+        @click="() => {
+          currentSwitchIdx >= 1 ? currentSwitchIdx -= 1 : 0
+        }"
+      >
+        <span>上一页</span>
+      </div>
+      <div
         class="next-btn"
         :style="{opacity: currentSwitchIdx < 2 ? '1' :'0.4'}"
         @click="() => {
@@ -222,7 +231,7 @@ const title = '大运河的历史演变'
           writing-mode: vertical-lr;
           letter-spacing: 0.3em;
           display: flex;
-          justify-content: start;
+          justify-content: center;
           padding: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0;
           align-items: center;
         }
@@ -249,9 +258,10 @@ const title = '大运河的历史演变'
         }
       }
     }
-    >.next-btn {
-      width: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.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;
@@ -268,6 +278,10 @@ const title = '大运河的历史演变'
         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'));
+    }
   }
 }
 </style>

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

@@ -204,9 +204,9 @@ 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;
+        // background: rgba(145,129,117,0.25);
+        // border: 1px solid #FFE88B;
+        // padding: 15px 10px;
         position: relative;
         >.btn-left {
           width: 50px;

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

@@ -252,10 +252,10 @@ const tab1ContentPageNumber = ref(1)
           >.img-box {
             margin-left: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
             width: calc(385 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            padding: 10px;
+            // padding: 10px;
             box-sizing: border-box;
-            background: rgba(145,129,117,0.25);
-            border: 1px solid #FFE88B;
+            // background: rgba(145,129,117,0.25);
+            // border: 1px solid #FFE88B;
             display: flex;
             justify-content: center;
             align-items: center;

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

@@ -128,9 +128,9 @@ const emit = defineEmits(['close'])
         top: 0;
         width: 100%;
         height: 100%;
-        background: rgba(145,129,117,0.25);
-        border: 1px solid #FFE88B;
-        padding: calc(25 / 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'));
       }
     }
   }

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

@@ -8,53 +8,41 @@
     <div class="content-wrap">
       <div class="left">
         <h2 class="one">
-          磁县漕船（模型）
+          运河上的船
         </h2>
-        <p class=" text-indent">
-          船长108cm、船宽28cm、船高26cm
-        </p>
-        <p class=" text-indent">
-          隔舱板、肋骨：江西小叶樟
-        </p>
-        <p class=" text-indent">
-          甲板、船壳外板：柚木、梢木
-        </p>
-        <p class="one text-indent">
-          船附件：菠萝格、龙眼木
-        </p>
-        <!-- <p class="one text-indent">
-          元末运粮官船，1975年河北磁县漳河故道附近出土，共六艘，有的船的尾部还烫有“漳河分省粮船”等字。六条船都已残破，但仍可看出方头平底，分为数舱。其中最大的五号船，残长16.6米，十一舱，也是平衡舵。
-        </p> -->
       </div>
-      <div class="right">
-        <img
-          class=""
-          src="@/assets/images/camera-content-2-2-2-img.png"
-          alt=""
-          draggable="false"
-        >
-        <p> 图注：模型（依据史料定制复原）</p>
+      <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>
-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>
@@ -66,6 +54,21 @@ const emit = defineEmits(['close'])
   height: 100%;
   background: rgba(0,0,0,0.45);
   backdrop-filter: blur(60px);
+  .inner {
+    position: absolute;
+    top: 137px;
+    left: 163px;
+    right: 103px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+
+    p {
+      letter-spacing: 3px !important;
+      text-align: center;
+      font-size: 18px;
+    }
+  }
   >button.return{
     position: absolute;
     width: 58px;
@@ -89,13 +92,11 @@ const emit = defineEmits(['close'])
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
     >.left{
       flex: 0 0 auto;
-      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      position: relative;
+      top: 148px;
+      left: 149px;
       >h2{
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -124,22 +125,6 @@ const emit = defineEmits(['close'])
         margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
     }
-    >.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'));
-      >img{
-        width: 100%;
-        height: 100%;
-        padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      }
-      >p{
-        text-align: center;
-        line-height: 1.5;
-        // margin-top: 120%;
-      }
-    }
   }
 }
 </style>

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

@@ -152,9 +152,9 @@ const currentSwitchIdx = ref(0)
       position: relative;
       width: 788px;
       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'));
+      // background: rgba(145,129,117,0.25);
+      // border: 1px solid #FFE88B;
+      // padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       box-sizing: border-box;
       display: flex;
       justify-content: center;

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

@@ -107,8 +107,8 @@ const emit = defineEmits(['close'])
     >.right{
       flex: 0 0 auto;
       position: relative;
-      width: calc(788 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(387 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(444 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(333 / 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;

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

@@ -318,21 +318,19 @@ const activeTabIdx = ref(1)
       >.content-box {
         width: 100%;
         display: flex;
-        justify-content: space-around;
+        align-items: center;
+        justify-content: center;
         >.left-list {
-          width: calc(330 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(440 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           >.left-list-item{
-            margin-top: 10px;
-            >.item-title{
-              color: #AC9468;
+            .item-title,
+            .item-span{
               font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              font-family: "Source Han Sans SC Bold";
+              font-family: "Source Han Sans SC light";
+              line-height: 34px;
             }
-            >.item-span{
-              color: #000000;
-              margin-top: 10px;
-              font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              font-family: "Source Han Sans SC Normal";
+            &:not(:last-child) {
+              margin-bottom: 10px;
             }
           }
           >img {

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

@@ -259,9 +259,9 @@ 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;
+        // background: rgba(145,129,117,0.25);
+        // border: 1px solid #FFE88B;
+        // padding: 15px 10px;
         position: relative;
         >.btn-left {
           width: 60px;

src/components/HotspotDialog-1.vue

@@ -22,7 +22,7 @@
       <div
         :class="['qy', qyHover && 'hover']"
         @mouseover="qyHover = true"
-        @click="qyDetailVisbile = true"
+        @click="openNewWindow"
         @mouseout="
           () => {
             if (qyDetailVisbile) return;
@@ -108,7 +108,11 @@
       <div
         :class="['hy', hyHover && 'hover']"
         @mouseover="hyHover = true"
-        @click="hyDetailVisbile = true"
+        @click="() => {
+          emits('openShipGame')
+          hy3Hover = false;
+          hy3DetailVisbile = false;
+        }"
         @mouseout="
           () => {
             if (hyDetailVisbile) return;
@@ -128,7 +132,11 @@
       <div
         :class="['hy2', hy2Hover && 'hover']"
         @mouseover="hy2Hover = true"
-        @click="hy2DetailVisbile = true"
+        @click="() => {
+          hy2DetailVisbile = true
+          hy3Hover = false;
+          hy3DetailVisbile = false;
+        }"
         @mouseout="
           () => {
             if (hy2DetailVisbile) return;
@@ -166,7 +174,7 @@
       />
 
       <!-- label 详情 -->
-      <div
+      <!-- <div
         v-if="hyDetailVisbile"
         :class="['hotspot-dialog-1__info box']"
       >
@@ -185,7 +193,7 @@
           src="@/assets/images/hotspot-relic/pic_boat3-min.jpg"
         >
         <p>聊城古船</p>
-      </div>
+      </div> -->
       <div
         v-if="hy2DetailVisbile"
         :class="['hotspot-dialog-1__info box']"
@@ -210,7 +218,7 @@
         />
         <p>菏泽沉船</p>
       </div>
-      <div
+      <!-- <div
         v-if="hy3DetailVisbile"
         :class="['hotspot-dialog-1__info box']"
       >
@@ -229,7 +237,7 @@
           src="@/assets/images/hotspot-relic/pic_boat2-min.jpg"
         >
         <p>磁县漕船</p>
-      </div>
+      </div> -->
 
       <!-- <div
         :class="['icon-9', openedBoxList.includes(11) && 'open']"
@@ -545,7 +553,7 @@ const stopBgAudio = inject("stopBgAudio")
 const route = useRoute()
 const router = useRouter()
 const props = defineProps(["relicInfo"])
-const emits = defineEmits(["close", "openRelicDetail"])
+const emits = defineEmits(["close", "openRelicDetail", 'openShipGame'])
 const hymHover = ref(false)
 const hymDetailVisbile = ref(false)
 const hymHover2 = ref(false)
@@ -593,6 +601,15 @@ const isDDLS = computed(() =>
   ["_Frw1X3B8", "_IR4EkN4Z"].includes(props.relicInfo.name)
 )
 
+const openNewWindow = () => {
+  const width = 375
+  const height = 812
+  const left = (window.screenX || window.screenLeft || 0) + (screen.width - width) / 2
+  const top = (window.innerHeight - height) / 2
+
+  window.open('https://houseoss.4dkankan.com/project/yzdyh-dadu/game/index.html', '_blank', `width=${width},height=${height},top=${top},left=${left},toolbar=no,menubar=no,location=no,status=no`)
+}
+
 const goRelicDetail = (idx) => {
   emits("openRelicDetail", idx)
   if (!openedBoxList.includes(idx)) {

src/router/index.js

@@ -4,7 +4,7 @@ import PanoView from "@/views/PanoView.vue"
 import RelicList from "@/views/RelicList.vue"
 import RelicDetail from "@/views/RelicDetail.vue"
 import EpilogueView from "@/views/EpilogueView.vue"
-import ShipGameView from "@/views/ShipGame/ShipGameView.vue"
+// import ShipGameView from "@/views/ShipGame/ShipGameView.vue"
 // import store from '@/store/index.js'
 
 const routes = [
@@ -33,11 +33,11 @@ const routes = [
     name: 'EpilogueView',
     component: EpilogueView,
   },
-  {
-    path: '/ship-game',
-    name: 'ShipGame',
-    component: ShipGameView,
-  },
+  // {
+  //   path: '/ship-game',
+  //   name: 'ShipGame',
+  //   component: ShipGameView,
+  // },
 ]
 
 const router = createRouter({

src/views/PanoView.vue

@@ -20,9 +20,7 @@
       <button
         v-if="sceneIdx === 1"
         class="ship-btn"
-        @click="router.push({
-          name: 'ShipGame',
-        })"
+        @click="showShipGame = true"
       />
       <button
         v-if="sceneIdx === 0 && cameraIdx === 0"
@@ -128,13 +126,14 @@
           <span>{{ btnOnTrack2Name }}</span>
         </button>
         <button
+          v-if="!(sceneIdx === 1 && cameraIdx === 1)"
           class="three btn-on-track"
           @click="showingContentIdx = 3"
         >
           <span>{{ btnOnTrack3Name }}</span>
         </button>
         <button
-          class="four btn-on-track"
+          :class="['btn-on-track four', (sceneIdx === 1 && cameraIdx === 1) && 'four2']"
           @click="router.push({
             name: 'RelicList',
             query: {
@@ -223,6 +222,7 @@
         hotspotIndex = e
         isShowHotspotDetail = true
       }"
+      @open-ship-game="showShipGame = true"
     />
 
     <!-- <OpenState /> -->
@@ -347,6 +347,15 @@
       isShowHotspotDetail = true
     }"
   />
+
+  <div
+    v-if="showShipGame"
+    style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;"
+  >
+    <ShipGameView
+      @close="showShipGame = false"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -362,13 +371,15 @@ import HotspotDialog1 from '@/components/HotspotDialog-1.vue'
 import { useWindowSize } from '@vueuse/core'
 import MsgContent from '@/components/MsgContent.vue'
 import UserGuide from "@/components/UserGuide.vue"
-import OpenState from './OpenState.vue'
+// import OpenState from './OpenState.vue'
 import MutiRelicHotSpot from "@/components/MutiRelicHotSpot.vue"
+import ShipGameView from '@/views/ShipGame/ShipGameView.vue'
 
 const GUIDE_KEY = 'is-open-guide'
 const msgVisible = ref(false)
 const curMsgIndex = ref(0)
 const showGuide = ref(false)
+const showShipGame = ref(false)
 
 const charactorSpeackPositionLeft = ref(false)
 
@@ -1287,6 +1298,16 @@ onMounted(() => {
           left: 359px;
           background-image: v-bind(btnOnTrack4ActiveImgUrl);
         }
+
+        &.four2 {
+          left: 385px;
+          top: 205px;
+
+          &:hover {
+            top: 196px;
+            left: 391px;
+          }
+        }
       }
     }
     >div.camera-list{

src/views/ShipGame/ShipGameView.vue

@@ -75,6 +75,9 @@
           @mousedown="() => {
             curDragKey = item.key
           }"
+          @touchstart="() => {
+            curDragKey = item.key
+          }"
         >
           <img
             draggable="false"
@@ -112,10 +115,10 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+// import { useRouter } from 'vue-router'
 import { Container, Draggable } from "vue3-smooth-dnd"
 
-const router = useRouter()
+// const router = useRouter()
 const showBanner = ref(true)
 const showVideo = ref(false)
 const MODULE_LIST = [
@@ -170,6 +173,7 @@ const MODULE_LIST = [
 ]
 const curDragKey = ref('')
 const checkedModule = ref([])
+const emits = defineEmits(['close'])
 
 watch(checkedModule, val => {
   if (val.length === 6) {
@@ -182,7 +186,8 @@ watch(checkedModule, val => {
 })
 
 const back = () => {
-  router.back()
+  // router.back()
+  emits('close')
 }
 </script>