YangZhouDaYunHeDaDu/src/views/RelicDetail.vue

<template>
  <div class="relic-detail">
    <button
      class="return"
      @click="router.go(-1)"
    />
    <div class="left">
      <div
        class="swiper-root"
      >
        <div
          v-viewer
          class="swiper-wrapper"
        >
          <img
            v-for="(item, index) in imageList"
            :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>

      <img
        class="full"
        src="@/assets/images/full.png"
        @click="handleFull"
      >
    </div>
    <div
      class="right"
      :class="{
        hide: !isShowDesc,
      }"
    >
      <h1 :title="relicInfo['名称']">
        {{ relicInfo['名称'] }}
      </h1>
      <div class="age text-indent">
        {{ relicInfo['年份'] }}
      </div>
      <div
        class="detail text-indent"
        v-html="relicInfo['详细描述']"
      />
      <button
        class="show-hide"
        :class="{
          right: isShowDesc,
          left: !isShowDesc,
        }"
        @click="isShowDesc = !isShowDesc"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance, 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 relicInfo = computed(() => {
  return store.getters[route.query.hot === '1' ? 'hotRelicData' : 'relicData'][route.query.relicIdx]
})

const imageList = computed(() => {
  if (Array.isArray(relicInfo.value['图片名'])) {
    return relicInfo.value['图片名'].map((item) => {
      return `${process.env.BASE_URL}relic-data/big-photo/${item}`
    })
  } else {
    return []
  }
})

const isShowDesc = ref(true)

/**
 * 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()
  })
})

const instance = getCurrentInstance()
const handleFull = () => {
  instance.appContext.config.globalProperties.$viewerApi({
    options: {},
    images: [
      imageList.value[activeSwiperItemIndex.value]
    ]
  })
}
</script>

<style lang="less" scoped>
@page-height-design-px: 970;
@page-width-design-px: 1920;
.relic-detail{
  height: 100%;
  position: relative;
  background-color: #2F2C2C;
  display: flex;
  >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;
    z-index: 1;
  }
  >.left{
    position: relative;
    flex: 1 0 1px;
    height: 100%;
    .full {
      position: absolute;
      right: 30px;
      bottom: 30px;
      width: 26px;
      cursor: pointer;
    }
    >.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%;
        >img.swiper-slide {
          width: 100%;
          height: 100%;
          object-fit: contain;
          cursor: pointer;
        }
      }
      >: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{
      display: flex;
      flex-direction: column;
      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;
      // letter-spacing: 4px;
      overflow: auto;
      padding-right: calc(35 / 577 * 100%);
      word-wrap: break-word;
      white-space: pre-wrap;

      :deep(p) {
        line-height: 30px;
      }
    }
    >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>