NanjingMuseumWuJinZang/src/views/PaintingDetail.vue

<template>
  <div
    :id="`${direction ? 'myRowBox' : ''}`"
    class="hotspot-detail-2"
  >
    <div
      id="painting-wrap-id"
      :class="`painting-wrap ${direction ? 'swiper-no-swiping' : ''} ${
        isUping ? 'paintion-wrap-top' : ''
      }`"
      :style="{
        clipPath: `rect(0 100% ${AnimationProgress.value}% 0)`,
        top: `${direction && isUping ? '0%' : ''}`,
        transform: `${
          direction && isUping
            ? 'translate(-50%, 0) rotate(-90deg)'
            : direction
              ? 'translate(-50%, 0) rotate(-90deg)'
              : ''
        }`,
        left: `${direction && isUping ? '50%' : direction ? '26%' : ''}`,
      }"
    >
      <!-- 横向才有的 -->
      <div
        v-show="direction"
        class="myRowBoxImg"
        @click="showBigPainting"
      >
        <div>
          <img
            :src="props.thumb"
            alt=""
          >
        </div>
      </div>

      <img
        v-show="!direction"
        class="painting-border"
        src="@/assets/images/painting-border-new.png"
        alt=""
        draggable="false"
      >
      <div
        v-show="!direction"
        ref="paintingWrap2El"
        class="painting-wrap-2"
      >
        <img
          ref="paintingEl"
          class="painting"
          :class="{
            oversize: isOversize,
          }"
          :src="props.thumb"
          alt=""
          draggable="false"
          @click="showBigPainting"
        >
      </div>
      <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="`desc-text-upShowd ${isUping ? 'desc-text-upShowdShow' : ''}`"
    />

    <div
      ref="descTextEl"
      v-touch:swipe.top="onSwipeTop"
      v-touch:swipe.bottom="onSwipeDown"
      class="desc-text"
      :class="{ 'desc-text-up': isUping }"
      :style="{
        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
      }"
    >
      <div
        class="info-title-content"
        :class="{ 'info-title-content-up': isUping }"
      >
        <h1>{{ props.title }}</h1>
        <p class="subtitle">
          {{ `${props.author} （${props.age}）` }}
        </p>
        <p class="subtitle">
          {{ props.subtitle }}
        </p>
        <p class="subtitle">
          {{ props.location }}
        </p>
      </div>
      <div
        v-show="isUping"
        v-touch:swipe.bottom="
          () => {
            isUping = true;
          }
        "
        class="info-content"
        :class="{ 'info-content-up': isUping }"
      >
        <h2 v-if="paintingDesc">
          作品简介：
        </h2>
        <div class="normal-text">
          {{ paintingDesc }}
        </div>
        <h2 v-if="authorDesc">
          作者简介：
        </h2>
        <div class="normal-text">
          {{ authorDesc }}
        </div>
      </div>
    </div>

    <OperationTip
      v-if="needOperationTip"
      class="operation-tip"
      text=""
      :is-show="isShowOperationTip"
    />

    <BtnBack
      v-if="canClose"
      @click="emit('close')"
    />
  </div>
</template>

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

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

const $env = inject("$env")

const emit = defineEmits(["close"])

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

const props = defineProps({
  thumb: {
    type: String,
    required: true,
  },
  bigPainting: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  author: {
    type: String,
    required: true,
  },
  // subtitle: {
  //   type: String,
  //   required: true,
  // },
  age: {
    type: String,
    required: true,
  },
  location: {
    type: String,
    required: true,
  },
  paintingDesc: {
    type: String,
    default: "",
  },
  authorDesc: {
    type: String,
    default: "",
  },
  canClose: {
    type: Boolean,
    default: true,
  },
  size: {
    type: Object,
    default: () => {
      return {
        width: 1,
        height: 1,
      }
    },
  },
  direction: {
    type: String,
    default: () => {
      return
    },
  },
  needOperationTip: {
    type: Boolean,
    default: false,
  },
})

onMounted(() => {
  // console.log('pppppppp', props.direction, props.title)
})

/**
 * 操作提示
 */
const needOperationTip = computed(() => {
  return props.needOperationTip
})
const isShowOperationTip = ref(true)
const descTextEl = ref(null)
const descTextElScrollTop = ref(0)
onMounted(() => {
  descTextEl.value.addEventListener("scroll", (e) => {
    descTextElScrollTop.value = descTextEl.value.scrollTop
  })

  // 判断图片是否是横向
})
const unwatch = watch(descTextElScrollTop, (v) => {
  isShowOperationTip.value = false
  unwatch()
})

const isUping = ref(false)

// 上滑
const onSwipeTop = () => {
  // console.log('上滑')
  // 画作缩小
  isUping.value = props.paintingDesc ? true : false
}

// 下滑
const onSwipeDown = () => {
  // 看看文字滚动是否到顶部了
  const topNum = descTextEl.value.scrollTop
  if (topNum <= 0) isUping.value = false
}

onBeforeUnmount(() => {
  isUping.value = false
})

const isAnimating = ref(true)

/** 卷轴展开动画的tweening */
const AnimationProgress = ref({
  value: 7,
})

const isShowTipTop = ref(false)

watch(AnimationProgress, (v) => {
  if (v == 99) {
    isShowTipTop.value = true
    setTimeout(() => {
      isShowTipTop.value = false
    }, 1000)
  }
})
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 paintingWrapWidth = ref(268)
const paintingWrapHeight = ref(426)
let wrapSizeRatio = paintingWrapWidth.value / paintingWrapHeight.value
if (wrapSizeRatio < 1) {
  wrapSizeRatio = 1 / wrapSizeRatio
}

let sizeRatio = props.size.width / props.size.height
if (sizeRatio < 1) {
  sizeRatio = 1 / sizeRatio
}

const isOversize = ref(sizeRatio > wrapSizeRatio)

const paintingWrap2El = ref(null)
const paintingEl = ref(null)
onMounted(() => {
  if (isOversize.value) {
    setTimeout(() => {
      const y =
        (paintingEl.value.clientHeight - paintingWrap2El.value.clientHeight) /
        2
      paintingWrap2El.value.scrollTo({
        top: y,
        // behavior: 'smooth',
      })
    }, 0)
  }
})

function showBigPainting() {
  viewerApi({
    images: [props.bigPainting],
  })
}
</script>

<style lang="less" scoped>
.hotspot-detail-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .painting-wrapRow {
    background-color: red;
    z-index: 99;
  }

  > .painting-wrap {
    position: absolute;
    left: 50%;
    top: calc(
      70 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    transform: translate(-50%, 0);
    width: calc(
      356 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: calc(
      602 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    overflow: hidden;
    transition: top 2s ease, transform 2s ease, left 2s ease;

    > img.painting-border {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    > .painting-wrap-2 {
      position: absolute;
      left: 50%;
      top: calc(
        110 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      transform: translate(-50%, 0);
      width: calc(
        v-bind("paintingWrapWidth") / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        v-bind("paintingWrapHeight") / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      overflow: auto;

      > img.painting {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }

      > img.painting.oversize {
        position: static;
        left: initial;
        top: initial;
        transform: initial;
      }
    }

    > img.bottom-border-for-animation {
      position: absolute;
      left: 0;
      width: 100%;
    }
  }

  // 上滑动画和状态

  > .paintion-wrap-top {
    animation: paintion-up 2s forwards;
    transform: translate(-50%, 0) scale(0.6);
    top: calc(
      -60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef)
    );

    // @keyframes paintion-up {
    //   0% {
    //     transform: translate(-50%, 0);
    //     top: calc(70 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef));
    //   }

    //   100% {
    //     transform: translate(-50%, 0) scale(0.6);
    //     top: calc(-60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef));
    //   }
    // }
  }

  > .desc-text {
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    width: calc(
      306 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: calc(
      130 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    overflow: auto;
    transition: height 2s ease;

    .info-title-content {
      transition: all 2s ease;
      > h1 {
        text-align: center;
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        color: #ffffff;
        margin-bottom: calc(
          19 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
      }

      > p.subtitle {
        text-align: center;
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(
          16 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        color: rgba(255, 255, 255, 0.8);
        line-height: calc(
          19 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        margin-bottom: calc(
          6 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
      }

      > h2 {
        display: inline-block;
        margin-top: calc(
          30 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        font-family: KaiTi, KaiTi;
        color: #ffffff;
        margin-top: 2em;
        margin-bottom: 0.5em;
        font-weight: 400;
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
      }

      > .normal-text {
        font-family: KaiTi, KaiTi;
        color: #ffffff;
        font-weight: 400;
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        line-height: calc(
          25 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        text-align: justify;
        white-space: pre-line;
      }
    }

    // 向上滑动
    .info-title-content-up {
      // animation: title-up 2s forwards;
      opacity: 0;
      height: 0;
      overflow: hidden;

      // @keyframes title-up {
      //   0% {
      //     opacity: 1;
      //   }

      //   100% {
      //     opacity: 0;
      //     display: none;
      //   }
      // }
    }

    > .info-content {
      > h1 {
        text-align: center;
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        color: #ffffff;
        margin-bottom: calc(
          19 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
      }

      > p.subtitle {
        text-align: center;
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(
          16 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        color: rgba(255, 255, 255, 0.8);
        line-height: calc(
          19 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        margin-bottom: calc(
          6 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
      }

      > h2 {
        display: inline-block;
        margin-top: calc(
          30 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        font-family: KaiTi, KaiTi;
        color: #ffffff;
        margin-top: 2em;
        margin-bottom: 0.5em;
        font-weight: 400;
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
      }

      > .normal-text {
        font-family: KaiTi, KaiTi;
        color: #ffffff;
        font-weight: 400;
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        line-height: calc(
          25 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        text-align: justify;
        white-space: pre-line;
      }
    }
    > .info-content-up {
      animation: info-up 2s forwards;
      @keyframes info-up {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
          // transform: translateY(-50%);
        }
      }
    }

    // >h1 {
    //   text-align: center;
    //   font-family: KaiTi, KaiTi;
    //   font-weight: 400;
    //   font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    //   color: #FFFFFF;
    //   margin-bottom: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    // }

    // >p.subtitle {
    //   text-align: center;
    //   font-family: KaiTi, KaiTi;
    //   font-weight: 400;
    //   font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    //   color: rgba(255, 255, 255, 0.8);
    //   line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    //   margin-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    // }

    // >h2 {
    //   display: inline-block;
    //   margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    //   font-family: KaiTi, KaiTi;
    //   color: #FFFFFF;
    //   margin-top: 2em;
    //   margin-bottom: 0.5em;
    //   font-weight: 400;
    //   font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    // }

    // >.normal-text {
    //   font-family: KaiTi, KaiTi;
    //   color: #FFFFFF;
    //   font-weight: 400;
    //   font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    //   line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    //   text-align: justify;
    //   white-space: pre-line;
    // }
  }
  > .desc-text-up {
    height: calc(
      360 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    bottom: 0;
    padding-bottom: 15px;
    // animation: text-up 2s forwards;
    // @keyframes text-up {
    //   100%{
    //     height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    //   }
    // }
  }

  .desc-text-upShowd {
    width: 100%;
    height: calc(
      140 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s;
    background: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.4)
    );
  }
  .desc-text-upShowdShow {
    opacity: 1;
  }

  > .operation-tip {
    position: absolute;
    right: calc(
      39 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    bottom: calc(
      49 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }

  > .operation-tip {
    position: absolute;
    right: calc(
      49 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    bottom: calc(
      39 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }
}
#myRowBox {
  #painting-wrap-id {
    height: 100vw !important;
    left: 50% !important;
    // transform: translate(-50%, 0) rotate(-90deg) scale(0.6) !important;
    .myRowBoxImg {
      height: 100%;
      width: 100%;
      max-height: 100vh;
      overflow-x: auto;
      white-space: nowrap;
      display: inline-block;
      & > div {
        padding: 33% 10% 20% 10%;
        // width:100%;
        background-image: url("../assets/images/img_painting_heng.png");
        background-size: 100% 100%;
        display: inline-block;
        & > img {
          display: inline-block;
          width: 100%;
        }
      }
    }
    .painting-wrap-2 {
      overflow: visible;
    }
  }
}
</style>