NanjingMuseumWuJinZang-PC/src/views/PaintingDetailForTaoZhu.vue

<template>
  <div class="painting-detail-for-shuang-gou">
    <div
      class="painting-wrap"
      :style="{
        clipPath: `inset(0% 0% ${100 - AnimationProgress.value}% 0%)`,
      }"
    >
      <img
        class="painting-border"
        src="@/assets/images/painting-border-new.png"
        alt=""
        draggable="false"
      >
      <img
        ref="paintingEl"
        class="painting"
        :src="imgUrlSmall"
        alt=""
        draggable="false"
      >
      <Transition name="fade-out">
        <img
          v-show="isAnimating"
          class="bottom-border-for-animation"
          :style="{
            bottom: `${100 - AnimationProgress.value}%`,
          }"
          src="@/assets/images/painting-border-bottom.png"
          alt=""
          draggable="false"
        >
      </Transition>
    </div>
    <div
      class="bottom-text"
      :style="{
        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
      }"
    >
      <p class="size">
        163.3×103.1厘米
      </p>
      <p class="location">
        台北故宫博物院藏
      </p>
    </div>

    <div
      class="right-text"
      :style="{
        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
      }"
    >
      <img
        class="title"
        src="@/assets/images/title-tao-zhu.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>
      </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-small/桃竹双凫图.jpg`
const imgUrl = `${$env.BASE_URL}configMultiMedia/paintings/桃竹双凫图.jpg`

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

</script>

<style lang="less" scoped>
.painting-detail-for-shuang-gou{
  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(16px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    transform: translate(-50%, 0);
    width: calc(500px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    height: calc(848px / 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;
      left: 50%;
      top: calc(167px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      transform: translate(-50%, 0);
      width: calc(398px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      height: calc(602px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      object-fit: contain;
    }
    >img.bottom-border-for-animation{
      position: absolute;
      left: 0;
      width: 100%;
    }
  }
  >.bottom-text{
    position: absolute;
    left: 50%;
    bottom: calc(28px / 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-top: 0.2em;
    }
  }
  >.right-text{
    position: absolute;
    top: 50%;
    left: calc(50% + 351px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    >img.title{
      height: calc(513px / 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'));
    }
  }
  >button.view-img{
    position: absolute;
    left: 35px;
    bottom: 55px;
    width: 48px;
    height: 48px;
    >img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>