NanjingMuseumWuJinZang-PC/src/views/HotspotDetail1.vue

<template>
  <div :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`">
    <!-- 左上角 -->
    <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'}`">
      <img
        class=""
        :src="require(`@/assets/images/icon_white_click.png`)"
        alt=""
        draggable="false"
      >
      <div>点击查看</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)"
    >
      <div
        v-show="pageLev === item.id"
        :swipe-options="{ direction: 'horizontal' }"
        class="HD1_3AcMove"
        @wheel="
          ($event) => handleScroll($event, (val) => onSwipeChange(val, index))
        "
      >
        <!-- :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%)`
        }"
      >
        {{ txtShow.title }}
      </h3>
    </div>

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

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

const { handleScroll } = useRollFu()

const emit = defineEmits(["close"])

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
  } else emit("close")
}

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

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

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

  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) => {
  console.log("在滚动", num, index)
  isShowOperationTip.value = false
  let newItem = imgList[index + num]

  if (index === 0 && num === -1) {
    // 第一 还向左滑
    newItem = imgList[imgList.length - 1]
    // return
  }
  if (index === imgList.length - 1 && num === 1) {
    newItem = imgList[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)
}

// 判断画轴的位置 在 左边还是右边
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: 150px;
    height: 252px;
  }

  .HD1_2 {
    position: absolute;
    z-index: 11;
    right: calc(12% + 476px);
    bottom: calc(80vh - 50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > img {
      width: 40px;
    }
    & > div {
      margin-top: 5px;
      font-weight: 400;
      font-family: KaiTi;
      color: #fff;
      white-space: nowrap;

    }
  }
  .HD1_2Hide {
    opacity: 0;
  }

  .HD1_3 {
    position: absolute;
    z-index: 10;
    transition: bottom 1s;
    height: 80vh;
    & > 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: -30%;
    cursor: pointer;
  }
  .HD1_3_3 {
    right: 12%;
    z-index: 3;
    bottom: -44%;
    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: -50px;
    transition: right 1s, opacity 0.8s;
  }

  .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: 48px;
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(150%, -150%);
    }
    p {
      font-size: 30px;
      // position: absolute;
      // top: 15%;
      // left: -250%;
      // transform: translateX(-50%);
      letter-spacing: 2px;
      height: calc(100% - 0px);
      writing-mode: vertical-rl;
      line-height: 120%;
    }
  }

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