NanjingMuseumWuJinZang-PC/src/views/HotspotDetail3.vue

<template>
  <div class="hotspot-detail-3">
    <img
      v-show="state === 1"
      class="bg-img"
      src="@/assets/images/hots-detail-bg-state1.png"
      alt=""
    >
    <img
      v-show="state === 2"
      class="bg-img"
      src="@/assets/images/hots-detail-bg-state2.png"
      alt=""
    >
    <img
      v-show="state === 3"
      class="bg-img"
      src="@/assets/images/hots-detail-bg-state3.png"
      alt=""
    >

    <!-- 阴影 -->
    <img
      class="shadow-box"
      :src="shadow"
      :style="{ width: state === 1 ? '50%' : '80%' }"
    >

    <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"
      @touchmove="handleScroll"
    >
      <img
        id="content2Img"
        :src="hots3StateContent2"
        alt=""
      >
    </div>
    <img
      class="content3"
      :style="{
        opacity: state === 3 ? 1 : 0,
      }"
      :src="hots3StateContent3"
      alt=""
    >
    <OperationTip
      v-show="state == 2 && isShowOperationTip"
      class="operation-tip"
      text="向左划动"
      direction="h"
      :color="'green'"
      :is-show="isShowOperationTip"
    />
    <div class="btns-box">
      <img
        :src="state == 1 ? hots3StateBtn1 : hots3StateBtn1Ac"
        alt=""
        @click="state = 1"
      >
      <img
        :src="state == 2 ? hots3StateBtn2 : hots3StateBtn2Ac"
        alt=""
        @click="goState2"
      >
      <img
        :src="state == 3 ? hots3StateBtn3 : hots3StateBtn3Ac"
        alt=""
        @click="state = 3"
      >
    </div>
    <BtnBack @click="emit('close')" />
  </div>
</template>

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

const emit = defineEmits(["close"])

// 三个背景图
import hots3StateBg1 from "@/assets/images/hots-detail-bg-state1.png"
import hots3StateBg2 from "@/assets/images/hots-detail-bg-state2.png"
import hots3StateBg3 from "@/assets/images/hots-detail-bg-state3.png"

// 三个按钮

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"

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

// 轴1  卷2 册3
const state = ref(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)
}

const handleScroll = () => {
  isShowOperationTip.value = false
  console.log("开始滑动")
}
</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;
  }

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

  .content1 {
    width: 90%;
    max-height: 80vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 1s ease;
    bottom: calc(
      130 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }

  .content2 {
    width: 100%;
    background-position: left top;
    overflow: auto;
    position: absolute;
    transition: opacity 1s ease;
    z-index: 2;
    &::-webkit-scrollbar {
      display: none;
    }

    img {
      // height: 50vh;
      width: 990px;
    }
  }

  .content3 {
    position: absolute;
    width: 100%;
    transition: opacity 1s ease;
  }

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

  .btns-box {
    width: 55%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    bottom: calc(
      35 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );

    > img {
      width: calc(
        35 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      width: calc(
        35 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }
  }
}
</style>