NanjingMuseumWuJinZang/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-state1.png"
      alt=""
    >
    <img
      v-show="state === 3"
      class="bg-img"
      src="@/assets/images/hots-detail-bg-state1.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"
    >
      <img
        id="content2Img"
        :src="hots3StateContent2"
        alt=""
      >
    </div>
    <img
      class="content3"
      :style="{
        opacity: state === 3 ? 1 : 0
      }"
      :src="hots3StateContent3"
      alt=""
    >
    <OperationTip
      v-if="state == 2"
      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 goState2 = () => {
  state.value = 2
  setTimeout(() => {
    if (content2Dom.value) {
      const x = 310 / 780
      const allWidth = document.getElementById('content2Img').getBoundingClientRect().width
      console.log(allWidth * x)
      content2Dom.value.scrollLeft = allWidth * x
    }
  }, 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;
  }

  .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;

    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>