NanjingMuseumWuJinZang-PC/src/views/HotspotDetail1.vue

<template>
  <div
    :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`"
    @wheel="
      ($event) => handleScrollThrottle($event, () => onSwipeChange(-1, curIndex),() => onSwipeChange(1, curIndex))
    "
  >
    <!-- 左上角 -->
    <img
      class="HD1_1"
      :src="require(`@/assets/images/HD1/img_title.png`)"
      :style="`opacity:${pageLev === 1 ? '1' : '0'}`"
    >
    <!-- 中间--点击查看 -->
    <div
      :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`"
      @click="ImgClick(imgList[2],2)"
    >
      <img
        class=""
        :src="require(`@/assets/images/icon_operation_click_green2.png`)"
        alt=""
        draggable="false"
      >
      <div style="color: #7B916B;">
        点击查看
      </div>
    </div>

    <!-- 右边三个画 -->
    <div
      v-for="(item, index) in imgList"
      :key="item.id"
      :class="`HD1_3 HD1_3_${index + 1} ${
        pageLev === item.id ? 'HD1_3Ac' : ''
      } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
      `"
      @click="ImgClick(item,index)"
    >
      <div
        v-show="pageLev === item.id"
        :swipe-options="{ direction: 'horizontal' }"
        class="HD1_3AcMove"
      >
        <!-- :text="`${pageLev===11?'向右':pageLev===13?'向左':'左右'}滑动`" -->
        <!-- <OperationTip
          v-if="isShowOperationTip"
          class="operation-tip"
          :direction="'h'"
          :is-show="isShowOperationTip"
          color="green"
          text="左右滑动"
        /> -->

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

      <img
        :src="
          require(`@/assets/images/HD1/img${pageShow ? '' : '_list'}_${
            item.imgName
          }.png`)
        "
        alt=""
      >
    </div>

    <!-- 顶部文字 -->
    <div
      :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
      :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
    >
      <p>{{ txtShow.desc }}</p>
      <h3
        :style="{
          transform: `translate(${txtShow.title == '绫' ? '630%' :txtShow.title == '绢' ? '350%': '150%'}, -150%)`
        }"
      >
        {{ txtShow.title }}
      </h3>
    </div>

    <BtnBack @click="backBtnFu" />
  </div>
</template>

<script setup>
import { ref } from "vue"
import useRollFu from "../rollFu.js"
import { useWindowSize } from "@vueuse/core"


const { handleScrollThrottle } = useRollFu()

const emit = defineEmits(["close"])

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

const craftInfo = configText.craft

const imgList = [
  {
    id: 11,
    imgName: "juan",
    title: craftInfo[3].title,
    desc: craftInfo[3].desc,
  },
  {
    id: 12,
    imgName: "ling",
    title: craftInfo[5].title,
    desc: craftInfo[5].desc,
  },
  {
    id: 13,
    imgName: "paper",
    title: craftInfo[4].title,
    desc: craftInfo[4].desc,
  },
]

const imgListLocObj = {
  11: {
    12: "HD1_3HideRight",
    13: "HD1_3HideLeft",
  },
  12: {
    13: "HD1_3HideRight",
    11: "HD1_3HideLeft",
  },
  13: {
    11: "HD1_3HideRight",
    12: "HD1_3HideLeft",
  },
}

// 当前页面 层级
const pageLev = ref(1)
const pageShow = ref(false)

// 点击返回按钮
const backBtnFu = () => {
  if (pageLev.value !== 1) {
    // 点击查看回复
    isLookImg.value = true

    pageShow.value = false
    pageLev.value = 1
    curIndex.value = -1
  } else emit("close")
}

// 点击查看自动消失
const isLookImg = ref(true)
// onMounted(() => {
//   setTimeout(() => {
//     isLookImg.value = false
//   }, 3000)
// })

// 页面展示的文字
const txtShow = ref({
  title: "",
  desc: "",
})
const isShowOperationTip = ref(false)

const curIndex = ref(-1)

// 点击图片
const ImgClick = (item, index) => {
  if (!isShowOperationTip.value) {
    isShowOperationTip.value = true
  }
  curIndex.value = index

  pageShow.value = true
  isLookImg.value = false
  pageLev.value = item.id
  txtShow.value = {
    title: item.title,
    desc: item.desc,
  }
}

const swChange = ref(true)

// 左滑右滑
const onSwipeChange = (num, index) => {
  if (index == -1) {
    return
  }
  isShowOperationTip.value = false
  // let newItem = imgList[index + num]
  // curIndex.value = index + num

  // if (index === 0 && num === -1) {
  //   // 第一 还向左滑
  //   newItem = imgList[imgList.length - 1]
  //   curIndex.value = imgList.length - 1
  //   // return
  // }
  // if (index === imgList.length - 1 && num === 1) {
  //   newItem = imgList[0]
  //   curIndex.value = 0
  //   // return
  // }

  // if (swChange.value) {
  //   swChange.value = false
  //   setTimeout(() => {
  //     swChange.value = true
  //   }, 600)
  // }

  // pageLev.value = newItem.id

  // setTimeout(() => {
  //   txtShow.value = {
  //     title: newItem.title,
  //     desc: newItem.desc,
  //   }
  // }, 500)

  if (num == -1 ) {
    curIndex.value = curIndex.value > 0 ? curIndex.value - 1 : imgList.length - 1
  } else if (num == 1) {
    curIndex.value = curIndex.value < imgList.length - 1 ? curIndex.value + 1 : 0
  }
  let newItem = imgList[curIndex.value]

  pageLev.value = newItem.id

  setTimeout(() => {
    txtShow.value = {
      title: newItem.title,
      desc: newItem.desc,
    }
  }, 500)

  if (swChange.value) {
    swChange.value = false
    setTimeout(() => {
      swChange.value = true
    }, 600)
  }
}

// 判断画轴的位置 在 左边还是右边
const imgBottomLoc = (nowId, itemId) => {
  // nowId:当前选中的id
  // itemId 11 12 13
  // nowId 11的时候 itemId 12在右边 itemId 13在左边
  // nowId 12的时候 itemId 11在左边 itemId 13在右边
  // nowId 13的时候 itemId 11在右边 itemId 12在左边
  return pageShow.value ? imgListLocObj[nowId][itemId] : ""
}
</script>

<style lang="less" scoped>
.hotspot-detail-1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/HD1/bg_caizhi.jpg");
  background-size: 100% 100%;
  background-color: #b6bfb3;
  transition: all 1s;
  .btn-back {
    z-index: 20;
  }
  .HD1_1 {
    transition: all 1s;
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-47%);
    left: 20%;
    width: calc(150px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    height: calc(252px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
  }

  .HD1_2 {
    position: absolute;
    z-index: 11;
    right: calc(26vw);
    bottom: calc(30vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > img {
      width: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    }
    & > div {
      margin-top: 5px;
      font-weight: 400;
      font-family: KaiTi;
      color: #fff;
      white-space: nowrap;
      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'))
    }
  }
  .HD1_2Hide {
    opacity: 0;
  }

  .HD1_3 {
    position: absolute;
    z-index: 10;
    transition: bottom 1s;
    height: 95vh;
    & > img {
      // width: 100%;
      height: 100%;
    }
  }
  .HD1_3_1 {
    right: 7%;
    z-index: 1;
    bottom: -16%;
    cursor: pointer;
  }
  .HD1_3_2 {
    right: 10%;
    z-index: 2;
    bottom: -32%;
    cursor: pointer;
  }
  .HD1_3_3 {
    right: 12%;
    z-index: 3;
    bottom: -46%;
    cursor: pointer;
  }
  .HD1_3Ac {
    bottom: -5px;
    right: -10%;
    opacity: 1;
    .HD1_3AcMove {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 30%;
      .operation-tip{
        top: 10%;
      }
    }
    > img {
      width: 60vw;
      height: auto;
    }
  }

  .HD1_3HideLeft {
    right: 100%;
    bottom: -8%;
    opacity: 0;
    pointer-events: none;
  }
  .HD1_3HideRight {
    right: -100%;
    bottom: -8%;
    opacity: 0;
    pointer-events: none;
  }
  .HD1_3AcBottom {
    bottom: calc(-50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    transition: right 1s, opacity 0.8s;
    height: 80vh;
  }

  .HD1_4 {
    position: absolute;
    z-index: 11;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    font-family: KaiTi;
    font-weight: 400;
    color: #5e715d;
    width: 70%;
    height: 26%;
    opacity: 0;
    pointer-events: none;
    transition: bottom 1s, opacity 0.5s;

    h3 {
      font-weight: 700;
      text-align: center;
      font-size: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(150%, -150%);
    }
    p {
      font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      // position: absolute;
      // top: 15%;
      // left: -250%;
      // transform: translateX(-50%);
      letter-spacing: calc(2px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      height: 140%;
      writing-mode: vertical-rl;
      line-height: 122%;
    }
  }

  .HD1_4Ac {
    opacity: 1;
    bottom: 40%;
    width: auto;
    left: 20%;
  }
}
.hotspot-detail-2 {
  background-image: url("../assets/images/HD1/bg_paper.jpg");
}
</style>