调整细节

src/components/RelicDetailForHotspot.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="relic-detail-for-hotspot">
+    <img
+      class="relic-deco"
+      src="@/assets/images/relic-detail-deco.png"
+      alt=""
+      draggable="false"
+    >
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <h1>{{ props.relicInfo.hotspotTitle }}</h1>
+    <!-- <div class="age">
+      年份&emsp;{{ props.relicInfo['年份'] }}
+    </div> -->
+    <div
+      class="detail"
+      v-html="props.relicInfo.imageTextInfo.text"
+    />
+    <div
+      class="swiper-root"
+    >
+      <div
+        v-viewer
+        class="swiper-wrapper"
+      >
+        <img
+          v-for="(item, index) in relicImgUrlList"
+          :key="index"
+          class="swiper-slide"
+          :src="item"
+          alt=""
+          draggable="false"
+        >
+      </div>
+      <!-- <div class="swiper-button-prev" />
+      <div class="swiper-button-next" /> -->
+      <div class="swiper-pagination" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import Swiper from 'swiper/bundle'
+import 'swiper/css/bundle'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['close'])
+
+const props = defineProps(['relicInfo'])
+
+console.log('relicInfo: ', props.relicInfo)
+
+const relicImgUrlList = computed(() => {
+  return props.relicInfo.imageTextInfo.imageList.map((item) => {
+    return item.ossPath
+  })
+})
+
+/**
+ * swiper 相关
+ */
+let swiper = null
+// const activeSwiperItemIndex = ref(0)
+function initSwiper() {
+  swiper = new Swiper('.swiper-root', {
+    pagination: {
+      el: '.swiper-pagination',
+    },
+
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+
+    on: {
+      // afterInit: function (e) {
+      //   activeSwiperItemIndex.value = e.activeIndex
+      // },
+      // slideChange: function(e) {
+      //   activeSwiperItemIndex.value = e.activeIndex
+      // }
+    }
+  })
+}
+onMounted(() => {
+  nextTick(() => {
+    initSwiper()
+  })
+})
+</script>
+
+<style lang="less" scoped>
+@page-height-design-px: 970;
+@page-width-design-px: 1920;
+.relic-detail-for-hotspot{
+  height: 100%;
+  position: relative;
+  background-image: url(@/assets/images/relic-detail-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: 10;
+  >img.relic-deco{
+    position: absolute;
+    top: calc(597 / @page-height-design-px * 100vh);
+    left: calc(544 / @page-width-design-px * 100vw);
+    width: calc(1172 / @page-width-design-px * 100vw);
+    height: calc(325 / @page-height-design-px * 100vh);
+    object-fit: contain;
+  }
+  >button.return{
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 42px;
+    top: 68px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >h1{
+    position: absolute;
+    left: calc(182 / @page-width-design-px * 100vw);
+    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-weight: bold;
+    color: #43310E;
+    line-height: 28px;
+    letter-spacing: 2px;
+  }
+  >.age{
+    position: absolute;
+    left: calc(275 / @page-width-design-px * 100vw);
+    top: calc(180 / @page-height-design-px * 100vh);
+    writing-mode: vertical-lr;
+    font-size: 24px;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 500;
+    color: #281D0C;
+    line-height: 28px;
+  }
+  >.detail{
+    position: absolute;
+    left: calc(383 / @page-width-design-px * 100vw);
+    top: calc(184 / @page-height-design-px * 100vh);
+    width: calc(528 / @page-width-design-px * 100vw);
+    height: calc(638 / @page-height-design-px * 100vh);
+    overflow: auto;
+    padding-right: calc(44 / @page-width-design-px * 100vw);
+    font-size: 20px;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 300;
+    color: #000000;
+    line-height: 23px;
+    letter-spacing: 4px;
+    :deep(p){
+      margin-bottom: 1em;
+    }
+  }
+  >.swiper-root{
+    position: absolute;
+    left: calc(1385 / @page-width-design-px * 100vw);
+    top: calc(99 / @page-height-design-px * 100vh);
+    transform: translate(-50%, 0);
+    width: calc(767 / @page-width-design-px * 100vw);
+    height: calc(767 / @page-height-design-px * 100vh);
+    overflow: hidden;
+    >.swiper-wrapper{
+      width: 100%;
+      height: 100%;
+      >img.swiper-slide {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    >:deep(.swiper-pagination){
+      >span{
+        width: 20px;
+        height: 5px;
+        border-radius: 0;
+        // background-color: #666;
+      }
+      >span.swiper-pagination-bullet-active{
+        // background-color: #f4d085;
+        opacity: 1;
+        background-color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/HomeView.vue

@@ -248,12 +248,11 @@ function onClickLogo() {
     position: absolute;
     width: 100%;
     bottom: 50px;
-    display: flex;
     >button.scene-entry.entry-1{
       position: absolute;
       left: 20%;
       transform: translate(-50%);
-      bottom: 0;
+      bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background-image: url(@/assets/images/scene-entry-1.png);
       background-size: cover;
       background-repeat: no-repeat;
@@ -268,10 +267,10 @@ function onClickLogo() {
         &::after{
           position: absolute;
           content: '';
-          left: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          left: calc(-20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(380 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(231 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(434 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           background-image: url(@/assets/images/scene-entry-active-deco.png);
           background-size: cover;
           background-repeat: no-repeat;
@@ -301,8 +300,8 @@ function onClickLogo() {
           content: '';
           right: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(380 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(231 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(434 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           background-image: url(@/assets/images/scene-entry-active-deco.png);
           background-size: cover;
           background-repeat: no-repeat;
@@ -330,12 +329,12 @@ function onClickLogo() {
         &::after{
           position: absolute;
           content: '';
-          left: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          left: calc(-50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(380 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(231 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(434 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           background-image: url(@/assets/images/scene-entry-active-deco.png);
-          background-size: cover;
+          background-size: contain;
           background-repeat: no-repeat;
           background-position: center center;
         }

src/views/PanoView.vue

@@ -157,7 +157,11 @@
       class="camera-content"
       @close="showingContentIdx = 0"
     />
-
+    <RelicDetailForHotspot
+      v-if="isShowHotspotDetail"
+      :relic-info="hotspotRelicInfo"
+      @close="isShowHotspotDetail = false"
+    />
     <transition name="fade-in-out-slow">
       <video
         v-show="isShowEffectVideo1"
@@ -222,6 +226,7 @@ import CameraDesc from '@/components/CameraDesc.vue'
 import CharacterDesc from '@/components/CharacterDesc.vue'
 import { defineAsyncComponent } from 'vue'
 import sceneTree from '/public/sceneTree.js'
+import RelicDetailForHotspot from '@/components/RelicDetailForHotspot.vue'
 
 const btnReturnHomeImgUrl = computed(() => {
   return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-${sceneIdx.value + 1}.png`) + ')'
@@ -316,7 +321,7 @@ const isShowCharacterDesc = ref(false)
 const showingContentIdx = ref(0)
 
 function onClickCharacter() {
-  isShowCameraDesc.value = true
+  // isShowCameraDesc.value = true
   if (!isCharacterSpecialMoving.value) {
     animationType.value = Math.floor(Math.random() * 2) + 2
     let duration = 0
@@ -390,7 +395,7 @@ const iframeSrc = process.env.VUE_APP_CLI_MODE === 'dev' ? 'http://192.168.0.27:
 const panoIframe = ref(null)
 
 watch(cameraIdx, (vNew) => {
-  console.log('post message!')
+  console.log('parent window: post message!')
   panoIframe.value.contentWindow.postMessage({
     msgName: 'change-scene',
     sceneId: store.getters.catalogTopology[sceneIdx.value].children[0].children[cameraIdx.value].id
@@ -399,6 +404,19 @@ watch(cameraIdx, (vNew) => {
   deep: true,
 })
 
+// window.addEventListener('message', (e) => {
+//   console.log('parent window: received message!', e)
+// })
+const isShowHotspotDetail = ref(false)
+const hotspotRelicInfo = ref({})
+window.showHotspotDetail = function(hotspotInfo) {
+  console.log('parent window: 展示热点详情')
+  console.log(hotspotInfo)
+  console.log(hotspotInfo.hotspotTitle)
+  hotspotRelicInfo.value = hotspotInfo
+  isShowHotspotDetail.value = true
+}
+
 /**
  * 全景图
  */

src/views/RelicList.vue

@@ -288,60 +288,6 @@ function onClickItem(idx) {
 
   }
 
-  // >menu{
-  //   position: absolute;
-  //   width: 524px;
-  //   height: 66px;
-  //   left: 150px;
-  //   top: 64px;
-  //   background-image: url(@/assets/images/relic-list-page-menu-bg.png);
-  //   background-size: contain;
-  //   background-repeat: no-repeat;
-  //   background-position: center center;
-  //   >button.scene-select{
-  //     position: absolute;
-  //     top: 50%;
-  //     left: 10px;
-  //     transform: translateY(-50%);
-  //     width: 220px;
-  //     height: 50px;
-  //     padding-left: 10px;
-  //     font-size: 30px;
-  //     font-family: Source Han Serif CN, Source Han Serif CN;
-  //     font-weight: bold;
-  //     color: #43310E;
-  //     line-height: 46px;
-  //     letter-spacing: 6px;
-  //   }
-  //   >button.camera-select{
-  //     position: absolute;
-  //     top: 50%;
-  //     left: 230px;
-  //     transform: translateY(-50%);
-  //     width: 160px;
-  //     height: 50px;
-  //     font-size: 24px;
-  //     font-family: Source Han Sans CN, Source Han Sans CN;
-  //     font-weight: 500;
-  //     color: #FFF7D9;
-  //     line-height: 36px;
-  //     letter-spacing: 5px;
-  //   }
-  //   >button.all{
-  //     position: absolute;
-  //     top: 50%;
-  //     left: 400px;
-  //     transform: translateY(-50%);
-  //     width: 100px;
-  //     height: 50px;
-  //     font-size: 24px;
-  //     font-family: Source Han Sans CN, Source Han Sans CN;
-  //     font-weight: 500;
-  //     color: rgba(255,247,217,0.7);
-  //     line-height: 36px;
-  //     letter-spacing: 5px;
-  //   }
-  // }
   >.search-ui {
     position: absolute;
     top: 65px;
@@ -393,7 +339,8 @@ function onClickItem(idx) {
   >.the-list {
     position: absolute;
     left: 0;
-    top: 150px;
+    top: 55%;
+    translate: 0 -50%;
     width: 100%;
     height: calc(650 / @page-height-design-px * 100vh);
     background-image: url(@/assets/images/relic-list-bg-1.png);