11

src/components/InkEffect.vue

@@ -30,15 +30,13 @@
   let i = 0;
 
   watch(() => props.active, (newVal, oldVal) => {
-    if (newVal && !oldVal) {
+    if (newVal) {
       if (renderRef.value) {
         i = 0;
         renderRef.value();
       }
-    }
-
-    if (props.clearable && !newVal) {
-      if (clearRef.value) {
+    } else {
+      if (props.clearable && clearRef.value) {
         clearRef.value();
       }
     }

src/pages/Loading.vue

@@ -19,9 +19,9 @@
       </div>
     </div>
     <DownArrow v-if="percent == '100%'" style="bottom: 120px" />
-    <div class="footer abs txt">
-      主办单位：中共南京市委网信办、共青团南京市委员会、南京广播电视集团、清华日军南京大屠杀遇难同胞纪念馆
-    </div>
+    <!-- <div class="footer abs txt">
+      主办单位：中共南京市委网信办、共青团南京市委员会、南京广播电视集团、侵华日军南京大屠杀遇难同胞纪念馆
+    </div> -->
   </div>
 </template>
 

src/pages/pg1/Md1.vue

@@ -14,7 +14,8 @@
           播撒和平的种子。<br>
           近20万枚紫金草徽章佩戴在了人们的心口。
         </p>
-        <div class="map-img" ref="mapRef" />
+        <!-- <div class="map-img" ref="mapRef" /> -->
+        <img class="map-img" src="/images/pg2/map.gif" alt="">
       </div>
     </div>
   </Modal>
@@ -28,44 +29,44 @@
   const loaded = ref(false);
   const dep = ref(true);
 
-  const callback = (t) => {
-    const maxHeight = 27837
-    const rawHeight = 489
-    const img = mapRef.value
-    const height = img.offsetHeight
-    const pos = t * rawHeight
+  // const callback = (t) => {
+  //   const maxHeight = 27837
+  //   const rawHeight = 489
+  //   const img = mapRef.value
+  //   const height = img.offsetHeight
+  //   const pos = t * rawHeight
 
-    const backgroundPosition = `0 -${(pos * height) / rawHeight}px`
-    img.style.backgroundPosition = backgroundPosition
+  //   const backgroundPosition = `0 -${(pos * height) / rawHeight}px`
+  //   img.style.backgroundPosition = backgroundPosition
 
-    if (pos >= maxHeight - rawHeight) {
-      return true
-    }
-  }
+  //   if (pos >= maxHeight - rawHeight) {
+  //     return true
+  //   }
+  // }
   
   onMounted(() => {
     loaded.value = true;
   });
 
-  let times = 0;
-  let execed = false;
-  watch([loaded, dep], (values) => {
-    console.log(values)
-    if (execed) return;
+  // let times = 0;
+  // let execed = false;
+  // watch([loaded, dep], (values) => {
+  //   console.log(values)
+  //   if (execed) return;
 
-    if (values[0] && values[1]) {
-      execed = true;
+  //   if (values[0] && values[1]) {
+  //     execed = true;
       
-      const i = setInterval(() => {
-        const isOver = callback(times);
-        times += 1;
+  //     const i = setInterval(() => {
+  //       const isOver = callback(times);
+  //       times += 1;
 
-        if (isOver) {
-          clearInterval(i);
-        }
-      }, 2000 / 16);
-    }
-  });
+  //       if (isOver) {
+  //         clearInterval(i);
+  //       }
+  //     }, 2000 / 16);
+  //   }
+  // });
 </script>
 
 <style lang="less" scoped>

src/pages/pg2-2/index.vue

@@ -30,7 +30,7 @@
         delay="2000ms"
         :ready="true"
       >
-        1939年，一名日本带军医着对战争的反思和忏悔，
+        1939年，一名日本军医带着对战争的反思和忏悔，
         <br />把取自南京的花种带回日本，撒遍山野、植满庭院，
         <br />并取名“紫金草”。 <br />在他的眼中，当年的紫金山上，
         <br />每一朵花就是一个在战争中丧生的灵魂。

src/pages/pg3/Ink.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ink-box">
     <div>
-      <InkEffect class="ink-cover" :src="src" v-if="active" :active="true" />
+      <InkEffect class="ink-cover" :src="src" :speed="10" :active="active" />
       <!-- <img class="ink-back" :src="src" alt="" > -->
     </div>
   </div>

src/pages/pg3/index.vue

@@ -69,7 +69,7 @@
     <Splide
       :options="slideOptions"
       :has-track="false"
-      @splide:moved="onSlideChange"
+      @splide:move="onSlideChange"
     >
       <div class="ink-slider-wrapper">
         <SplideTrack>
@@ -131,8 +131,8 @@
     pagination: false,
     autoplay: true,
     type: 'loop',
-    speed: 1000,
-    interval: 6000,
+    speed: 600,
+    interval: 5000,
   }
 
   const onVideo = () => {

src/pages/pg4/video.vue

@@ -83,7 +83,8 @@
   .content {
     position: relative;
     video {
-      width: 100%;
+      // width: 100%;
+      width: 100vw;
       z-index: 1;
     }
     .play-action {