文物详情页改版

src/components/RelicDetailForHotspot copy 2.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/components/RelicDetailForHotspot copy.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/PanoView.vue

@@ -391,7 +391,7 @@ function onEffectVideoEnd() {
   }, 2500)
 }
 
-const iframeSrc = process.env.VUE_APP_CLI_MODE === 'dev' ? 'http://192.168.0.27:8082/show.html?id=WK1730428603763576832&vr=fd720_CKI5Ly4eo&lang=zh' : 'https://houseoss.4dkankan.com/project/yzdyh-dadu/pano/show.html?id=WK1730428603763576832&vr=fd720_CKI5Ly4eo&lang=zh'
+const iframeSrc = process.env.VUE_APP_CLI_MODE === 'dev' ? 'http://192.168.0.27:8081/show.html?id=WK1730428603763576832&vr=fd720_CKI5Ly4eo&lang=zh' : 'https://houseoss.4dkankan.com/project/yzdyh-dadu/pano/show.html?id=WK1730428603763576832&vr=fd720_CKI5Ly4eo&lang=zh'
 const panoIframe = ref(null)
 
 watch(cameraIdx, (vNew) => {

src/views/RelicDetail.vue

@@ -1,41 +1,56 @@
 <template>
   <div class="relic-detail">
-    <img
-      class="relic-deco"
-      src="@/assets/images/relic-detail-deco.png"
-      alt=""
-      draggable="false"
-    >
     <button
       class="return"
       @click="router.go(-1)"
     />
-    <h1>{{ relicInfo['名称'] }}</h1>
-    <div class="age">
-      年份&emsp;{{ relicInfo['年份'] }}
-    </div>
-    <div class="detail">
-      {{ relicInfo['详细描述'] }}
+    <div class="left">
+      <div
+        class="swiper-root"
+      >
+        <div
+          v-viewer
+          class="swiper-wrapper"
+        >
+          <img
+            v-for="(item, index) in [...relicImgUrlList, ...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>
     <div
-      class="swiper-root"
+      class="right"
+      :class="{
+        hide: !isShowDesc,
+      }"
     >
+      <h1 :title="relicInfo['名称']">
+        {{ relicInfo['名称'] }}
+      </h1>
+      <div class="age">
+        {{ relicInfo['年份'] }}
+      </div>
       <div
-        v-viewer
-        class="swiper-wrapper"
+        class="detail"
       >
-        <img
-          v-for="(item, index) in relicImgUrlList"
-          :key="index"
-          class="swiper-slide"
-          :src="item"
-          alt=""
-          draggable="false"
-        >
+        {{ relicInfo['详细描述'] }}
       </div>
-      <!-- <div class="swiper-button-prev" />
-      <div class="swiper-button-next" /> -->
-      <div class="swiper-pagination" />
+      <button
+        class="show-hide"
+        :class="{
+          right: isShowDesc,
+          left: !isShowDesc,
+        }"
+        @click="isShowDesc = !isShowDesc"
+      />
     </div>
   </div>
 </template>
@@ -65,6 +80,8 @@ const relicImgUrlList = computed(() => {
   }
 })
 
+const isShowDesc = ref(true)
+
 /**
  * swiper 相关
  */
@@ -105,18 +122,8 @@ onMounted(() => {
 .relic-detail{
   height: 100%;
   position: relative;
-  background-image: url(@/assets/images/relic-detail-bg.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-  >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;
-  }
+  background-color: #2F2C2C;
+  display: flex;
   >button.return{
     position: absolute;
     width: 58px;
@@ -127,75 +134,133 @@ onMounted(() => {
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
+    z-index: 1;
   }
-  >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;
-  }
-  >.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 {
+  >.left{
+    position: relative;
+    flex: 1 0 1px;
+    height: 100%;
+    >.swiper-root{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 688px;
+      height: 688px;
+      max-width: 80%;
+      max-height: 80%;
+      overflow: hidden;
+      >.swiper-wrapper{
         width: 100%;
         height: 100%;
-        object-fit: contain;
-      }
-    }
-    >:deep(.swiper-pagination){
-      >span{
-        width: 20px;
-        height: 5px;
-        border-radius: 0;
-        // background-color: #666;
+        >img.swiper-slide {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          cursor: pointer;
+        }
       }
-      >span.swiper-pagination-bullet-active{
-        // background-color: #f4d085;
-        opacity: 1;
-        background-color: #fff;
+      >:deep(.swiper-pagination){
+        bottom: 0;
+        >span{
+          width: 20px;
+          height: 5px;
+          border-radius: 0;
+          background-color: #666;
+          border-radius: 2.5px;
+        }
+        >span.swiper-pagination-bullet-active{
+          background-color: #f4d085;
+          opacity: 1;
+        }
       }
     }
   }
+  >.right{
+    height: 100%;
+    flex: 0 0 auto;
+    width: calc(577 / @page-width-design-px * 100vw);
+    background-image: url(@/assets/images/relic-detail-bg-right.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin-right: 0;
+    transition: margin-right 0.5s;
+    >h1{
+      flex: 0 0 auto;
+      margin-top: 100px;
+      margin-left: calc(40 / 577 * 100%);
+      margin-right: calc(40 / 577 * 100%);
+      padding-left: calc(32 / 577 * 100%);
+      padding-right: calc(32 / 577 * 100%);
+      background: linear-gradient(90deg, rgba(255,226,122,0) 0%, #C9AD83 49%, rgba(249,226,148,0) 100%);
+      font-size: 30px;
+      line-height: 62px;
+      font-family: Source Han Serif CN, Source Han Serif CN;
+      font-weight: 800;
+      color: #43310E;
+      line-height: 62px;
+      letter-spacing: 3px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+    }
+    >.age{
+      flex: 0 0 auto;
+      margin-top: 100px;
+      font-size: 20px;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 300;
+      color: #000000;
+      line-height: 23px;
+      letter-spacing: 4px;
+      margin-left: calc(70 / 577 * 100%);
+      margin-right: calc(70 / 577 * 100%);
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+    }
+    >.detail{
+      flex: 0 1 auto;
+      margin-top: 30px;
+      margin-bottom: 30px;
+      margin-left: calc(70 / 577 * 100%);
+      margin-right: calc(35 / 577 * 100%);
+      font-size: 20px;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 300;
+      color: #000000;
+      line-height: 23px;
+      letter-spacing: 4px;
+      overflow: auto;
+      padding-right: calc(35 / 577 * 100%);
+    }
+    >button.show-hide{
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 60px;
+      height: 60px;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    >button.show-hide.left{
+      background-image: url(@/assets/images/btn-left.png);
+    }
+    >button.show-hide.right{
+      background-image: url(@/assets/images/btn-right.png);
+    }
+  }
+  >.right.hide{
+    margin-right: calc(-577 / @page-width-design-px * 100vw);
+  }
+
 }
 </style>