feats

src/main.js

@@ -14,5 +14,5 @@ const app = createApp(App);
 app.use(store);
 app.use(router);
 app.use(i18n);
-app.use( VueSplide );
+app.use(VueSplide);
 app.mount('#app');

src/pages/pg2-2/index.vue

@@ -7,9 +7,14 @@
         <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">
@@ -24,8 +29,27 @@
       </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="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>
+    </Splide>-->
     <div class="bk-pd content">
       <p class="txt bottom">
         紫金草，它耐寒、耐旱，
@@ -60,14 +84,93 @@
   </div>
 </template>
 
+<script steup>
+import { ref } from 'vue'
+import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide'
+import InkEffect from '@/components/InkEffect.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 {
   .content {
     text-align: center;
   }
   .content {
+    .layer-img {
+      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 {
@@ -102,5 +205,7 @@
 }
 .txt {
   text-align: center;
+  font-size: 0.9em;
+  font-weight: 400;
 }
 </style>