fix

src/pages/pg2-2/Ink.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="ink-box">
+    <div>
+      <InkEffect class="ink-cover" :src="src" :active="active" />
+      <!-- <img class="ink-back" :src="src" alt="" > -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InkEffect from '@/components/InkEffect.vue';
+  const props = defineProps({
+    src: String,
+    active: Boolean,
+  })
+</script>
+
+<style lang="less" scoped>
+.ink-box {
+  width: 100%;
+  height: 100%;
+
+  & > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .ink-cover {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+
+    .ink-back {
+      display: none;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/pages/pg2-2/index.vue

@@ -3,8 +3,7 @@
     <div class="bk-pd content">
       <p class="txt">
         85年前，
-        <br />日本侵略者制造了惨绝人寰的南京大屠杀，
-        <br />30多万生灵涂炭。
+        <br />日本侵略者制造了惨绝人寰的南京大屠杀， <br />30多万生灵涂炭。
         <br />战后的紫金山废墟下，片片紫色小花密密开放。
         <br />
         <br />
@@ -21,47 +20,79 @@
       <p class="txt bottom">
         1939年，一名日本带军医着对战争的反思和忏悔，
         <br />把取自南京的花种带回日本，撒遍山野、植满庭院，
-        <br />并取名“紫金草”。
-        <br />在他的眼中，当年的紫金山上，
+        <br />并取名“紫金草”。 <br />在他的眼中，当年的紫金山上，
         <br />每一朵花就是一个在战争中丧生的灵魂。
-        <br />此后几十年，这名军医和家人
-        <br />在各地播种紫金草悼念亡灵，
+        <br />此后几十年，这名军医和家人 <br />在各地播种紫金草悼念亡灵，
       </p>
     </div>
-    <div class="bk-pd content">
-      <InkEffect src="./images/pg2-2/紫金草行动logo拷贝.png" :active="inkActive" />
-      <img class="photo-img" src="/images/pg2-2/照片4.png" />
-    </div>
-    <!-- <Splide :options="slideOptions" :has-track="false" @splide:moved="onSlideChange">
+    <!-- <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" />
+        
+            <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" />
+            <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" />
+            <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" />
+            <Ink
+              class="slide-ink"
+              :active="slideIndexRef == 3"
+              src="/images/pg2-2/照片4.png"
+            />
           </SplideSlide>
-    </SplideTrack>-->
-    <!-- </div>
-    </Splide>-->
+        </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 />寄托了对战争的反省和对和平的祈愿。 <br />“紫金草行动”由此而来。
+        <br />小小紫金草，悠悠寄哀思。 <br />让和平中长大的年轻人保持“痛”感，
         <br />让更多的人主动追问、不断提起那段历史，
-        <br />让和平之声传向世界各地，
-        <br />这一直是“紫金草行动”努力的方向。
+        <br />让和平之声传向世界各地， <br />这一直是“紫金草行动”努力的方向。
       </p>
     </div>
     <div class="bk-pd content">
@@ -72,10 +103,8 @@
         2014年，在国家首个公祭日来临之际，
         <br />为了深切缅怀惨遭日军屠戮遇难同胞，
         <br />唤起人们对和平的向往和珍视，
-        <br />南京广播电视集团发起了“紫金草行动”。
-        <br />九年了，
-        <br />“紫金草行动”再启航，
-        <br />让“和平之花”开得更远！
+        <br />南京广播电视集团发起了“紫金草行动”。 <br />九年了，
+        <br />“紫金草行动”再启航， <br />让“和平之花”开得更远！
       </p>
     </div>
     <div class="bk-pd content">
@@ -85,29 +114,34 @@
 </template>
 
 <script steup>
-import { ref } from 'vue'
-import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide'
-import InkEffect from '@/components/InkEffect.vue'
+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';
 
-const inkActive = ref(false)
-const slideIndexRef = ref(0)
+import Ink from "./Ink.vue";
+const inkActive = ref(false);
+const slideIndexRef = ref(0);
 
 const slideOptions = {
   // arrows: false,
   pagination: false,
   autoplay: true,
-  type: 'loop',
+  type: "loop",
   speed: 1000,
-  interval: 6000
-}
+  interval: 6000,
+};
 
 const onSlideChange = (slide, newIndex) => {
-  slideIndexRef.value = newIndex
-}
+  slideIndexRef.value = newIndex;
+};
 </script>
 
 <style lang="less" scoped>
 .pg2-2 {
+  position: relative;
+  height: 100vh;
   .content {
     text-align: center;
   }
@@ -202,10 +236,35 @@ const onSlideChange = (slide, newIndex) => {
       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>
+</style>