WuxiCharityMuseum/src/views/about/CollectionDetail.vue

<template>
  <div class="collection-detail">
    <iframe
      :src="`https://4dscene.4dage.com/culturalrelics/NSRDYT/Model2.html?m=nsr03&timestamp=${new Date().getTime()}`"
      allow="fullscreen"
      frameborder="0"
    />
    <BtnBack
      :color="'white'"
    />
    <div class="text">
      <h1
        class="title"
        :title="detail?.title"
      >
        {{ detail?.title }}
      </h1>
      <div
        class="age"
        :title="detail?.culturalRelicEraName"
      >
        {{ detail?.culturalRelicEraName }}
      </div>
      <div
        class="size"
        :title="detail?.size"
      >
        {{ detail?.size }}
      </div>
      <div class="desc">
        {{ detail?.texture }}
      </div>
    </div>
    <Transition name="fade-out">
      <div
        v-show="isShowTip"
        class="tip-wrapper"
      >
        <img
          class="tip"
          src="@/assets/images/operation-tip.png"
          alt=""
          draggable="false"
        >
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { getCulturalRelicsDetailApi } from '@/api'

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const detail = ref(null)
const loading = ref(false)

const isShowTip = computed(() => {
  return store.state.needCollectionDetailTip
})

if (store.state.needCollectionDetailTip) {
  setTimeout(() => {
    store.commit('setNeedCollectionDetailTip', false)
  }, 3000)
}

const getDetail = async() => {
  try {
    loading.value = true
    const data = await getCulturalRelicsDetailApi(route.params.id)
    detail.value = data
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getDetail()
})
</script>

<style lang="less" scoped>
.collection-detail{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #7d7d7e;
  z-index: 10;
  >iframe{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  >.text{
    position: absolute;
    top: 111px;
    right: calc(170 / 1920 * 100vw);
    width: 279px;
    >h1.title{
      font-family: Source Han Serif CN, Source Han Serif CN;
      font-weight: bold;
      font-size: 40px;
      color: #FFE794;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    >.age{
      margin-top: 30px;
      overflow: hidden;
      white-space: pre;
      text-overflow: ellipsis;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 22px;
    }
    >.size{
      margin-top: 5px;
      overflow: hidden;
      white-space: pre;
      text-overflow: ellipsis;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 22px;
    }
    >.desc{
      margin-top: 33px;
      text-indent: 2em;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 27px;
      text-align: justified;
      max-height: 450px;
      overflow: auto;
      padding-right: 0.5em;
    }
  }
  >.tip-wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    >img.tip{
      position: absolute;
      left: 50%;
      top: 50%;
      height: 30%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>