style: --

src/App.vue

@@ -15,10 +15,29 @@
       </div>
     </Teleport>
   </div>
+
+  <div
+    v-if="store.state.iframeAttrs"
+    class="iframe-page"
+  >
+    <img
+      class="iframe-page__close"
+      draggable="false"
+      src="@/assets/images/ship-game/icon_cancel-min.png"
+      @click="store.dispatch('closeIframePage')"
+    >
+    <iframe
+      :src="store.state.iframeAttrs.url"
+      :style="store.state.iframeAttrs.style"
+    />
+  </div>
 </template>
 
 <script setup>
 import { provide } from 'vue'
+import { useStore } from "vuex"
+
+const store = useStore()
 
 /**
  * 背景音乐
@@ -27,8 +46,7 @@ let bgAudio = null
 let curBgAudio = ''
 
 const handleBgAudio = ({ sceneIdx, cameraIdx, canPlay }) => {
-  console.log(sceneIdx, cameraIdx)
-  if (`${sceneIdx}-${cameraIdx}` === curBgAudio) return
+  if (`${sceneIdx}-${cameraIdx}` === curBgAudio || `${sceneIdx}` === curBgAudio) return
 
   bgAudio?.pause()
 
@@ -84,15 +102,29 @@ provide('startBgAudio', startBgAudio)
 </script>
 
 <style lang="less">
-// html, body {
-//   overscroll-behavior: none;
-//   overflow: hidden;
-// }
+.iframe-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,.8);
+  z-index: 9999;
 
-// * {
-//   user-select: none;
-//   -webkit-touch-callout: none;
-// }
+  iframe {
+    border: 0;
+  }
+  &__close {
+    position: absolute;
+    top: 52px;
+    right: 58px;
+    cursor: pointer;
+    z-index: 8;
+  }
+}
 
 #app {
   height: 100%;
@@ -238,6 +270,22 @@ provide('startBgAudio', startBgAudio)
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
 
+button.logo{
+  position: absolute;
+  left: 50px;
+  top: 30px;
+  width: 252px;
+  height: 55px;
+  z-index: 9;
+  >img{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .screen-rotate-tip {
   position: fixed;
   left: 0;

src/components/HotspotDialog-1.vue

@@ -546,8 +546,10 @@
 <script setup>
 import { ref, computed, reactive, inject } from "vue"
 import MsgContent from "./MsgContent.vue"
+import { useStore } from "vuex"
 import { useRoute, useRouter } from "vue-router"
 
+const store = useStore()
 const startBgAudio = inject("startBgAudio")
 const stopBgAudio = inject("stopBgAudio")
 const route = useRoute()
@@ -602,37 +604,35 @@ const isDDLS = computed(() =>
 )
 
 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`)
+  store.dispatch('openIframePage', {
+    url: 'https://houseoss.4dkankan.com/project/yzdyh-dadu/game/index.html',
+    style: 'width: 375px; height: 812px'
+  })
 }
 
-const goRelicDetail = (idx) => {
-  emits("openRelicDetail", idx)
-  if (!openedBoxList.includes(idx)) {
-    openedBoxList.push(idx)
-  }
-  // router.replace({
-  //   name: 'PanoView',
-  //   query: {
-  //     ...route.query,
-  //     hotspot: props.relicInfo.name
-  //   }
-  // }).then(() => {
-  //   router.push({
-  //     name: 'RelicDetail',
-  //     query: {
-  //       sceneIdx: route.query.sceneIdx,
-  //       cameraIdx: route.query.cameraIdx,
-  //       relicIdx: idx,
-  //       hot: 1
-  //     }
-  //   })
-  // })
-}
+// const goRelicDetail = (idx) => {
+//   emits("openRelicDetail", idx)
+//   if (!openedBoxList.includes(idx)) {
+//     openedBoxList.push(idx)
+//   }
+//   // router.replace({
+//   //   name: 'PanoView',
+//   //   query: {
+//   //     ...route.query,
+//   //     hotspot: props.relicInfo.name
+//   //   }
+//   // }).then(() => {
+//   //   router.push({
+//   //     name: 'RelicDetail',
+//   //     query: {
+//   //       sceneIdx: route.query.sceneIdx,
+//   //       cameraIdx: route.query.cameraIdx,
+//   //       relicIdx: idx,
+//   //       hot: 1
+//   //     }
+//   //   })
+//   // })
+// }
 
 const curMsgIndex = 0
 const currentMsg = computed(() => {
@@ -769,7 +769,7 @@ const close = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 4;
+  z-index: 10;
 
   .zmf-back {
     position: absolute;

src/components/MutiRelicHotSpot.vue

@@ -1,32 +1,117 @@
 <template>
   <div class="muti-relic">
-    <div class="muti-relic-container">
+    <template v-if="!showMyBox">
+      <div class="muti-relic-container">
+        <div
+          v-for="(item, idx) in relicInfo"
+          :key="idx"
+          class="muti-relic__item"
+          @click="handleClick(item['序号'] - 1, idx)"
+        >
+          <div class="muti-relic__item__title">
+            <p>{{ item['名称'] }}</p>
+          </div>
+          <div
+            class="img"
+            :style="{
+              backgroundImage: `url(${getImgUrl(item)})`
+            }"
+          />
+          <p class="description">
+            {{ item['文物简介'] }}
+          </p>
+        </div>
+      </div>
+
       <div
-        v-for="(item, idx) in relicInfo"
-        :key="idx"
-        class="muti-relic__item"
-        @click="handleClick(idx)"
+        class="muti-relic__btn"
+        @click="handleShowBox"
       >
-        <p>{{ item['名称'] }}</p>
-        <div
-          class="img"
-          :style="{
-            backgroundImage: `url(${getImgUrl(item)})`
-          }"
-        />
+        <span>我的宝盒</span>
       </div>
-    </div>
+    </template>
+
+    <template v-else>
+      <div class="my-box">
+        <div class="my-box-list">
+          <div
+            v-for="(item, idx) in store.getters.hotRelicData"
+            :key="idx"
+            class="my-box-list__item"
+          >
+            <div
+              class="img"
+            >
+              <img
+                v-if="relicClicked.includes(idx)"
+                :src="getImgUrl(item)"
+              >
+              <div
+                class="img__bg"
+                :style="{
+                  backgroundImage: `url(${relicClicked.includes(idx) ? require('@/assets/images/hotspot-relic/bg-box1kongbai-min.png') : require('@/assets/images/hotspot-relic/kongbai-min.png')})`
+                }"
+              />
+            </div>
+            <p class="label">
+              {{ relicClicked.includes(idx) ? item['名称'] : `宝箱${idx + 1}` }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <img
+        v-if="showCompose"
+        class="muti-relic__compose"
+        src="@/assets/images/hotspot-relic/box_jicheng-min.png"
+        @click="handlePoster"
+      >
+      <img
+        v-if="showPoster"
+        class="muti-relic__poster"
+        :src="POSTER_LIST[posterIndex]"
+      >
+
+      <div
+        class="muti-relic__btn"
+        :style="{
+          zIndex: hideBox ? 2 : 1
+        }"
+        @click="handleBack"
+      >
+        <span>返回</span>
+      </div>
+    </template>
 
     <div
       class="mask"
-      @click="emits('close')"
+      :style="{
+        zIndex: hideBox ? 1 : -1
+      }"
     />
+
+    <img
+      class="muti-relic__close"
+      draggable="false"
+      src="@/assets/images/btn-close.png"
+      :style="{
+        zIndex: hideBox ? 2 : 1
+      }"
+      @click="emits('close')"
+    >
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useStore } from "vuex"
+import Poster1Img from '@/assets/images/hotspot-relic/poster1-min.png'
+
+const RELIC_KEY = 'ydd-relic-clicked'
+const COMPOSE_KEY = 'ydd-relic-compose'
+const POSTER_LIST = [
+  Poster1Img
+]
 
 const store = useStore()
 const props = defineProps({
@@ -35,6 +120,12 @@ const props = defineProps({
     default: () => ({})
   }
 })
+const showMyBox = ref(false)
+const showCompose = ref(false)
+const showPoster = ref(false)
+const posterIndex = ref(0)
+const hideBox = computed(() => showCompose.value || showPoster.value)
+const relicClicked = ref([])
 
 const emits = defineEmits(['close', 'openRelicDetail'])
 
@@ -47,12 +138,49 @@ const relicInfo = computed(() => {
 })
 
 const getImgUrl = (item) => {
-  return `${process.env.BASE_URL}relic-data/big-photo/${item['图片名'][0]}`
+  return `${process.env.BASE_URL}relic-data/small-photo/${item['图片名'][0]}`
 }
 
-const handleClick = (idx) => {
+const handleClick = (relicIndex, idx) => {
   const stack = props.relicInfo.hotspotTitle.split(',')
   emits('openRelicDetail', Number(stack[idx]))
+  const cache = localStorage.getItem(RELIC_KEY) ? JSON.parse(localStorage.getItem(RELIC_KEY)) : []
+  if (!cache.includes(relicIndex)) {
+    cache.push(relicIndex)
+    localStorage.setItem(RELIC_KEY, JSON.stringify(cache))
+  }
+}
+
+const handleShowBox = () => {
+  relicClicked.value = localStorage.getItem(RELIC_KEY) ? JSON.parse(localStorage.getItem(RELIC_KEY)) : []
+  showMyBox.value = true
+
+  if (relicClicked.value.length === store.getters.hotRelicData.length) {
+    // 宝盒已全部打开
+    if (!localStorage.getItem(COMPOSE_KEY)) {
+      showCompose.value = true
+    } else {
+      // 已合成海报
+      showRandomPoster()
+    }
+  }
+}
+
+const handleBack = () => {
+  showCompose.value = false
+  showPoster.value = false
+  showMyBox.value = false
+}
+
+const handlePoster = () => {
+  showCompose.value = false
+  showRandomPoster()
+  localStorage.setItem(COMPOSE_KEY, 1)
+}
+
+const showRandomPoster = () => {
+  posterIndex.value = Math.floor(Math.random() * POSTER_LIST.length)
+  showPoster.value = true
 }
 </script>
 
@@ -77,45 +205,175 @@ const handleClick = (idx) => {
     background: rgba(0,0,0,0.85);
     z-index: -1;
   }
+  &__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 50%;
+    bottom: 60px;
+    width: 259px;
+    height: 67px;
+    cursor: pointer;
+    font-size: 28px;
+    font-family: "Source Han Serif CN Heavy";
+    transform: translateX(-50%);
+    background: url('@/assets/images/hotspot-relic/btn-min.png') no-repeat center / contain;
+
+    span {
+      background: linear-gradient(180deg, #FFFBC4 0%, #E5C05B 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+  &__close {
+    position: absolute;
+    top: 95px;
+    right: 88px;
+    cursor: pointer;
+  }
+  .my-box {
+    position: relative;
+    top: -20px;
+    width: 1538px;
+    height: 759px;
+    background: url('@/assets/images/hotspot-relic/bg_baoxiang-min.png') no-repeat center / contain;
+
+    &-list {
+      position: absolute;
+      top: 120px;
+      left: 395px;
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 35px;
+
+      &__item {
+        display: flex;
+        flex-direction: column;
+        width: 103px;
+
+        .img {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          width: 103px;
+          height: 103px;
+
+          img {
+            position: relative;
+            width: 70px;
+            height: 70px;
+            object-position: center;
+            object-fit: contain;
+            z-index: 1;
+          }
+          &__bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-position: center;
+            background-size: contain;
+          }
+        }
+        .label {
+          width: 103px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          color: #B9A67C;
+          font-size: 16px;
+          text-align: center;
+          letter-spacing: 0 !important;
+        }
+      }
+    }
+  }
+  &__compose,
+  &__poster {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    animation: bounceIn linear .2s;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    z-index: 2;
+  }
   &-container {
     display: flex;
+    gap: 50px;
   }
   &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     position: relative;
-    width: 427px;
-    height: 491px;
-    background: url('@/assets/images/hotspot-relic/Group491-min.png') no-repeat center / cover;
+    padding: 110px 90px 150px;
+    width: 442px;
+    height: 565px;
+    background: url('@/assets/images/hotspot-relic/Label_wenwu-min.png') no-repeat center / cover;
     cursor: pointer;
     transition: transform linear .2s;
+    box-sizing: border-box;
 
     &: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;
+    &__title {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 50px;
+      width: 269px;
+      height: 57px;
       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;
+        letter-spacing: 1px !important;
+        font-family: "Source Han Serif CN Heavy" !important;
+        color: #724B26;
+      }
     }
     .img {
-      position: absolute;
-      top: 131px;
-      left: 102px;
+      flex-shrink: 0;
       width: 222px;
-      height: 207px;
+      height: 230px;
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
     }
+
+    .description {
+      font-size: 18px;
+      letter-spacing: 0 !important;
+      font-family: "Source Han Sans SC light" !important;
+    }
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0.2);
+  }
+  80% {
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
   }
 }
 </style>

src/components/RelicDetailForHotspot.vue

@@ -47,7 +47,7 @@
         v-html="relicInfo['年份']"
       />
       <div
-        class="detail"
+        class="detail text-indent"
         v-html="relicInfo['详细描述']"
       />
       <button

src/store/index.js

@@ -13,9 +13,11 @@ export default createStore({
     canStart: false,
     haveShownSceneEffect: [false, false, false],
     relicDataRaw: projectData['长轴展示文物清单'],
-    hotRelicDataRaw: projectData['场景中宝盒']
+    hotRelicDataRaw: projectData['宝盒文物清单'],
+    iframeAttrs: null
   },
   getters: {
+    iframeAttrs: (state) => state.iframeAttrs,
     catalogTopology: (state) => {
       if (!state.panoData || !state.panoData.catalogRoot || !state.panoData.catalogs) {
         return
@@ -73,6 +75,9 @@ export default createStore({
     }
   },
   mutations: {
+    setIframeAttrs(state, value) {
+      state.iframeAttrs = value
+    },
     setPanoData(state, value) {
       state.panoData = value
     },
@@ -90,6 +95,12 @@ export default createStore({
     }
   },
   actions: {
+    openIframePage({ commit }, attrs) {
+      commit('setIframeAttrs', attrs)
+    },
+    closeIframePage({ commit }) {
+      commit('setIframeAttrs', null)
+    },
   },
   modules: {
   }