NanjingMuseumWuJinZang/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-click-tip.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' : ''}
      ${pageShow && pageLev !== item.id ? 'HD1_3Hide' : ''}
      `"
      @click="ImgClick(item)"
    >
      <div
        v-show="pageLev === item.id"
        v-touch:swipe.left="() => onSwipeChange(1, index)"
        v-touch:swipe.right="() => onSwipeChange(-1, index)"
        :swipe-options="{ direction: 'horizontal' }"
        class="HD1_3AcMove"
      >
        <OperationTip
          v-if="isShowOperationTip"
          class="operation-tip"
          :direction="'h'"
          :text="'左右滑动'"
          :is-show="isShowOperationTip"
          color="green"
        />
      </div>

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

    <!-- 顶部文字 -->
    <div
      :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
      :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
    >
      <H3>{{ txtShow.title }}</H3>
      <p>{{ txtShow.desc }}</p>
    </div>

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

<script setup>
import { ref, onMounted } from "vue"

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 pageLev = ref(1)
const pageShow = ref(false)

// 点击返回按钮
const backBtnFu = () => {
  if (pageLev.value !== 1) {
    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

    setTimeout(()=>{
      isShowOperationTip.value = false
    }, 2000)
  }



  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 (swChange.value) {
    swChange.value = false
    setTimeout(() => {
      swChange.value = true
    }, 600)
  }

  let newItem = imgList[index + num]
  if (index === 0 && num === -1) newItem = imgList[imgList.length - 1]
  if (index === imgList.length - 1 && num === 1) newItem = imgList[0]
  pageLev.value = newItem.id

  setTimeout(() => {
    txtShow.value = {
      title: newItem.title,
      desc: newItem.desc,
    }
  }, 500)
}
</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%;
  transition: all 1s;
  .btn-back {
    z-index: 20;
  }
  .HD1_1 {
    transition: all 1s;
    position: absolute;
    z-index: 10;
    top: 60px;
    left: 30px;
    width: 80px;
  }

  .HD1_2 {
    position: absolute;
    z-index: 11;
    top: 48%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 30px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    transition: opacity 1s;
    opacity: 1;
    & > img {
      width: 40px;
    }
    & > div {
      margin-top: 10px;
      position: relative;
      line-height: 20px;
      left: 9px;
      font-weight: 400;
      font-family: KaiTi, KaiTi;
      color: #fff;
      text-align: center;
    }
  }
  .HD1_2Hide {
    opacity: 0;
  }

  .HD1_3 {
    position: absolute;
    z-index: 10;
    transition: top 1s, right 1s, opacity 0.5s;
    width: 100%;
    & > img {
      width: 100%;
    }
  }
  .HD1_3_1 {
    top: 12%;
    right: -60%;
    z-index: 1;
  }
  .HD1_3_2 {
    top: 24%;
    right: -50%;
    z-index: 2;
  }
  .HD1_3_3 {
    top: 36%;
    right: -40%;
    z-index: 3;
  }
  .HD1_3Ac {
    top: 40%;
    right: 0;
    .HD1_3AcMove {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 30%;
    }
  }
  .HD1_3Hide {
    right: -100%;
    opacity: 0;
    pointer-events: none;
  }

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

    h3 {
      font-weight: 700;
      text-align: center;
      font-size: 30px;
    }
    p {
      font-size: 16px;
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      letter-spacing: 2px;
      height: calc(100% - 50px);
      writing-mode: vertical-rl;
      line-height: 120%;
    }
  }

  .HD1_4Ac {
    opacity: 1;
    top: 4%;
  }
}
.hotspot-detail-2 {
  background-image: url("../assets/images/HD1/bg_paper.jpg");
}
</style>