NanjingMuseumWuJinZang-PC/src/views/HotspotDetail3.vue

<template>
  <div
    class="hotspot-detail-3"
    @wheel="($event) => handleScrollThrottle($event, () => scrollFu(-1),() => scrollFu(1))"
  >
    <img
      v-show="state === 1"
      class="bg-img"
      src="@/assets/images/hots-detail-bg-state1.jpg"
      alt=""
    >
    <img
      v-show="state === 2"
      class="bg-img"
      src="@/assets/images/hots-detail-bg-state2.jpg"
      alt=""
    >
    <img
      v-show="state === 3"
      class="bg-img"
      src="@/assets/images/hots-detail-bg-state3.jpg"
      alt=""
    >

    <!-- 滑动提示 -->
    <OperationTip
      class="operation-tip"
      text="向下滑动"
      :is-show="isShowOperationTip"
    />


    <!-- 阴影 -->
    <img
      class="shadow-box"
      :src="shadow"
      :style="{ width: state === 1 ? '20%' : state === 2 ? '80%' :'35%',bottom: state === 1 ?'-15px':'' }"
    >

    <img
      class="content1"
      :src="hots3StateContent1"
      :style="{
        opacity: state === 1 ? 1 : 0,
      }"
      alt=""
    >
    <div
      id="content2"
      ref="content2Dom"
      :style="{
        opacity: state === 2 ? 1 : 0,
      }"
      class="content2"
    >
      <img
        id="content2Img"
        :src="hots3StateContent2"
        alt=""
      >
    </div>
    <img
      class="content3"
      :style="{
        opacity: state === 3 ? 1 : 0,
      }"
      :src="hots3StateContent3"
      alt=""
    >
    <div class="btns-box">
      <img
        :src="state == 1 || hoverIndex== 1 ? hots3StateBtn1Ac : hots3StateBtn1"
        alt=""
        @mouseenter="hoverIndex = 1"
        @mouseleave="hoverIndex = null"
        @click="state = 1"
      >
      <img
        :src="state == 2 || hoverIndex== 2 ? hots3StateBtn2Ac : hots3StateBtn2"
        alt=""
        @mouseenter="hoverIndex = 2"
        @mouseleave="hoverIndex = null"
        @click="goState2"
      >
      <img
        :src="state == 3 || hoverIndex== 3 ? hots3StateBtn3Ac : hots3StateBtn3"
        alt=""
        @mouseenter="hoverIndex = 3"
        @mouseleave="hoverIndex = null"
        @click="state = 3"
      >
    </div>
    <BtnBack @click="emit('close')" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import { useWindowSize } from "@vueuse/core"


const emit = defineEmits(["close"])

const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
const { width: windowWidth, height: windowHeight } = useWindowSize()

// 三个按钮

import hots3StateBtn1 from "@/assets/images/hots-detail-btn-state1.png"
import hots3StateBtn2 from "@/assets/images/hots-detail-btn-state2.png"
import hots3StateBtn3 from "@/assets/images/hots-detail-btn-state3.png"

import hots3StateBtn1Ac from "@/assets/images/hots-detail-btn-state1-ac.png"
import hots3StateBtn2Ac from "@/assets/images/hots-detail-btn-state2-ac.png"
import hots3StateBtn3Ac from "@/assets/images/hots-detail-btn-state3-ac.png"

// 三个阴影
import hots3StateShadow1 from "@/assets/images/img_shadow_1.png"
import hots3StateShadow2 from "@/assets/images/img_shadow_2.png"
import hots3StateShadow3 from "@/assets/images/img_shadow_3.png"

// 三个内容
import hots3StateContent1 from "@/assets/images/hots-detail-content-state1.png"
import hots3StateContent2 from "@/assets/images/hots-detail-content-state2.png"
import hots3StateContent3 from "@/assets/images/hots-detail-content-state3.png"

import useRollFu from "../rollFu.js"


const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

// 轴1  卷2 册3
const state = ref(1)

const hoverIndex = ref(0)

// const isShowOperationTip = ref(false)

const { handleScrollThrottle } = useRollFu()

// 滑动逻辑
const scrollFu = (val) => {
  isShowOperationTip.value = false
  if (val == -1) {
    // 上滚
    if (state.value == 1) {
      state.value = 3
    } else {
      state.value -= 1
    }
  } else if (val == 1) {
    // 下滚
    if (state.value == 3) {
      state.value = 1
    } else {
      state.value += 1
    }
  }
}

// const homeBg = computed(() => {
//   return `url(${state.value == 1 ? hots3StateBg1 : state.value == 2 ? hots3StateBg2 : hots3StateBg3})`
// })

const shadow = computed(() => {
  return state.value == 1
    ? hots3StateShadow1
    : state.value == 2
      ? hots3StateShadow2
      : hots3StateShadow3
})

const content2Dom = ref(null)
const isShowOperationTip = ref(true)
const goState2 = () => {
  state.value = 2
  setTimeout(() => {
    // if (content2Dom.value) {
    //   const x = 310 / 780
    //   const allWidth = document
    //     .getElementById("content2Img")
    //     .getBoundingClientRect().width
    //   content2Dom.value.scrollLeft = allWidth * x
    //   // isShowOperationTip.value = true
    // }
  }, 5)
}

</script>

<style lang="less" scoped>
.hotspot-detail-3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // background-image: v-bind(homeBg);
  // background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  z-index: 3;

  .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    object-position: bottom;
  }

  .shadow-box {
    position: absolute;
    bottom: calc(
      80 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    left: 50%;
    transform: translateX(-50%);
  }

  .content1 {
    // width: 90%;
    max-height: 90vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 1s ease;
  }

  .content2 {
    width: 100%;
    background-position: left top;
    overflow: auto;
    position: absolute;
    transition: opacity 1s ease;
    z-index: 2;
    display: flex;
    justify-content:center;
    img {
      // height: 90vh;
      width: 80%;
    }
  }

  .content3 {
    position: absolute;
    // width: 100%;
    height: 80vh;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 1s ease;
  }

  .operation-tip {
    position: absolute;
    right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    transform: translateX(-50%);
    top: 50%;
    transform: translateY(-50%);
  }

  .btns-box {
    // width: 55%;
    height: calc(200px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    position: absolute;
    left: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    // transform: translateX(-50%);
    bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    z-index: 10;

    > img {
      width: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      width: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      cursor: pointer;
    }
  }
}
</style>