njDaTuSha/src/pages/pg2-2/index.vue

<template>
  <div class="page pg-bg pg2-2">
    <div class="bk-pd content">
      <p class="txt">
        85年前，
        <br />日本侵略者制造了惨绝人寰的南京大屠杀， <br />30多万生灵涂炭。
        <br />战后的紫金山废墟下，片片紫色小花密密开放。
        <br />
        <br />
      </p>
    </div>
    <div class="bk-pd content">
      <img class="layer-img" src="/images/pg2-2/图层38.png" />
    </div>
    <div class="bk-pd content">
      <img class="mountain-img" src="/images/pg2-2/山.png" />
      <img class="group-img" src="/images/pg2-2/组4.png" />
    </div>
    <div class="bk-pd content">
      <p class="txt bottom">
        1939年，一名日本带军医着对战争的反思和忏悔，
        <br />把取自南京的花种带回日本，撒遍山野、植满庭院，
        <br />并取名“紫金草”。 <br />在他的眼中，当年的紫金山上，
        <br />每一朵花就是一个在战争中丧生的灵魂。
        <br />此后几十年，这名军医和家人 <br />在各地播种紫金草悼念亡灵，
      </p>
    </div>
    <!-- <div class="bk-pd content-ink"> -->
    <!-- <InkEffect src="./images/pg2-2/紫金草行动logo拷贝.png" :active="inkActive" /> -->
    
    <img  class="slide-ink" src="/images/pg2-2/照片1.png" alt="">
    <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/pg2-2/照片1.png"
            />
          </SplideSlide>
          <SplideSlide>
            <Ink
              class="slide-ink"
              :active="slideIndexRef == 1"
              src="/images/pg2-2/照片2.png"
            />
          </SplideSlide>
          <SplideSlide>
            <Ink
              class="slide-ink"
              :active="slideIndexRef == 2"
              src="/images/pg2-2/照片3.png"
            />
          </SplideSlide>
          <SplideSlide>
            <Ink
              class="slide-ink"
              :active="slideIndexRef == 3"
              src="/images/pg2-2/照片4.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>
    <!-- <img class="photo-img" src="/images/pg2-2/照片4.png" /> -->
    <!-- </div> -->

    <div class="bk-pd content">
      <p class="txt bottom">
        紫金草，它耐寒、耐旱，
        <br />在贫瘠的土地上也能顽强生长， <br />蕴含着无穷的草根力量，
        <br />寄托了对战争的反省和对和平的祈愿。 <br />“紫金草行动”由此而来。
        <br />小小紫金草，悠悠寄哀思。 <br />让和平中长大的年轻人保持“痛”感，
        <br />让更多的人主动追问、不断提起那段历史，
        <br />让和平之声传向世界各地， <br />这一直是“紫金草行动”努力的方向。
      </p>
    </div>
    <div class="bk-pd content">
      <img class="chart-img" src="/images/pg2-2/图.png" />
    </div>
    <div class="bk-pd content">
      <p class="txt topbottom">
        2014年，在国家首个公祭日来临之际，
        <br />为了深切缅怀惨遭日军屠戮遇难同胞，
        <br />唤起人们对和平的向往和珍视，
        <br />南京广播电视集团发起了“紫金草行动”。 <br />九年了，
        <br />“紫金草行动”再启航， <br />让“和平之花”开得更远！
      </p>
    </div>
    <div class="bk-pd content">
      <img class="zjclogo-img" src="/images/pg2-2/紫金草行动logo拷贝.png" />
    </div>
  </div>
</template>

<script steup>
import { onBeforeUnmount, onMounted, ref } from "vue";
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 Ink from "./Ink.vue";
const inkActive = ref(false);
const slideIndexRef = ref(0);

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

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

<style lang="less" scoped>
.pg2-2 {
  position: relative;
  height: 100vh;
  .content {
    text-align: center;
  }
  .content {
    .layer-img {
      opacity: 0.6;
      z-index: 0;
      width: 14%;
      display: inline-block;
      position: absolute;
      top: 220px;
      left: 35px;
      animation: layer-img 1.2s linear alternate;
    }
    @keyframes layer-img {
      from {
        opacity: 0;
        transform: translateY(-40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
  .content {
    .mountain-img {
      z-index: 0;
      position: absolute;
      top: 115px;
      margin-top: 20px;
      margin-left: 20px;
      width: 95%;
      animation: mountain-img 3s 1;
    }
    @keyframes mountain-img {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .group-img {
      z-index: 10;
      width: 84%;
      position: relative;
      margin-top: 70px;
      margin-left: -16%;
      display: inline-block;
      animation-delay: 3s;
      animation: group-img 1.8s linear;
    }
    @keyframes group-img {
      0% {
        transform: translateX(-100%);
      }
      50% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0);
      }
    }
  }
  .content {
    .bottom {
      margin-bottom: 0;
    }
  }
  .content {
    .photo-img {
      width: 80%;
      display: inline-block;
    }
  }
  .content {
    .chart-img {
      width: 84%;
      display: inline-block;
    }
  }
  .content {
    .topbottom {
      margin: 0 auto;
    }
  }
  .content {
    .zjclogo-img {
      margin: 1em auto;
      width: 38%;
      display: inline-block;
    }
  }

  .content-ink {
  }
  .ink-slider-wrapper {
    position: relative;
    z-index: 2;
    .slide-ink {
    width: 100vw;
    height: 54.89vw;
  }
    .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;
      }
    }
  }
 
}
.txt {
  text-align: center;
  font-size: 0.9em;
  font-weight: 400;
}
</style>