fats

package.json

   },
   "dependencies": {
     "@splidejs/splide": "^4.1.4",
+    "@splidejs/vue-splide": "^0.6.12",
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
     "animate.css": "^4.1.1",
     "axios": "^1.2.1",

src/main.js

 import { createApp } from 'vue'
+import VueSplide from '@splidejs/vue-splide';
 import 'animate.css'
+import '@splidejs/vue-splide/css/core';
 
 import App from './App.vue'
 import store from './store'
 app.use(store);
 app.use(router);
 app.use(i18n);
+app.use( VueSplide );
 app.mount('#app');
-
-// 播放第一个视频
-document.addEventListener('WeixinJSBridgeReady', () => {
-  const t = setTimeout(() => {
-    const vid = document.querySelector('#firstVideo');
-    console.log('-------------->', vid)
-    if (vid) {
-      vid.play();
-    }
-  }, 500);
-});

src/pages/pg3/Ink.vue

+<template>
+  <div class="ink-box">
+    <div>
+      <canvas class="ink-cover" ref="canvasRef"></canvas>
+      <!-- <img class="ink-back" :src="src" alt="" > -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onBeforeMount, onMounted, ref, watch } from 'vue';
+
+  const canvasRef = ref();
+  const renderRef = ref();
+  const props = defineProps({
+    src: String,
+    active: Boolean,
+  })
+
+  let frameId = null;
+  let i = 0;
+
+  watch(() => props.active, (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      if (renderRef.value) {
+        i = 0;
+        renderRef.value();
+      }
+    }
+  })
+
+  onMounted(() => {
+    const canv = canvasRef.value;
+    const ctx = canv.getContext("2d");
+    const img = new Image();
+    const imgMask = new Image();
+    
+    img.onload = function() {
+      canv.width = img.naturalWidth;
+      canv.height = img.naturalHeight;
+    }
+
+    img.src = props.src;
+    imgMask.src = './images/cloud-texture.png'
+    
+    function draw() {
+      i += 5;
+      
+      let maskX = (canv.width - (70 + i)) / 2,
+          maskY = (canv.height - (40 + i)) / 2;
+      
+      ctx.clearRect(0, 0, canv.width, canv.height);
+      ctx.globalCompositeOperation = "source-over";
+      
+      ctx.drawImage(imgMask, maskX, maskY, 70 + i, 40 + i);
+      
+      ctx.globalCompositeOperation = "source-in";
+      ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
+      
+      frameId = window.requestAnimationFrame(draw);
+
+      if (i >= 5000) {
+        i = 0;
+        window.cancelAnimationFrame(frameId);
+      }
+    }
+
+    renderRef.value = draw;
+
+    if (props.active) {
+      draw();
+    }
+  });
+
+  onBeforeMount(() => {
+    if (frameId) {
+      window.cancelAnimationFrame(frameId);
+    }
+  });
+
+</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/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"
     >
-      <img src="/images/pg3/header.png" alt="">
+      <p class="txt" style="text-align:center">
+        向<br />世<br />界<br />讲<br />述
+      </p>
     </Animate>
+    <div class="nanjing">
+      <div>
+        <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__zoomIn"
+      delay="500ms"
+      alt=""
+      :ready="show"
+    />
     <div class="content">
       <Animate
         class="txt"
       </Animate>
     </div>
 
-    <div class="global-map">
-      <Map />
-    </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/pg3/1.png" />
+          </SplideSlide>
+          <SplideSlide>
+            <Ink class="slide-ink" :active="slideIndexRef == 1" src="./images/pg3/2.png" />
+          </SplideSlide>
+          <SplideSlide>
+            <Ink class="slide-ink" :active="slideIndexRef == 2" src="./images/pg3/3.png" />
+          </SplideSlide>
+          <SplideSlide>
+            <Ink class="slide-ink" :active="slideIndexRef == 3" src="./images/pg3/4.png" />
+          </SplideSlide>
+          <SplideSlide>
+            <Ink class="slide-ink" :active="slideIndexRef == 4" src="./images/pg3/5.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 >
 
     <div class="btn-box">
-      <Btn class="btn" @click="showPerson = true">人物采访</Btn>
-      <Btn class="btn" @click="onVideo">视频</Btn>
+      <img src="/images/pg3/btn.png" alt=""  @click="onBtnClick">
     </div>
 
-    <Persons v-if="showPerson" @cancel="showPerson = false" />
+    <!-- <Persons v-if="showPerson" @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 Persons from './Persons.vue';
-  import Map from './Map.vue';
+  import Ink from './Ink.vue';
   import usePageShow from '../usePageShow';
 
   const router = useRouter();
   const [pgRef, show] = usePageShow(0.3);
   const showPerson = ref(false);
+  const slideIndexRef = ref(0);
+
+  const slideOptions = {
+    // arrows: false,
+    pagination: false,
+    autoplay: true,
+    type: 'loop',
+    speed: 1000,
+    interval: 6000,
+  }
 
   const onVideo = () => {
     router.push('/pg4')
   }
+
+  const onSlideChange = (slide, newIndex) => {
+    slideIndexRef.value = newIndex;
+  }
+
+  const onBtnClick = () => {
+    console.log('--------------')
+    router.push('/pg4')
+  }
 </script>
 
 
 <style lang="less" scoped>
 .pg3 {
-  min-height: 100vh;
+  position: relative;
+
+  .pg3-bg {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+
+    & > div {
+      position: relative;
+      height: 100%;
+    }
 
-  .bell {
-    right: 30px;
-    top: 30px;
+    .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;
+  }
 
-    &::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-image: url('/images/BG.jpg');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      transform-origin: bottom center;
-      animation: erasure 1s linear forwards;
-      z-index: 10;
-    }
+  .nanjing {
+    width: 50vw;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-    @keyframes erasure {
-      from {
-        transform: scaleY(100%);
-      }
+    & > div {
+      position: relative;
+    }
 
-      to {
-        transform: scaleY(0);
-      }
+    .stele {
+      width: 8vw;
+      bottom: 2vw;
+      left: 8vw;
     }
   }
 
-  .content {
-    width: 80vw;
+  .nj-1937 {
+    width: 16vw;
     margin: auto;
   }
 
-  .global-map {
-    width: 95vw;
+  .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: 2;
 
-    .btn {
-      & + .btn {
-        margin-left: 40px;
-      }
+    img {
+      width: 30vw;
+      margin: auto;
     }
   }
 

yarn.lock

     "@intlify/core-base" "9.2.2"
     "@intlify/shared" "9.2.2"
 
-"@splidejs/splide@^4.1.4":
+"@splidejs/splide@^4.1.3", "@splidejs/splide@^4.1.4":
   version "4.1.4"
   resolved "https://registry.npmmirror.com/@splidejs/splide/-/splide-4.1.4.tgz#02d029360569e7d75d28357a9727fc48322015a3"
   integrity sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==
 
+"@splidejs/vue-splide@^0.6.12":
+  version "0.6.12"
+  resolved "https://registry.npmmirror.com/@splidejs/vue-splide/-/vue-splide-0.6.12.tgz#063731cf8ec2d1f9a14ffacbe3a315db63ab6ff2"
+  integrity sha512-eQb8pnGMN8Tr0FVaQo1PUMZlMHl8fSqHNXPTx79eeE2dkZqbsvq6jRzXoT9ZF7hFkxdOEmB6qYNp93SUwV684g==
+  dependencies:
+    "@splidejs/splide" "^4.1.3"
+
 "@vitejs/plugin-vue@^3.0.3":
   version "3.2.0"
   resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"