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="{
        top: `${direction && isUping ? '0%' : ''}`,
        transform: `${direction ? 'translate(-50%) rotate(-90deg)' : ''}`,
        left: `${direction && isUping ? '50%' : direction ? '26%' : ''}`,
      }"
    >
      <!-- 横向才有的-->
      <div
        v-if="direction"
        class="myRowBoxImg"
        :style="`height:${
          isOpenNow ? (isAnimating ? AnimationProgress - 4 : 100) : 100
        }%`"
        @click="showBigPainting"
      >
        <div>
          <img
            :src="props.thumb"
            alt=""
          >
          <img
            class="shuZhou"
            src="@/assets/images/painting-border-bottom.png"
            alt=""
          >
        </div>
      </div>

      <!-- 竖向才有的 -->
      <div
        v-if="!direction"
        class="shuBox"
        :style="`height:${isOpenNow ? AnimationProgress : 100}%`"
      >
        <img
          class="painting-border"
          src="@/assets/images/painting-border-new.png"
          alt=""
          draggable="false"
        >
        <div
          ref="paintingWrap2El"
          class="painting-wrap-2"
        >
          <img
            ref="paintingEl"
            class="painting"
            :class="{
              oversize: isOversize,
            }"
            :src="props.thumb"
            alt=""
            draggable="false"
            @click="showBigPainting"
          >
        </div>
      </div>

      <Transition
        v-if="isOpenNow"
        name="fade-out"
      >
        <img
          v-show="isAnimating"
          class="bottom-border-for-animation"
          :style="{
            bottom: `${100 - AnimationProgress}%`,
          }"
          src="@/assets/images/painting-border-bottom.png"
          alt=""
          draggable="false"
        >
      </Transition>
    </div>

    <!-- 底部阴影 -->
    <div
      :class="`desc-text-upShowd ${isUping ? 'desc-text-upShowdShow' : ''}`"
    />

    <div
      ref="descTextEl"
      class="desc-text"
      :class="{ 'desc-text-up': isUping }"
      :style="{
        opacity: isAnimating ? AnimationProgress / 100 : 1,
      }"
      @touchstart="handletouchstartUp"
      @touchend="touchEndUp"
    >
      <div
        class="info-title-content"
        :class="{ 'info-title-content-up': isUping }"
      >
        <h1>{{ props.title }}</h1>
        <p
          class="subtitle"
          style="margin-bottom: 19px"
        >
          {{ `${props.author} （${props.age}）` }}
        </p>
        <p class="subtitle">
          {{ props.size.width }} x {{ props.size.height }} 厘米
        </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,
  onBeforeUnmount,
  onBeforeMount,
} from "vue"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import { api as viewerApi } from "v-viewer"

const emit = defineEmits(["close", "touch-up"])

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

const props = defineProps({
  // 是否是当前需要展开画轴的
  isOpenNow: {
    type: Boolean,
    required: true,
  },
  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,
  },
})

const lastY = ref(0)
// 开始滑动
const handletouchstartUp = (event) => {
  emit("touch-up")
  lastY.value = event.changedTouches[0].pageY
}

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

const touchEndUp = (event) => {
  let currentY = event.changedTouches[0].pageY
  let ty = currentY - lastY.value
  if (ty > 0) {
    console.log("向下")
    onSwipeDown()
  } else if (ty < 0) {
    console.log("向上")
    onSwipeTop()
  }
}

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

  // 判断图片是否是横向
})
const unwatch = watch(descTextElScrollTop, () => {
  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(7)

let timeAA = -1

onMounted(() => {
  if (props.isOpenNow) {
    timeAA = setInterval(() => {
      if (AnimationProgress.value >= 99) {
        clearInterval(timeAA)
        isAnimating.value = false
      }
      AnimationProgress.value = AnimationProgress.value + 2
    }, 30)
  } else {
    AnimationProgress.value = 100
    isAnimating.value = false
  }
})

onBeforeMount(() => {
  clearInterval(timeAA)
})

/**
 * 尺寸相关
 */
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)

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

<style lang="less" scoped>
::-webkit-scrollbar {
  display: none;
}

.hotspot-detail-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  > .painting-wrap {
    position: absolute;
    left: 50%;
    top: calc(
      30 / 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;

    .shuBox {
      display: inline-block;
      overflow: hidden;
      position: relative;
      .painting-border {
        width: 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;
        &::-webkit-scrollbar {
          display: none;
        }

        > 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;
      z-index: 100;
      left: 0;
      width: 100%;
      -webkit-backface-visibility: hidden;

      -moz-backface-visibility: hidden;

      -ms-backface-visibility: hidden;

      backface-visibility: hidden;

      -webkit-perspective: 1000;

      -moz-perspective: 1000;

      -ms-perspective: 1000;

      perspective: 1000;

      /* Other transform properties here */
    }
  }

  // 上滑动画和状态

  > .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(
      150 / 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;
        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")
        // );
        white-space: pre;
      }

      > p.subtitle {
        text-align: center;
        font-family: 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;
        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;
        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;
        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;
        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;
        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;
        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;
    //   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;
    //   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;
    //   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;
    //   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 {
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    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;
    top: 12%;
    // 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;
      position: relative;
      &::-webkit-scrollbar {
        display: none;
      }
      & > div {
        padding: 28% 10% 28% 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%;
        }
        position: relative;
        .shuZhou {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }
    }
    .painting-wrap-2 {
      overflow: visible;
    }
  }
  .desc-text {
    height: calc(
      230 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }
  .desc-text-up {
    height: calc(
      360 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }
}
</style>