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 style="position: relative;">
        <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__fadeInLeft"
          delay="1000ms"
          alt=""
          :ready="show"
        />
      </div>
    </div>
    <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:move="onSlideChange"
    >
      <div class="ink-slider-wrapper">
        <SplideTrack>
          <SplideSlide
            v-for="(item, inx) in famous"
            :key="item.image"
          >
            <Ink class="slide-ink" :active="slideIndexRef == inx" :src="item.image" @click="onFamous(item)" />
          </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" /> -->

    <IFrame v-if="showPerson" :link="personLink" @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 IFrame from '@/components/IFrame.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 personLink = ref();
  const slideIndexRef = ref(0);

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

  const famous = FAMOUS_LINKS;

  const onFamous = (famousItem) => {
    if (!famousItem.link) return;

    personLink.value = famousItem.link;
    showPerson.value = true;
  }

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

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

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


<style lang="less" scoped>
.pg3 {
  position: relative;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;

  .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: 70vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & > div {
      position: relative;
    }

    .stele {
      width: 6vw;
      bottom: 1vw;
      left: 6vw;
    }
  }

  .nj-1937 {
    width: 32vw;
  }

  .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: 200;

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

}
</style>