NanjingMuseumWuJinZang/src/views/BambooHotView2/index.vue

<template>
  <div style="height: 100%">
    <div
      v-if="hotVisible"
      class="bamboo-hot2-hot"
    >
      <div class="bamboo-hot2-hot__title">
        {{ ITEM_INFO_MAP[checkedHotId].label }}
      </div>

      <div
        class="bamboo-hot2-hot__inner"
        v-html="ITEM_INFO_MAP[checkedHotId].info"
      />
    </div>

    <div
      ref="bambooWrap"
      class="bamboo-hot2"
      :class="{
        'wrap-hide': hotVisible
      }"
      @touchstart="handleTouchstart"
      @touchmove="handleTouchmove"
      @touchend="handleTouchend"
    >
      <div
        class="bamboo-hot2-b1"
        :class="{
          hide: hotVisible && checkedHotId !== 1
        }"
      >
        <img src="./images/bamboo1.png">

        <div
          class="bamboo-hot2__hot"
          :class="{
            hide: hotVisible
          }"
          @click="handleHot(1)"
        >
          <p>水竹</p>
        </div>
      </div>

      <div
        class="bamboo-hot2-b2"
        :class="{
          hide: hotVisible && checkedHotId !== 2
        }"
      >
        <img
          src="./images/bamboo2.png"
          @load="handleBambooOffset(2)"
        >
      </div>
      <div
        class="bamboo-hot2__hot b2"
        :class="{
          hide: hotVisible
        }"
        @click="handleHot(2)"
      >
        <p>紫竹</p>
      </div>

      <div
        class="bamboo-hot2-b3"
        :class="{
          hide: hotVisible && checkedHotId !== 3
        }"
      >
        <img
          src="./images/bamboo3.png"
          @load="handleBambooOffset(3)"
        >

        <div
          class="bamboo-hot2__hot"
          :class="{
            hide: hotVisible
          }"
          @click="handleHot(3)"
        >
          <p>梅鹿竹</p>
        </div>
      </div>

      <div
        class="bamboo-hot2-b4"
        :class="{
          hide: hotVisible && checkedHotId !== 4
        }"
      >
        <img
          src="./images/bamboo4.png"
          @load="handleBambooOffset(4)"
        >

        <div
          class="bamboo-hot2__hot"
          :class="{
            hide: hotVisible
          }"
          @click="handleHot(4)"
        >
          <p>楠竹</p>
        </div>
      </div>

      <div
        class="bamboo-hot2-b5"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo5.png">
      </div>

      <div
        class="bamboo-hot2-b6"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo6.png">
      </div>

      <div
        class="bamboo-hot2-b7"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo7.png">
      </div>

      <div
        class="bamboo-hot2-b8"
        :class="{
          hide: hotVisible && checkedHotId !== 8
        }"
      >
        <img
          src="./images/bamboo8.png"
          @load="handleBambooOffset(8)"
        >

        <div
          class="bamboo-hot2__hot"
          :class="{
            hide: hotVisible
          }"
          @click="handleHot(8)"
        >
          <p>单竹</p>
        </div>
      </div>

      <div
        class="bamboo-hot2-b9"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo9.png">
      </div>
      <div
        class="bamboo-hot2-b10"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo10.png">
      </div>
      <div
        class="bamboo-hot2-b11"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo11.png">
      </div>
      <div
        class="bamboo-hot2-b12"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo12.png">
      </div>
      <div
        class="bamboo-hot2-b13"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo13.png">
      </div>
      <div
        class="bamboo-hot2-b14"
        :class="{
          hide: hotVisible
        }"
      >
        <img src="./images/bamboo14.png">
      </div>

      <div
        ref="bambooWrapBg"
        class="bamboo-hot2-bg-wrap"
      >
        <img
          v-if="bgImgLoaded"
          class="bamboo-hot2__grass"
          :class="{
            hide: hotVisible
          }"
          src="./images/grass.png"
        >

        <img
          class="bamboo-hot2__bg"
          src="./images/bg.png"
          :style="{
            filter: hotVisible ? 'saturate(1.3) brightness(0.95)' : 'none'
          }"
          @load="bgImgLoaded = true"
        >
      </div>
    </div>

    <div class="system-btns">
      <BtnBack @click="goBack" />
      <OperationTip
        id="operationH"
        class="operation-h"
        text=""
        direction="h"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import useSizeAdapt from "@/useFunctions/useSizeAdapt"

let itemScrollMap = {
  1: 0,
  2: 166,
  3: 201,
  4: 450,
  8: 1048
}
const ITEM_INFO_MAP = {
  1: {
    label: '水竹',
    info: `
      <p>篷耳小，形状为卵形或长椭圆形。</p>
      <p>锋舌边缘生有短白纤毛。</p>
      <p>筝片直立，呈三角形至狭长三角形。</p>
    `
  },
  2: {
    label: '紫竹',
    info: `
      <p>紫竹幼竿绿色，覆盖细柔毛和白粉，</p>
      <p>幕环有毛，籍鞘背面红褐色或绿色加深。</p>
      <p>叶片小而薄，窄披针形。</p>
    `
  },
  3: {
    label: '梅鹿竹',
    info: `
      <p>梅鹿竹斑纹相连，圆形，</p>
      <p>外轮廓深色，斑心发白。</p>
      <p>竹地上有兽斑状斑痕，酷似梅花鹿的花纹。</p>
    `
  },
  4: {
    label: '楠竹',
    info: `
      <p>单轴散生型常绿乔木状竹类植物，</p>
      <p>呈直立状，</p>
      <p>竹叶深绿，</p>
      <p>呈披针形</p>
    `
  },
  8: {
    label: '单竹',
    info: `
      <p>竹质细腻，纤维韧性极强，</p>
      <p>可制成薄如蝉翼的竹篾丝，</p>
      <p>编织成绸似、绢似的精美竹编工艺品。</p>
    `
  },
}

const bgImgLoaded = ref(false)
const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()
const router = useRouter()

const bambooWrap = ref()
const bambooWrapBg = ref()

const hotVisible = ref(false)
const checkedHotId = ref(0)

const handleHot = (id) => {
  checkedHotId.value = id
  hotVisible.value = true

  cancelAnimationFrame(animationFrameId.value)
  bambooWrap.value.scrollTo({
    left: itemScrollMap[id],
    behavior: 'smooth'
  })
  translateX.value = itemScrollMap[id]
}

const handleBambooOffset = (target) => {
  const offset = window.innerWidth / 6
  const left = document.getElementsByClassName(`bamboo-hot2-b${target}`)?.[0].getBoundingClientRect().left
  let temp = 0
  switch (target) {
  case 3:
    temp = window.innerWidth / 3
    break
  case 4:
    temp = -(window.innerWidth * 0.25)
    break
  case 8:
    temp = -(window.innerWidth * 0.7)
    break
  }
  itemScrollMap[target] = left - offset + temp
}

// 动画帧相关
const lastAnimationTimeStamp = ref(0)
const animationFrameId = ref(0)
const moveSpeed = ref(0)
const translateX = ref(0)
const maxTranslateXLength = ref(0)
const lastMoveEventTimeStamp = ref(0)
const isMouseDown = ref(false)
const isMove = ref(false)
const lastTouchPos = ref(0)

watch([bambooWrapBg, bgImgLoaded], () => {
  if (!bgImgLoaded.value) return

  maxTranslateXLength.value = bambooWrapBg.value ? bambooWrapBg.value.scrollWidth - window.innerWidth : 0
  animationFrameId.value = requestAnimationFrame(animationFrameTask)
})

const animationFrameTask = () => {
  const timeStamp = Date.now()
  const timeElapsed = timeStamp - lastAnimationTimeStamp.value

  // 速度减慢
  if (moveSpeed.value > 0) {
    moveSpeed.value -= 0.003 * timeElapsed
    if (moveSpeed.value < 0) {
      moveSpeed.value = 0
    }
  } else if (moveSpeed.value < 0) {
    moveSpeed.value += 0.003 * timeElapsed
    if (moveSpeed.value > 0) {
      moveSpeed.value = 0
    }
  }

  // 根据速度更新距离
  translateX.value += moveSpeed.value * timeElapsed
  if (translateX.value < 0) {
    translateX.value = 0
  } else if (translateX.value > maxTranslateXLength.value) {
    translateX.value = maxTranslateXLength.value
    moveSpeed.value = 0
  }

  bambooWrap.value?.scrollTo({
    left: translateX.value,
    behavior: 'instant'
  })
  lastAnimationTimeStamp.value = timeStamp
  animationFrameId.value = requestAnimationFrame(animationFrameTask)
}

const handleTouchstart = (e) => {
  if (hotVisible.value) return

  isMouseDown.value = true
  moveSpeed.value = 0
  lastMoveEventTimeStamp.value = 0
  lastAnimationTimeStamp.value = Date.now()
  lastTouchPos.value = e.changedTouches[0].clientX
}
const handleTouchmove = (e) => {
  e.preventDefault()
  if (hotVisible.value || !isMouseDown.value || !e.changedTouches.length) return

  if (
    lastMoveEventTimeStamp.value &&
    e.timeStamp - lastMoveEventTimeStamp.value > 1
  ) {
    // 更新speed
    isMove.value = true
    const currentMoveSpeed =
      (-(e.changedTouches[0].clientX - lastTouchPos.value) /
        (e.timeStamp - lastMoveEventTimeStamp.value)) *
      1.5
    moveSpeed.value = moveSpeed.value * 0.9 + currentMoveSpeed * 0.1
    lastTouchPos.value = e.changedTouches[0].clientX
  }
  lastMoveEventTimeStamp.value = e.timeStamp
}
const handleTouchend = () => {
  if (hotVisible.value) return

  isMouseDown.value = false
  setTimeout(() => {
    isMove.value = false
  })
}

const goBack = () => {
  if (hotVisible.value) {
    hotVisible.value = false
    checkedHotId.value = 0
    animationFrameId.value = requestAnimationFrame(animationFrameTask)
    return
  }

  router.push({
    name: 'MoreContent',
    query: {
      anchorIdx: 0,
    }
  })
}

onBeforeUnmount(() => {
  cancelAnimationFrame(animationFrameId.value)
})
</script>

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

img {
  pointer-events: none;
}

.hide {
  opacity: 0 !important;
  animation: none !important;
}

[class^="bamboo-hot2-b"] {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 3;

  img {
    height: 100%;
  }
}

.bamboo-hot2-hot {
  display: flex;
  position: fixed;
  top: 50%;
  right: calc(70 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
  transform: translateY(-50%);
  color: white;
  font-family: KaiTi;
  writing-mode: vertical-rl;
  white-space: nowrap;
  z-index: 999;

  &__title {
    position: relative;
    margin-bottom: calc(90 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    font-weight: bold;
    letter-spacing: 5px;
    font-size: calc(38 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));

    &::before {
      content: '';
      position: absolute;
      top: calc(-2 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      right: calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      width: calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      height: calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      border-radius: 50%;
      border: 1px solid #F8DD86;
      z-index: -1;
    }
  }
  &__inner {
    letter-spacing: 3px;
    line-height: calc(40 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    font-size: calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
  }
}

.bamboo-hot2 {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: calc(100 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
  transform-style: preserve-3d;
  overflow-x: auto;

  > * {
    opacity: 1;
    transition: all linear .2s;
  }
  &__hot {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    color: white;
    font-size: 12px;
    font-family: KaiTi;
    writing-mode: vertical-rl;
    animation: breathing linear 2s infinite;

    &::before {
      content: '';
      display: block;
      margin-bottom: calc(5 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      width: 20px;
      height: 20px;
      background: url('./images/hot.png') no-repeat center / contain;
    }
  }
  &-b1 {
    left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);

    .bamboo-hot2__hot {
      top: calc(340 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      right: calc(40 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    }
  }
  &-b2 {
    left: calc(250 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
    z-index: 2;
  }
  .bamboo-hot2__hot.b2 {
    top: calc(200 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    left: calc(305 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
    z-index: 4;
  }
  &-b3 {
    left: calc(140 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);

    .bamboo-hot2__hot {
      top: calc(300 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    }
  }
  &-b4 {
    left: calc(600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.85);

    .bamboo-hot2__hot {
      top: calc(220 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      right: calc(14 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    }
  }
  &-b5 {
    left: calc(1050 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
  }
  &-b6 {
    left: calc(1170 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
  }
  &-b7 {
    left: calc(1050 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
    z-index: 2;
  }
  &-b8 {
    left: calc(1180 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);

    .bamboo-hot2__hot {
      top: calc(320 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    }
  }
  &-b9 {
    left: calc(1480 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.82);
  }
  &-b10 {
    left: calc(1810 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
  }
  &-b11 {
    left: calc(1790 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(5 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
    z-index: 2;
  }
  &-b12 {
    left: calc(1600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
    z-index: 2;
  }
  &-b13 {
    left: calc(2050 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
    z-index: 2;
  }
  &-b14 {
    left: calc(2220 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transform: translateZ(calc(30 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.7);
  }
  &.wrap-hide {
    &::before,
    &::after {
      opacity: 0;
    }
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(457 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    height: calc(330 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    background: url('./images/leaf.png') no-repeat center / contain;
    opacity: 1;
    transition: opacity linear .2s;
    z-index: 3;
  }
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(1600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    width: calc(689 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    height: calc(276 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    background: url('./images/leaf2.png') no-repeat center / contain;
    opacity: 1;
    transition: opacity linear .2s;
    z-index: 3;
  }
  &-bg-wrap {
    width: fit-content;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  &__grass {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
  }
  &__bg {
    height: 100%;
  }
}

.system-btns {
  width: 100%;
  padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
  display: flex;
  // flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
  z-index: 2;

  .operation-h {
    width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    transition: opacity 0.5s ease-in-out;
  }
}

@keyframes breathing {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
</style>