njDaTuSha/src/pages/pg3/index.vue

<template>
  <div class="page pg-bg pg3" ref="pgRef">
    <div class="pg3-bg">
      <div>
        <img class="bg-left abs" src="/images/pg3/left-bg.png" alt="">
        <img class="bg-right abs" src="/images/pg3/right-bg.png" alt="">
      </div>
    </div>
    <Animate
      class="header"
      name="animate__zoomIn"
      delay="100ms"
      :ready="show"
    >
      <p class="txt" style="text-align:center">
        向<br />世<br />界<br />讲<br />述
      </p>
    </Animate>
    <div class="nanjing">
      <div>
        <Animate
          comp="img"
          src="/images/pg3/nan.png"
          name="animate__zoomIn"
          delay="100ms"
          :ready="show"
        />
        <Animate
          comp="img"
          class="stele abs animate__slow"
          src="/images/pg3/stele.png"
          name="animate__fadeInUp"
          delay="100ms"
          :ready="show"
        />
      </div>
      <div>
        <Animate
          comp="img"
          src="/images/pg3/jing.png"
          name="animate__zoomIn"
          delay="500ms"
          alt=""
          :ready="show"
        />
      </div>
    </div>
    <Animate
      class="nj-1937"
      comp="img"
      src="/images/pg3/1937.png"
      name="animate__zoomIn"
      delay="500ms"
      alt=""
      :ready="show"
    />
    <div class="content">
      <Animate
        class="txt"
        comp="p"
        name="animate__fadeInDown"
        delay="1s"
        :ready="show"
      >
        如同“紫金草行动”，我们的身边有很多人，用自己的方式向世界讲述1937，他们不同年龄、不同肤色、不同国家、不同职业，但他们讲述的是全人类共同的心愿。
      </Animate>
    </div>

    <Splide
      :options="slideOptions"
      :has-track="false"
      @splide:moved="onSlideChange"
    >
      <div class="ink-slider-wrapper">
        <SplideTrack>
          <SplideSlide>
            <Ink class="slide-ink" :active="slideIndexRef == 0" src="./images/pg3/1.png" />
          </SplideSlide>
          <SplideSlide>
            <Ink class="slide-ink" :active="slideIndexRef == 1" src="./images/pg3/2.png" />
          </SplideSlide>
          <SplideSlide>
            <Ink class="slide-ink" :active="slideIndexRef == 2" src="./images/pg3/3.png" />
          </SplideSlide>
          <SplideSlide>
            <Ink class="slide-ink" :active="slideIndexRef == 3" src="./images/pg3/4.png" />
          </SplideSlide>
          <SplideSlide>
            <Ink class="slide-ink" :active="slideIndexRef == 4" src="./images/pg3/5.png" />
          </SplideSlide>
        </SplideTrack>
        <div class="splide__arrows abs" style="left: 0; top: 0">
          <div class="splide__arrow splide__arrow--prev">
            <img src="/images/pg3/arrow.png" alt="" style="transform: rotate(180deg)">
          </div>
        </div>
        <div class="splide__arrows abs" style="right: 0; top: 0">
          <div class="splide__arrow splide__arrow--next">
            <img src="/images/pg3/arrow.png" alt="">
          </div>
        </div>
      </div>
    </Splide >

    <div class="btn-box">
      <img src="/images/pg3/btn.png" alt=""  @click="onBtnClick">
    </div>

    <!-- <Persons v-if="showPerson" @cancel="showPerson = false" /> -->
  </div>
</template>

<script setup>
  import { onBeforeUnmount, onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide';
  import Bell from '@/components/Bell.vue';
  import Btn from '@/components/Btn.vue';
  import Animate from '@/components/Animate.vue';
  // import Persons from './Persons.vue';
  import Ink from './Ink.vue';
  import usePageShow from '../usePageShow';

  const router = useRouter();
  const [pgRef, show] = usePageShow(0.3);
  const showPerson = ref(false);
  const slideIndexRef = ref(0);

  const slideOptions = {
    // arrows: false,
    pagination: false,
    autoplay: true,
    type: 'loop',
    speed: 1000,
    interval: 6000,
  }

  const onVideo = () => {
    router.push('/pg4')
  }

  const onSlideChange = (slide, newIndex) => {
    slideIndexRef.value = newIndex;
  }

  const onBtnClick = () => {
    console.log('--------------')
    router.push('/pg4')
  }
</script>


<style lang="less" scoped>
.pg3 {
  position: relative;

  .pg3-bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;

    & > div {
      position: relative;
      height: 100%;
    }

    .bg-left {
      width: 40px;
      height: 158px;
      top: 30vh;
      left: 0;
    }
    .bg-right {
      width: 50px;
      height: 80px;
      top: 10vh;
      right: 0;
    }
  }


  .header {
    width: 30vw;
    margin: auto;
    margin-top: 30px;
    position: relative;
  }

  .nanjing {
    width: 50vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & > div {
      position: relative;
    }

    .stele {
      width: 8vw;
      bottom: 2vw;
      left: 8vw;
    }
  }

  .nj-1937 {
    width: 16vw;
    margin: auto;
  }

  .content {
    width: 70vw;
    margin: auto;
    font-size: 14px;
    line-height: 1.2em;
    
    .txt {
      color: #5D4135;
    }
  }

  .ink-slider-wrapper {
    position: relative;
    z-index: 2;

    .splide__arrows {
      position: absolute;
      z-index: 10;
      width: 48px;
      height: 54.89vw;
      line-height: 54.89vw;
      text-align: center;

      img {
        width: 12px;
        display: inline-block;
      }
    }
  }

  .slide-ink {
    width: 100vw;
    height: 54.89vw;
  }

  .btn-box {
    margin-top: 2em;
    text-align: center;
    position: relative;
    z-index: 2;

    img {
      width: 30vw;
      margin: auto;
    }
  }

}
</style>