fix

src/pages/pg2-2/index.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="page pg-bg pg2-2">
     <div class="bk-pd content">
-      <p class="txt">
+      <Animate
+        class="txt"
+        comp="p"
+        name="animate__fadeIn"
+        delay="1000ms"
+        :ready="true"
+      >
         85年前，
         <br />日本侵略者制造了惨绝人寰的南京大屠杀， <br />30多万生灵涂炭。
         <br />战后的紫金山废墟下，片片紫色小花密密开放。
         <br />
-        <br />
-      </p>
+      </Animate>
     </div>
     <div class="bk-pd content">
       <img class="layer-img" src="/images/pg2-2/图层38.png" />
@@ -17,17 +22,21 @@
       <img class="group-img" src="/images/pg2-2/组4.png" />
     </div>
     <div class="bk-pd content">
-      <p class="txt bottom">
+      <Animate
+        class="txt bottom"
+        comp="p"
+        name="animate__fadeIn"
+        delay="2000ms"
+        :ready="true"
+      >
         1939年，一名日本带军医着对战争的反思和忏悔，
         <br />把取自南京的花种带回日本，撒遍山野、植满庭院，
         <br />并取名“紫金草”。 <br />在他的眼中，当年的紫金山上，
         <br />每一朵花就是一个在战争中丧生的灵魂。
         <br />此后几十年，这名军医和家人 <br />在各地播种紫金草悼念亡灵，
-      </p>
+      </Animate>
     </div>
-    <!-- <div class="bk-pd content-ink"> -->
-    <!-- <InkEffect src="./images/pg2-2/紫金草行动logo拷贝.png" :active="inkActive" /> -->
-    
+
     <Splide
       :options="slideOptions"
       :has-track="false"
@@ -36,7 +45,6 @@
       <div class="ink-slider-wrapper">
         <SplideTrack>
           <SplideSlide>
-        
             <Ink
               class="slide-ink"
               :active="slideIndexRef == 0"
@@ -85,26 +93,34 @@
     <!-- </div> -->
 
     <div class="bk-pd content">
-      <p class="txt bottom">
-        紫金草，它耐寒、耐旱，
-        <br />在贫瘠的土地上也能顽强生长， <br />蕴含着无穷的草根力量，
-        <br />寄托了对战争的反省和对和平的祈愿。 <br />“紫金草行动”由此而来。
-        <br />小小紫金草，悠悠寄哀思。 <br />让和平中长大的年轻人保持“痛”感，
-        <br />让更多的人主动追问、不断提起那段历史，
-        <br />让和平之声传向世界各地， <br />这一直是“紫金草行动”努力的方向。
-      </p>
+      <Animate name="animate__fadeIn" delay="3000ms" :ready="true">
+        <p class="txt bottom">
+          紫金草，它耐寒、耐旱，
+          <br />在贫瘠的土地上也能顽强生长， <br />蕴含着无穷的草根力量，
+          <br />寄托了对战争的反省和对和平的祈愿。 <br />“紫金草行动”由此而来。
+          <br />小小紫金草，悠悠寄哀思。 <br />让和平中长大的年轻人保持“痛”感，
+          <br />让更多的人主动追问、不断提起那段历史，
+          <br />让和平之声传向世界各地， <br />这一直是“紫金草行动”努力的方向。
+        </p>
+      </Animate>
     </div>
     <div class="bk-pd content">
-      <img class="chart-img" src="/images/pg2-2/图.png" />
+      <Ink
+        class="slide-ink chart-img"
+        :active="true"
+        src="/images/pg2-2/图.png"
+      />
     </div>
     <div class="bk-pd content">
-      <p class="txt topbottom">
-        2014年，在国家首个公祭日来临之际，
-        <br />为了深切缅怀惨遭日军屠戮遇难同胞，
-        <br />唤起人们对和平的向往和珍视，
-        <br />南京广播电视集团发起了“紫金草行动”。 <br />九年了，
-        <br />“紫金草行动”再启航， <br />让“和平之花”开得更远！
-      </p>
+      <Animate name="animate__fadeIn" delay="4000ms" :ready="true">
+        <p class="txt topbottom">
+          2014年，在国家首个公祭日来临之际，
+          <br />为了深切缅怀惨遭日军屠戮遇难同胞，
+          <br />唤起人们对和平的向往和珍视，
+          <br />南京广播电视集团发起了“紫金草行动”。 <br />九年了，
+          <br />“紫金草行动”再启航， <br />让“和平之花”开得更远！
+        </p>
+      </Animate>
     </div>
     <div class="bk-pd content">
       <img class="zjclogo-img" src="/images/pg2-2/紫金草行动logo拷贝.png" />
@@ -114,10 +130,10 @@
 
 <script setup>
 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 { 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);
@@ -220,7 +236,8 @@ const onSlideChange = (slide, newIndex) => {
   }
   .content {
     .chart-img {
-      width: 84%;
+      width: 100vw;
+      height: 86vw;
       display: inline-block;
     }
   }
@@ -243,9 +260,9 @@ const onSlideChange = (slide, newIndex) => {
     position: relative;
     z-index: 2;
     .slide-ink {
-    width: 100vw;
-    height: 71.76vw;
-  }
+      width: 100vw;
+      height: 71.76vw;
+    }
     .splide__arrows {
       position: absolute;
       z-index: 10;
@@ -260,7 +277,6 @@ const onSlideChange = (slide, newIndex) => {
       }
     }
   }
- 
 }
 .txt {
   text-align: center;