NanjingMuseumWuJinZang/src/views/BambooBookView.vue

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

import BambooBookScene1 from '@/views/BambooBookScene1.vue'
import BambooBookScene2 from '@/views/BambooBookScene2.vue'
import BambooBookScene3 from '@/views/BambooBookScene3.vue'

// 当前滑动到第几屏
const curIndex = ref(0)

const toBack = () => {
  router.replace({
    name: 'MoreContent',
    query: {
      anchorIdx: 1,
    }
  })
}


const data1 = configZhuPu['杆']
const data2 = configZhuPu['枝']
const data3 = configZhuPu['叶']

const curList = ref([])
const isStart = ref(true)
const isBack = ref(false)

const NextPage = (curPart) => {
  // curIndex.value = 2
  isShowIndex3.value = true
  switch (curPart) {
  case 1:
    curList.value = data1
    return
  case 2:
    curList.value = data2
    return
  case 3:
    curList.value = data3
    return
  }
}
const isChange = ref(false)
const onSlideRight = () => {
  curIndex.value = 1
  isChange.value = true
}
const onSlideLeft = () => {
  isStart.value = false
  curIndex.value = 0
}

const isShowIndex3 = ref(false)


</script>

<template>
  <div class="home">
    <!-- 第一屏 -->
    <Transition name="fade-in-out">
      <div class="page1">
        <BambooBookScene1
          v-if="curIndex !== 2"
          :class="{ 'goLeft1':curIndex === 1,'goRight1':curIndex === 0 && !isStart }"
          @slide-right="onSlideRight"
          @close="toBack"
        />
        <BambooBookScene2
          v-if="curIndex == 1 || curIndex == 0 && !isStart"
          :class="{ 'goLeft2':curIndex === 1 ,'goRight2':curIndex === 0 && !isStart && !isBack}"
          class="onRight2"
          :ischange="isChange"
          @slide-left="onSlideLeft"
          @next="NextPage"
          @close="onSlideLeft"
        />
      </div>
    </Transition>
    <!-- 第二屏 -->
    <!-- <Transition name="fade-in-out">

    </Transition> -->
    <!-- 第三屏 -->
    <Transition name="fade-in-out">
      <BambooBookScene3
        v-if="isShowIndex3"
        :list="curList"
        @close="() => { isShowIndex3 = false }"
      />
    </Transition>
  </div>
</template>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  // .onRight1{

  // }
  .page1 {
    width: 100%;
    height: 100%;

    .onLeft1{
      transform: translateX(-100%);
    }
    .onLeft2{
      transform: translateX(0%);
    }

    .onRight1{
      transform: translateX(0%);
    }

    .onRight2 {
      transform: translateX(100%)
    }

    .goLeft1 {
      animation: on-left1 1.5s forwards;

      @keyframes on-left1 {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-100%);
        }
      }
    }

    .goLeft2 {
      animation: on-left2 1.5s forwards;

      @keyframes on-left2 {
        0% {
          transform: translateX(100%);
        }

        100% {
          transform: translateX(0%);
        }
      }
    }

    .goRight1 {
      animation: on-right1 1.5s forwards;

      @keyframes on-right1 {
        0% {
          transform: translateX(-100%);
        }

        100% {
          transform: translateX(0%);
        }
      }
    }

    .goRight2 {
      animation: on-right2 1.5s forwards;

      @keyframes on-right2 {
        0% {
          transform: translateX(0%);
        }

        100% {
          transform: translateX(100%);
        }
      }
    }
  }


}
</style>