NanjingMuseumWuJinZang/src/views/MoreContent.vue

<template>
  <div class="ZMoveBox">
    <div
      class="ZMbox"
      :style="`width: ${pageWidth * pageNum}px; left:-${indexAc * pageWidth}px`"
    >
      <div
        v-for="(item1, index1) in listArr"
        :key="index1"
        :class="`ROW ${item1.classWai}`"
        :style="`width:${pageWidth}px; opacity:${
          index1 === indexAc ? '1' : isOpcMove ? '0' : ''
        }`"
      >
        <!-- 热点 -->
        <HotspotComp
          v-if="index1 === 0"
          class="hotspot"
          @click="
            router.replace({
              name: 'BambooHot',
            })
          "
        />

        <div
          v-show="index1 === indexAc"
          class="ROWtxt"
          :class="`${txtShow ? 'ROWtxtShow' : ''}`"
        >
          <div
            v-if="item1.nameArr"
            class="ROWtxtTabBox"
          >
            <div
              v-for="(item2, index2) in item1.nameArr"
              :key="index2"
              class="ROWtxtTab animation-show-long-hide"
              @click="item2.fu()"
            >
              {{ item2.txt }}
            </div>
          </div>

          <div
            v-else
            class="ROWlast"
          >
            <img
              src="@/assets/images/wu-jing-cang.png"
              alt=""
            >
            <div
              class="game-box"
              @click="OpenScene()"
            >
              线上展厅
            </div>
            <div
              class="online-box"
              @click="
                () => {
                  store.state.haveShownStartup = false;
                  router.replace('/?back=1');
                }
              "
            >
              重新开始
            </div>
          </div>

          <div
            v-if="item1.nameArr"
            class="ROWtxtIcon"
          >
            {{ item1.name }}
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>

        <img
          v-for="(item3, index3) in item1.imgArr"
          :key="index3"
          :class="`${item3.className}`"
          :src="
            require(`@/assets/images/fade-chapter-wood/${item3.imgName}.png`)
          "
          :style="`transform: translateX(${isMoveFu(index1, item3.num)}px);`"
          alt=""
        >
      </div>
    </div>

    <!-- 左右滑动盒子 -->
    <div
      v-touch:swipe.left="() => onSwipeChange(1)"
      v-touch:swipe.right="() => onSwipeChange(-1)"
      class="ROWmove"
      :swipe-options="{ direction: 'horizontal' }"
    />

    <!-- 指示器 -->
    <ProgressBar
      class="pagination"
      :totle-unit="4"
      :type="1"
      :cur-percentage="indexAc"
      color-ac="#7B916B"
      color="#7B916B60"
      @go-to-slide="clickSonIndFu"
    />
    <!-- 返回按钮 -->
    <BtnBack
      style="z-index: 200"
      @click="router.replace('/?back=1')"
    />

    <!-- 提示语 -->
    <div :class="`operation-tip ${titShow ? '' : 'operation-tipHide'}`">
      左右滑动
      <img
        class=""
        :src="require(`@/assets/images/icon_operation_h_green.png`)"
        alt=""
        draggable="false"
      >
    </div>

    <!-- 跳转的视频 -->

    <Transition name="fade-in">
      <div
        v-if="isShowVideo"
        :class="`RWbox`"
      >
        <video
          ref="videoRef"
          :src="
            require(`@/assets/videos/${
              isShowVideo === 'RWvideo'
                ? 'fade-at-mo-zhu'
                : 'fade-at-shuang-gou'
            }.mp4`)
          "
          playsinline
          muted
          webkit-playsinline="true"
          x5-video-player-type="h5"
          @ended="
            router.replace({
              name: isShowVideo === 'RWvideo' ? 'PoemList' : 'ShuanggouDetail',
            })
          "
        />
        <img
          v-show="isShowVideo === 'RWvideo'"
          class="RWvideoTxt"
          src="@/assets/images/RW/titile_mozhu-min.png"
          alt=""
        >
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, nextTick, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"

const listArr = [
  {
    name: "双钩设色",
    nameArr: [
      {
        txt: "查看详情",
        fu: () => {
          playVideoFu("XQvideo")
        },
      },
    ],
    classWai: "ROW1",
    imgArr: [
      { className: "ROW1_1", imgName: "1_01", num: 100 },
      { className: "ROW1_2", imgName: "1_02", num: 100 },
      { className: "ROW1_3", imgName: "2_01", num: 80 },
      { className: "ROW1_4", imgName: "2_03", num: 80 },
      // { className: "ROW1_5", imgName: "3_01", num: 60 },
      { className: "ROW1_6", imgName: "4_01", num: 120 },
      { className: "ROW1_7", imgName: "4_02", num: 120 },
    ],
  },
  {
    name: "墨竹",
    nameArr: [
      {
        txt: "人文",
        fu: () => {
          playVideoFu("RWvideo")
        },
      },
      {
        txt: "画作",
        fu: () => {
          playVideoFu("PaintingList", true)
        },
      },
      {
        txt: "竹谱",
        fu: () => {
          playVideoFu("BambooBook", true)
        },
      },
    ],
    classWai: "ROW2",
    imgArr: [
      { className: "ROW2_1", imgName: "1_03", num: 100 },
      { className: "ROW2_2", imgName: "2_02", num: 80 },
      { className: "ROW2_3", imgName: "2_03", num: 80 },
      // { className: "ROW2_4", imgName: "3_01", num: 60 },
      // { className: "ROW2_5", imgName: "3_02", num: 60 },
      { className: "ROW2_6", imgName: "4_01", num: 120 },
      { className: "ROW2_7", imgName: "4_02", num: 120 },
      // { className: "ROW2_8", imgName: "4_05", num: 40 },
    ],
  },
  {
    name: "画作创作",
    nameArr: [
      {
        txt: "开始体验",
        fu: () => {
          router.replace("/game")
        },
      },
    ],
    classWai: "ROW3",
    imgArr: [
      // { className: "ROW3_1", imgName: "4_07", num: 40 },
      { className: "ROW3_2", imgName: "4_08", num: 120 },
      // { className: "ROW3_3", imgName: "4_09", num: 40 },
      // { className: "ROW3_4", imgName: "4_10", num: 40 },
      // { className: "ROW3_5", imgName: "4_12", num: 40 },
      // { className: "ROW3_6", imgName: "3_04", num: 60 },
      { className: "ROW3_7", imgName: "2_02", num: 80 },
      { className: "ROW3_8", imgName: "2_04", num: 80 },
      { className: "ROW3_9", imgName: "2_05", num: 80 },
      { className: "ROW3_10", imgName: "1_04", num: 100 },
      { className: "ROW3_11", imgName: "1_01", num: 100 },
    ],
  },
  {
    name: "最后一页",
    classWai: "ROW4",
    imgArr: [
      { className: "ROW4_1", imgName: "4_08", num: 120 },
      // { className: "ROW4_2", imgName: "4_09", num: 40 },
      // { className: "ROW4_3", imgName: "4_10", num: 40 },
      // { className: "ROW4_4", imgName: "4_12", num: 40 },
      // { className: "ROW4_5", imgName: "3_03", num: 60 },
      { className: "ROW4_6", imgName: "3_04", num: 80 },
      { className: "ROW4_7", imgName: "2_04", num: 80 },
      { className: "ROW4_8", imgName: "2_04-1", num: 80 },
      { className: "ROW4_9", imgName: "1_05", num: 100 },
      // { className: "ROW4_10", imgName: "2_05", num: 100 },
    ],
  },
]

// 文字错位问题
const txtShow = ref(false)
onMounted(() => {
  setTimeout(() => {
    txtShow.value = true
  }, 2000)
})

const route = useRoute()
const router = useRouter()
const store = useStore()

// 点击指示器移动透明的问题
const isOpcMove = ref(true)

// 点击线上展厅
const OpenScene = () => {
  const musicDom = document.getElementById("bg-music")
  musicDom.pause()
  router.replace("/scene")
}

// 提示语的显示隐藏
const titShow = ref(true)

// 向右是-1
// 向左是 1
const indexFlag = ref(0)

// 左右滑动
const onSwipeChange = (val) => {
  let numResTemp = indexAc.value + val

  let indexFlagTemp = -val

  if (val === -1 && indexAc.value === 0) {
    return
  }
  if (val === 1 && indexAc.value === listArr.length - 1) {
    return
  }

  titShow.value = false

  indexAc.value = numResTemp

  indexFlag.value = indexFlagTemp
}

// 点击底部的指示器 改变 indexAc
const clickSonIndFu = (index) => {
  if (index === indexAc.value) return

  titShow.value = false

  isOpcMove.value = false

  setTimeout(() => {
    isOpcMove.value = true
  }, 300)

  indexAc.value = index
}

// 是否触发移动的逻辑
const isMoveFu = (index, num) => {
  let numRes
  if (index === indexAc.value) numRes = 0
  else numRes = indexFlag.value * num * 2
  return numRes
}

// 当前页面的宽度
const pageWidth = ref(0)

// 当前有4个页面
const pageNum = 4

onMounted(() => {
  pageWidth.value = window.innerWidth >= 500 ? 500 : window.innerWidth
})

// 当前页面的索引
const indexAc = ref(0)


onBeforeMount(() => {
  if (route.query.anchorIdx) {
    indexAc.value = Number(route.query.anchorIdx)
  }
})

// 视频的显示和播放
const isShowVideo = ref("")
const videoRef = ref(null)

// 点击查看详情  / 人文
const playVideoFu = (val, flag) => {
  if (flag) {
    router.replace({
      name: val,
    })
  } else {
    isShowVideo.value = val
    nextTick(() => {
      videoRef.value.play()
    })
  }
}
</script>

<style lang="less" scoped>
.ZMoveBox {
  width: 100%;
  height: 100%;
  background-color: #f5f5f3;
  position: relative;

  .ZMbox {
    width: 1000px;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    background-image: url("../assets/images/fade-chapter-wood/bg-more-content.jpg");
    background-size: contain;
    transition: left 1.2s;

    .ROW {
      position: relative;
      transition: opacity 1.2s;
      height: 100%;

      .hotspot {
        position: absolute;
        top: 46%;
        left: 15%;
        z-index: 20;
      }

      .ROWtxt {
        z-index: 100;
        position: relative;
        top: 28%;
        left: 55%;

        .ROWtxtTabBox {
          position: absolute;
          top: 65%;
          left: -10%;

          .ROWtxtTab {
            padding: 8px 0;
            background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            font-family: KaiTi, KaiTi;
            font-weight: 400;
            writing-mode: vertical-lr;
            letter-spacing: 0.2em;
            white-space: pre;
            color: #b8ae7a;
            margin-bottom: 10px;
          }
        }

        div.ROWtxtIcon {
          pointer-events: none;
          font-size: 38px;
          font-family: KingHwa_OldSong, KingHwa_OldSong;
          color: #474747;
          writing-mode: vertical-lr;
          letter-spacing: 0.3em;
          white-space: pre;
          position: relative;

          img.deco {
            z-index: 10;
            position: absolute;
            bottom: 1em;
            right: -0.05em;
            width: 40%;
            opacity: 0;
            transition: opacity 0.5s;
          }
        }
      }
      .ROWtxtShow {
        div.ROWtxtIcon {
          img.deco {
            opacity: 1;
          }
        }
      }

      & > img {
        position: absolute;
        bottom: 0;
        height: 100%;
        transition: transform 1s;
      }
      .ROW1_1 {
        z-index: 5;
        left: 0;
      }
      .ROW1_2 {
        z-index: 4;
        right: -15%;
      }
      .ROW1_3 {
        z-index: 3;
        left: 0%;
      }
      .ROW1_4 {
        z-index: 3;
        right: -50%;
      }
      .ROW1_5 {
        z-index: 2;
        right: -12%;
      }
      .ROW1_6 {
        height: 35%;
        left: -5%;
      }
      .ROW1_7 {
        height: 45%;
        left: 20%;
      }
      .ROW2_1 {
        z-index: 5;
        right: -13%;
      }
      .ROW2_2 {
        z-index: 4;
        right: -22%;
      }
      .ROW2_3 {
        z-index: 4;
        left: -38%;
      }
      .ROW2_4 {
        z-index: 3;
        left: -38%;
      }
      .ROW2_5 {
        z-index: 3;
        right: 2%;
      }
      .ROW2_6 {
        left: 0;
        height: 30%;
      }
      .ROW2_7 {
        left: -24%;
        height: 40%;
      }
      .ROW2_8 {
        left: 0%;
      }
      .ROW3_1 {
        left: -24%;
      }
      .ROW3_2 {
        height: 30%;
        right: -14%;
      }
      .ROW3_3 {
        right: -14%;
      }
      .ROW3_4 {
        right: -24%;
      }
      .ROW3_5 {
        right: -36%;
      }
      .ROW3_6 {
        z-index: 3;
        right: -3%;
      }
      .ROW3_7 {
        z-index: 4;
        left: -48%;
      }
      .ROW3_8 {
        z-index: 4;
        right: -20%;
      }
      .ROW3_9 {
        z-index: 4;
        right: -37%;
      }
      .ROW3_10 {
        z-index: 5;
        right: -3%;
      }
      .ROW3_11 {
        z-index: 5;
        left: -15%;
      }
      .ROW4_1 {
        z-index: 5;
        left: 2%;
        height: 40%;
      }
      .ROW4_2 {
        left: -26%;
      }
      .ROW4_3 {
        left: -13%;
      }
      .ROW4_4 {
        left: -28%;
      }
      .ROW4_5 {
        z-index: 3;
        right: 8%;
      }
      .ROW4_6 {
        z-index: 3;
        left: -30%;
      }
      .ROW4_7 {
        z-index: 4;
        left: -70%;
      }
      .ROW4_8 {
        z-index: 4;
        right: -5%;
      }
      .ROW4_9 {
        z-index: 5;
        right: -5%;
      }
      .ROW4_10 {
        z-index: 4;
        left: -60%;
      }
    }

    .ROW2 {
      .ROWtxt {
        top: 33%;
        left: 52%;
        .ROWtxtTabBox {
          top: 61%;
          left: -9%;
        }
      }
    }

    // 最后一页的文字
    .ROW4 {
      .ROWtxt {
        top: 20%;
        left: 37%;
      }
    }
    .ROWlast {
      font-family: "KingHwa_OldSong";
      color: white;
      z-index: 20;
      width: 20%;
      & > img {
        pointer-events: none;
        width: 118px;
      }
      .game-box {
        width: 198%;
        background: url(@/assets/images/game-bg.png);
        background-size: 100% 100%;
        padding: 75%;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 62%;
        margin-left: -25%;
        font-size: 18px;
      }

      .online-box {
        font-weight: 700;
        color: #768c77;
        width: 50%;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-left: 54%;
        font-size: 18px;
      }
    }
  }

  // 视频盒子
  .RWbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    .RWvideoTxt {
      width: 18%;
      position: absolute;
      z-index: 10;
      top: 32%;
      left: 44%;
    }
    & > video {
      width: 100%;
    }
  }
  // 指示器
  .pagination {
    position: absolute;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2%;
  }

  // 提示语
  .operation-tip {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    color: #7f9470;
    font-size: 12px;
    letter-spacing: 3px;
    pointer-events: none;
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity 1s;

    img {
      width: 30px;
    }
  }

  .operation-tipHide {
    opacity: 0;
  }

  // 左右滑动盒子
  .ROWmove {
    position: absolute;
    z-index: 19;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
</style>