EpicSoul/pig/chapter2/chapter2.vue

<template>
  <view>
    <swiper
      class="main-swiper"
      :vertical="true"
      :current="currentIndex"
      @change="handleSwiperChange"
      :duration="300"
      :style="{ height: '100vh' }"
    >
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[0]">
            <image
              v-show="shouldShowContent(0)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/1b7efb30e20fc563d82b6b5c9c2ee3d1.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[1]">
            <image
              v-show="shouldShowContent(1)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/d2d830cd1171e194e427c0782fb77c1b.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
            <view class="content-layer" v-show="shouldShowContent(1)">
              <image
                class="layer-img2"
                :class="{
                  hidden: !animationStates[1],
                  'fade-in': animationStates[1],
                }"
                :src="
                  showImg(
                    '/uploads/20250802/70cb6f2efde536bdde781ae387529a5c.png'
                  )
                "
                :lazy-load="true"
                mode="widthFix"
              ></image>
            </view>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[2]">
            <image
              v-show="shouldShowContent(2)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/6f74f39c254998394f11b081220b60bc.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <template v-if="loadedPages[3]">
            <image
              v-show="shouldShowContent(3)"
              class="bg-image"
              :src="
                showImg(
                  '/uploads/20250802/a85fad872bcdb3c1312ef9e799eb7863.png'
                )
              "
              :lazy-load="true"
              mode="aspectFill"
            ></image>
          </template>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page-container">
          <image
            style="width: 100%; height: 100%"
            :src="
              showImg('/uploads/20250808/48c6045b781a8c2a2b8f87a9c79ee4f1.png')
            "
            mode="aspectFill"
          ></image>
          <image
            @click="goChapter"
            style="
              width: 137rpx;
              height: 108rpx;
              position: absolute;
              bottom: 125rpx;
              left: 307rpx;
            "
            :src="
              showImg('/uploads/20250802/165e072a1537b0fab14c6ec2f42e7974.png')
            "
            mode="aspectFill"
          ></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 侧边导航组件 -->
    <SideNav :currentIndex="5" />
	<MusicControl></MusicControl>
	<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/05/5d7caee5-ce7f-4e55-bf71-e574b486473c.MP3" />
  </view>
</template>

<script>
import AudioControl from '@/components/AudioControl.vue';
import TitleHeader from "@/components/TitleHeader.vue";
import SideNav from "../components/SideNav.vue";
import MusicControl from "@/components/MusicControl.vue";
export default {
  components: {
    TitleHeader,
    SideNav,MusicControl,
	AudioControl
  },
  data() {
    return {
      currentIndex: 0,
      loadedPages: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
      },
      animationStates: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
      },
      preloadBuffer: 1,
      titleHeight: 0,
    };
  },
  watch: {
    currentIndex(newIndex) {
      for (
        let i = Math.max(0, newIndex - this.preloadBuffer);
        i <= Math.min(9, newIndex + this.preloadBuffer);
        i++
      ) {
        this.loadedPages[i] = true;
      }
    },
  },
  mounted() {
    this.titleHeight = uni.getStorageSync("titleHeight");
    for (let i = 0; i <= Math.min(1 + this.preloadBuffer, 9); i++) {
      this.loadedPages[i] = true;
    }
    setTimeout(() => {
      this.animationStates[this.currentIndex] = true;
    }, 50);
  },
  methods: {
    goChapter() {
      uni.navigateTo({
        url: "/pig/chapter3/chapter3",
      });
    },
    handleSwiperChange(e) {
      const newIndex = e.detail.current;
      this.currentIndex = newIndex;
      this.animationStates[newIndex] = false;
      setTimeout(() => {
        this.animationStates[newIndex] = true;
      }, 50);
    },
    shouldShowContent(index) {
      return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
    },
    goBack() {
      uni.navigateTo({
        url: "/taozi/home/home?targetIndex=5",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main-swiper {
  width: 100%;
  height: 100vh;
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.layer-img1 {
  width: 500rpx;
  z-index: 2;
  margin-right: 180rpx;
  margin-top: 50rpx;
}

.layer-img2 {
  z-index: 2;
  position: absolute;
  bottom: 18%;
  left: 0;
  width: 100%;
  height: 350rpx;
}

.content-layer {
  margin: 130rpx 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.layer-img3 {
  width: 118rpx;
  height: 69rpx;
  z-index: 2;
  position: absolute;
  top: 238rpx;
  right: 58rpx;
}
.layer-img2 {
  width: 696rpx;
  height: 302rpx;
  z-index: 2;
  position: absolute;
  top: 200rpx;
  left: 35rpx;
}

.layer-img4 {
  z-index: 2;
  width: 400rpx;
  height: 400rpx;
  margin-top: 400rpx;
  margin-left: 80rpx;
}

.layer-img5 {
  z-index: 2;
  position: absolute;
  bottom: 90rpx;
  right: 30rpx;
  width: 320rpx;
  height: 500rpx;
}

.back-btn {
  position: absolute;
  top: 50rpx;
  left: 50rpx;
  z-index: 2;
  background-color: rgb(0 0 0 / 0.3);
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 50rpx;
  height: 50rpx;
}

.hidden {
  opacity: 0;
}

.slide-in-from-left {
  animation: slideInLeft 1.2s ease-out forwards;
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

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

.slide-in-from-right {
  animation: slideInRight 1.2s ease-out forwards;
}

.blink {
  animation: blink 1.5s infinite;
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

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

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.3;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>