NanjingMuseumWuJinZang-PC/src/views/BambooList.vue

<template>
  <div class="bamboo-list">
    <img
      class="bg"
      :style="{
        opacity: isShowDetail ? 1 : 0.5,
      }"
      src="@/assets/images/bamboo-list/bg.jpg"
      alt=""
      draggable="false"
    >
    <BtnBack
      class="btn-back"
      @click="onClickBack"
    />

    <!-- 竹林各元素 -->
    <div
      ref="scrollTarget"
      class="scroll-target"
    >
      <div
        class="layer-1"
        :style="{
          left: layer1Left + 'px',
        }"
      >
        <img
          class="weed"
          :style="{
            opacity: isShowDetail ? 0 : 1,
          }"
          src="@/assets/images/bamboo-list/weed.png"
          alt=""
          draggable="false"
        >
        <img
          class="leaf"
          :style="{
            opacity: isShowDetail ? 0 : 1,
          }"
          src="@/assets/images/bamboo-list/leaf.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo shui-zhu"
          :class="{
            focused: showDetailIdx === 0,
            hide: isShowDetail && showDetailIdx !== 0
          }"
          src="@/assets/images/bamboo-list/shui-zhu.png"
          alt=""
          draggable="false"
        >
        <HotspotCompSmall
          v-show="!isShowDetail"
          class="hotspot-shui-zhu"
          @click="onClickHotspot(0)"
        >
          水竹
        </HotspotCompSmall>
        <img
          class="bamboo zi-zhu"
          :class="{
            focused: showDetailIdx === 1,
            hide: isShowDetail && showDetailIdx !== 1
          }"
          src="@/assets/images/bamboo-list/zi-zhu.png"
          alt=""
          draggable="false"
        >
        <HotspotCompSmall
          v-show="!isShowDetail"
          class="hotspot-zi-zhu"
          @click="onClickHotspot(1)"
        >
          紫竹
        </HotspotCompSmall>
        <img
          class="bamboo mei-lu-zhu"
          :class="{
            focused: showDetailIdx === 2,
            hide: isShowDetail && showDetailIdx !== 2
          }"
          src="@/assets/images/bamboo-list/mei-lu-zhu.png"
          alt=""
          draggable="false"
        >
        <HotspotCompSmall
          v-show="!isShowDetail"
          class="hotspot-mei-lu-zhu"
          @click="onClickHotspot(2)"
        >
          梅鹿竹
        </HotspotCompSmall>
        <img
          class="bamboo nan-zhu"
          :class="{
            focused: showDetailIdx === 3,
            hide: isShowDetail && showDetailIdx !== 3
          }"
          src="@/assets/images/bamboo-list/nan-zhu.png"
          alt=""
          draggable="false"
        >
        <HotspotCompSmall
          v-show="!isShowDetail"
          class="hotspot-nan-zhu"
          @click="onClickHotspot(3)"
        >
          楠竹
        </HotspotCompSmall>
        <img
          class="bamboo xiang-fei-zhu"
          :class="{
            focused: showDetailIdx === 4,
            hide: isShowDetail && showDetailIdx !== 4
          }"
          src="@/assets/images/bamboo-list/xiang-fei-zhu.png"
          alt=""
          draggable="false"
        >
        <HotspotCompSmall
          v-show="!isShowDetail"
          class="hotspot-xiang-fei-zhu"
          @click="onClickHotspot(4)"
        >
          湘妃竹
        </HotspotCompSmall>
        <img
          class="bamboo dan-zhu"
          :class="{
            focused: showDetailIdx === 5,
            hide: isShowDetail && showDetailIdx !== 5
          }"
          src="@/assets/images/bamboo-list/dan-zhu.png"
          alt=""
          draggable="false"
        >
        <HotspotCompSmall
          v-show="!isShowDetail"
          class="hotspot-dan-zhu"
          @click="onClickHotspot(5)"
        >
          单竹
        </HotspotCompSmall>
      </div>
    </div>

    <!-- 详情 -->
    <Transition name="fade-in-out">
      <div
        v-if="isShowDetail"
        class="detail-wrap-outter"
      >
        <div
          class="detail-wrap"
        >
          <h1>{{ bambooList[showDetailIdx].label }}</h1>
          <p v-html="bambooList[showDetailIdx].info" />
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject, nextTick } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
import { useWindowSize } from "@vueuse/core"

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

const $env = inject('$env')

const windowWidthDesign = 1920
const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏

const scrollTarget = ref(null)
const { width: windowWidth, height: windowHeight } = useWindowSize()

const maxTranslateLength = computed(() => {
  return (windowHeight.value * windowWidthDesign) / windowHeightDesign
})

const {
  translateLength,
} = useSmoothSwipe({
  scrollTargetRef: scrollTarget,
  maxTranslateLength,
  viewportWidth: windowWidth,
})

// layer1Left位移
const layer1InitialLeft = 0
const layer1Left = ref(layer1InitialLeft)

watch(
  translateLength,
  (v) => {
    layer1Left.value = layer1InitialLeft - v
  },
  {
    immediate: true,
  }
)

const bambooList = ref([
  {
    label: '水竹',
    info: '竿可高6米许，粗达3厘米；篷耳小，形状为卵形或长椭圆形。锋舌边缘生有短白纤毛。筝片直立，呈三角形至狭长三角形。叶片为线状披针形或披针形，下表面基部有些许毛。'
  },
  {
    label: '紫竹',
    info: '紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，籍鞘背面红褐色或绿色加深。斑点微小或无，锌鞘上端常密集，带微量白粉和淡褐色刺毛。叶片小而薄，窄披针形，先端尖长。'
  },
  {
    label: '梅鹿竹',
    info: '梅鹿竹斑纹相连，圆形，外轮廓深色，斑心发白。有些竹地呈青灰色，上有兽斑状斑痕，酷似梅花鹿的花纹。'
  },
  {
    label: '楠竹',
    info: '单轴散生型常绿乔木状竹类植物，株高约20米，径可达12-30厘米，呈直立状，基部节间长1-6厘米，中部节间长达40厘米，新秆上具细柔毛后脱落。'
  },
  {
    label: '湘妃竹',
    info: '中小型竹，竿高5米-10米，竿环及箨（tuò）环隆起，竿箨黄褐色，有黑褐色斑点，箨耳较小，矩圆形或镰形，箨叶三角形或带形，橘红色，边缘绿色，叶带状披针形，叶舌发达，有叶耳及长肩毛。'
  },
  {
    label: '单竹',
    info: '民间俗称“苦慈”，竹质细腻，纤维韧性极强，可制成薄如蝉翼、细如发丝的竹篾丝，编织成绸似、绢似的精美竹编工艺品。'
  },
])

const isShowDetail = ref(false)
const showDetailIdx = ref(-1)

function onClickHotspot(idx) {
  showDetailIdx.value = idx
  isShowDetail.value = true
}

function onClickBack() {
  if (isShowDetail.value) {
    isShowDetail.value = false
    showDetailIdx.value = -1
  } else {
    router.go(-1)
  }
}

</script>

<style lang="less" scoped>
.bamboo-list{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #d3e2cd;
  >img.bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
  }
  >.btn-back{
    z-index: 1;
  }

  > .scroll-target {
    height: 100%;
    width: 100%;
    display: flex;
    gap: 100px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    >.layer-1{
      position: absolute;
      height: 100%;
      >img.weed{
        position: absolute;
        left: 0;
        bottom: calc(-50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        height: calc(410px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        transition: all 1s;
      }
      >img.leaf{
        position: absolute;
        left: 0;
        top: calc(-80px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        height: calc(442px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        z-index: 1;
        transition: all 1s;
      }
      >img.bamboo{
        transition: all 1s;
      }
      >img.bamboo.hide{
        opacity: 0;
      }
      >img.bamboo.focused{
        left: calc(v-bind('translateLength') * 2px + 20vw); // 为什么要乘以2？我自己也不知道。。。
      }
      >img.shui-zhu{
        position: absolute;
        left: calc(100px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: 0;
        height: 100%;
        z-index: 1;
      }
      >.hotspot-shui-zhu{
        position: absolute;
        left: calc(185px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: calc(350px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        z-index: 2;
      }
      >img.zi-zhu{
        position: absolute;
        left: calc(390px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: 0;
        height: 100%;
        z-index: 0;
      }
      >.hotspot-zi-zhu{
        position: absolute;
        left: calc(510px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: calc(152px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        z-index: 2;
      }
      >img.mei-lu-zhu{
        position: absolute;
        left: calc(390px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: 0;
        height: 100%;
        z-index: 1;
      }
      >.hotspot-mei-lu-zhu{
        position: absolute;
        left: calc(710px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: calc(274px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        z-index: 2;
      }
      >img.nan-zhu{
        position: absolute;
        left: calc(1140px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: 0;
        height: 100%;
        z-index: 1;
      }
      >.hotspot-nan-zhu{
        position: absolute;
        left: calc(1160px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: calc(217px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        z-index: 2;
      }
      >img.xiang-fei-zhu{
        position: absolute;
        left: calc(1350px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: 0;
        height: 100%;
        z-index: 1;
      }
      >.hotspot-xiang-fei-zhu{
        position: absolute;
        left: calc(1695px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: calc(71px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        z-index: 2;
      }
      >img.dan-zhu{
        position: absolute;
        left: calc(1500px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: 0;
        height: 100%;
        z-index: 1;
      }
      >.hotspot-dan-zhu{
        position: absolute;
        left: calc(1620px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        top: calc(358px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        z-index: 2;
      }
    }
  }

  >.detail-wrap-outter{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    >.detail-wrap{
      position: absolute;
      top: 17.6vh;
      left: 50%;
      >h1{
        font-family: KingHwa_OldSong, KingHwa_OldSong;
        font-weight: 400;
        font-size: 60px;
        color: #FFFFFF;
        line-height: 75px;
        text-shadow: 0px 0px 2px rgba(0,0,0,0.25);
        margin-bottom: 1em;
      }
      >p{
        width: 24.2vw;
        margin-left: 60px;
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 45px;
        text-align: justified;
      }
    }
  }
}
</style>