NanjingMuseumWuJinZang-PC/src/views/PaintingDetailForZhuQin.vue

<template>
  <div class="painting-detail-for-zhu-qin">
    <div
      class="painting-wrap"
      :style="{
        clipPath: `inset(0% ${100 - AnimationProgress.value}% 0% 0%)`,
      }"
    >
      <img
        class="painting-border"
        src="@/assets/images/painting-border-horiz.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting"
        :src="imgUrlSmall"
        alt=""
        draggable="false"
      >
      <img
        class="right-border-for-animation"
        :style="{
          right: `calc(${100 - AnimationProgress.value}% - 2px)`,
        }"
        src="@/assets/images/painting-border-right.png"
        alt=""
        draggable="false"
      >
    </div>
    <div
      class="bottom-text"
      :style="{
        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
      }"
    >
      <p class="size">
        33.8×55.4厘米
      </p>
      <p class="location">
        大都会艺术博物馆藏
      </p>
    </div>

    <div
      class="right-text"
      :style="{
        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
      }"
    >
      <img
        class="title"
        src="@/assets/images/title-zhu-qin.png"
        alt=""
        draggable="false"
      >
      <p class="subtitle subtitle-1">
        <span>卷</span> <span>绢本</span> <span>设色</span>
      </p>
      <p class="subtitle subtitle-2">
        <span>宋</span> <span>赵佶</span><img
          class="pin-yin"
          src="@/assets/images/pin-yin-jí.png"
          alt=""
          draggable="false"
        >
      </p>
    </div>

    <button
      class="view-img"
      :style="{
        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
      }"
      @click="showBigPainting"
    >
      <img
        class=""
        src="@/assets/images/painting-box-img/big-view.png"
        alt=""
        draggable="false"
      >
    </button>

    <BtnBack
      @click="router.go(-1)"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject, onUnmounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import TWEEN from '@tweenjs/tween.js'
import { api as viewerApi } from 'v-viewer'
import { useWindowSize } from "@vueuse/core"

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

const $env = inject('$env')

const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
const { width: windowWidth, height: windowHeight } = useWindowSize()

const isAnimating = ref(true)

/** 卷轴展开动画的tweening */
const AnimationProgress = ref({
  value: 7
})
const tween = new TWEEN.Tween(AnimationProgress.value)
tween.to({
  value: 100,
}, 3000)
tween.easing(TWEEN.Easing.Cubic.InOut)
let animationRequestId = null
const animate = () => {
  animationRequestId = requestAnimationFrame(animate)
  TWEEN.update()
}
// tween.onUpdate(function (object) {
//   console.log(object.value)
// })
onMounted(() => {
  tween.start()
  animate()
})
tween.onComplete(() => {
  isAnimating.value = false
  cancelAnimationFrame(animationRequestId)
})
onUnmounted(() => {
  tween.stop()
  cancelAnimationFrame(animationRequestId)
})

const imgUrlSmall = `${$env.BASE_URL}configMultiMedia/paintings/竹禽图卷.jpg`
const imgUrl = `${$env.BASE_URL}configMultiMedia/paintings-big/竹禽图卷.jpg`

function showBigPainting() {
  viewerApi({
    images: [imgUrl],
  })
}

</script>

<style lang="less" scoped>
.painting-detail-for-zhu-qin{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/painting-detail-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  ::-webkit-scrollbar { width: 0; height: 0; }
  >.painting-wrap{
    position: absolute;
    left: 50%;
    top: calc(50% - 18px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    transform: translate(-50%, -50%);
    width: calc(810px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    height: calc(443px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    overflow: hidden;
    >img.painting-border{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    >img.painting{
      position: absolute;
      top: 50%;
      left: calc(116px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      transform: translate(0, -50%);
      width: calc(634px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      height: calc(387px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      object-fit: contain;
    }
    >img.right-border-for-animation{
      position: absolute;
      top: 0;
      height: 100%;
    }
  }
  >.bottom-text{
    position: absolute;
    left: 50%;
    top: calc(50% + 236px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    transform: translateX(-50%);
    >p{
      text-align: center;
      font-family: KaiTi, KaiTi;
      font-weight: 400;
      font-size: calc(24px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      color: #E1EDD9;
      line-height: calc(28px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      white-space: pre;
      margin-bottom: 0.2em;
    }
  }
  >.right-text{
    position: absolute;
    top: calc(310px / v-bind('windowHeightDesign') * v-bind('windowHeight'));;
    left: calc(50% + 405px / v-bind('windowHeightDesign') * v-bind('windowHeight') + 5vw);
    display: flex;
    align-items: center;
    >img.title{
      height: calc(302px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    }
    >p{
      font-family: KaiTi, KaiTi;
      font-weight: 400;
      font-size: calc(32px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      color: #E1EDD9;
      line-height: calc(38px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      writing-mode: vertical-lr;
      letter-spacing: 0.2em;
    }
    >p:nth-of-type(1) {
      margin-left: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    }
    >p:nth-of-type(2) {
      margin-left: calc(12px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      >img.pin-yin{
        position: absolute;
        bottom: calc(115px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        right: calc(-6px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        width: calc(9px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        height: calc(13px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      }
    }
  }
  >button.view-img{
    position: absolute;
    left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    bottom: calc(55px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    >img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>