fix

src/pages/pg1/Md2.vue

@@ -12,7 +12,7 @@
           9年来，20万人加入“紫金草行动”，<br />
           把紫金草徽章佩戴在离心脏最近的地方。
         </p>
-        <img class="animate__animated animate__fadeInDown" style="animation-delay: 300ms;" src="/images/pg1/md1-1.jpg" alt="">
+        <img class="animate__animated animate__fadeInDown" style="animation-delay: 300ms;" src="/images/pg1/md1-1.png" alt="">
         <p class="txt animate__animated animate__fadeInDown" style="animation-delay: 600ms; text-align: right">
           在2亿人心中，和平的愿景被播撒。
         </p>

src/pages/pg1/Md3.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal>
     <div class="md3-box md-bg">
-      <div class="md3-header ">
+      <div class="md3-header">
         <Animate
           comp="img"
           name="animate__fadeInDown"
@@ -10,28 +10,26 @@
           :ready="true"
         />
       </div>
-      <div class="md3-context">
-        <video
-          webkit-playsinline
-          playsinline
-          preload="auto"
-          autoplay="autoplay"
-          controls="controls"
-          src="/video/9年活动.mp4"
-          @play="pause()"
-          @pause="play()"
-        ></video>
+      <div class="md3-context" @click="router.push('/pg1/video')">
+        <img
+          class="animate__animated animate__fadeInDown"
+          style="animation-delay: 300ms"
+          src="/images/pg1/videocover.jpg"
+          alt=""
+        />
       </div>
     </div>
   </Modal>
 </template>
 
 <script setup>
-  import { useModel } from '@zjxpcyc/vue-tiny-store';
-  import Modal from '@/components/Modal.vue';
-  import Animate from '@/components/Animate.vue';
+import { useModel } from "@zjxpcyc/vue-tiny-store";
+import Modal from "@/components/Modal.vue";
+import Animate from "@/components/Animate.vue";
+import { useRouter } from "vue-router";
 
-  const { play, pause } = useModel('audio');
+const router = useRouter();
+const { play, pause } = useModel("audio");
 </script>
 
 <style lang="less" scoped>
@@ -59,4 +57,4 @@
     }
   }
 }
-</style>
+</style>

src/pages/pg1/video.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="page pg-bg video-pg">
+    <GoBack class="goback abs" @click.stop="router.go(-1)" />
+    <div class="content">
+      <video
+        webkit-playsinline
+        playsinline
+        preload="auto"
+        autoplay="autoplay"
+        controls="controls"
+        ref="mediaRef"
+        src="/video/9年活动.mp4"
+      ></video>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useModel } from "@zjxpcyc/vue-tiny-store";
+import GoBack from "@/components/GoBack.vue";
+
+const router = useRouter();
+const mediaRef = ref();
+const show = ref(false);
+const controls = ref();
+
+onMounted(() => {
+  // 自动播放
+  try {
+    const t = setTimeout(() => {
+      clearTimeout(t);
+
+      // 可能抛出异步异常
+      const p = mediaRef.value.play();
+      if (p) {
+        p.then(() => {
+          mediaRef.value.play();
+        }).catch((err) => {
+          console.log("--play-err---", err);
+          controls.value = "controls";
+        });
+      }
+    }, 300);
+  } catch (err) {
+    console.log("---err---", err);
+    controls.value = "controls";
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.video-pg {
+  position: relative;
+  background-color: #000;
+  display: flex;
+  align-items: center;
+
+  .goback {
+    z-index: 100;
+    left: 10px;
+    top: 10px;
+  }
+  .content {
+    position: relative;
+    video {
+      // width: 100%;
+      width: 100vw;
+      z-index: 1;
+    }
+    .play-action {
+      position: absolute;
+      z-index: 2;
+      bottom: -80px;
+      width: 100%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100px;
+        width: 30vw;
+        height: 10vw;
+      }
+      img:first-child {
+        margin-right: 20px;
+      }
+      img:last-child {
+        margin-left: 20px;
+      }
+    }
+  }
+}
+</style>

src/pages/pg2-2/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="page pg-bg pg2-2">
     <GoBack class="goback abs" style="z-index: 100" @click="router.go(-1)" />
-    <div class="bk-pd content">
+    <div class="bk-pd content" >
       <Animate
         class="txt"
         comp="p"
         name="animate__fadeIn"
-        delay="1000ms"
+
         :ready="true"
       >
         85年前，
@@ -27,7 +27,7 @@
         class="txt bottom"
         comp="p"
         name="animate__fadeIn"
-        delay="2000ms"
+        delay="1000ms"
         :ready="true"
       >
         1939年，一名日本军医带着对战争的反思和忏悔，
@@ -93,8 +93,8 @@
     <!-- <img class="photo-img" src="/images/pg2-2/照片4.png" /> -->
     <!-- </div> -->
 
-    <div class="bk-pd content">
-      <Animate name="animate__fadeIn" delay="3000ms" :ready="true">
+    <div class="bk-pd content" ref="pgRef1">
+      <Animate name="animate__fadeIn" delay="300ms" :ready="show1">
         <p class="txt bottom">
           紫金草，它耐寒、耐旱，
           <br />在贫瘠的土地上也能顽强生长， <br />蕴含着无穷的草根力量，
@@ -105,15 +105,15 @@
         </p>
       </Animate>
     </div>
-    <div class="bk-pd content">
+    <div class="bk-pd content" ref="pgRef2">
       <Ink
         class="slide-ink chart-img"
-        :active="true"
+        :active="show2"
         src="/images/pg2-2/图.png"
       />
     </div>
-    <div class="bk-pd content">
-      <Animate name="animate__fadeIn" delay="4000ms" :ready="true">
+    <div class="bk-pd content" ref="pgRef3">
+      <Animate name="animate__fadeIn" delay="300ms" :ready="show3">
         <p class="txt topbottom">
           2014年，在国家首个公祭日来临之际，
           <br />为了深切缅怀惨遭日军屠戮遇难同胞，
@@ -138,7 +138,11 @@ import Animate from "@/components/Animate.vue";
 import GoBack from "@/components/GoBack.vue";
 import { useRouter } from "vue-router";
 import Ink from "./Ink.vue";
+import usePageShow from '../usePageShow';
 
+const [pgRef1, show1] = usePageShow(0.3);
+const [pgRef2, show2] = usePageShow(0.3);
+const [pgRef3, show3] = usePageShow(0.3);
 const router = useRouter();
 const inkActive = ref(false);
 const slideIndexRef = ref(0);

src/pages/pg2-2/useShow.js

@@ -0,0 +1,40 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export default function useIntersection(param) {
+  const pageRef = ref();
+  const showRef = ref(false);
+  let intersectionObserver = null;
+
+  let breakRatio = 0.5;
+  if (typeof param === 'number') {
+    breakRatio = param;
+  }
+
+  let callback = null;
+  if (typeof param === 'function') {
+    callback = param;
+  }
+
+  onMounted(() => {
+    intersectionObserver = new IntersectionObserver((entries) => {
+      const { intersectionRatio } = entries[0];
+      if (intersectionRatio <= 0.1) {
+        showRef.value = false;
+      } else if (intersectionRatio >= breakRatio)  {
+        showRef.value = true;
+      }
+
+      if (typeof callback === 'function') {
+        callback(entries[0]);
+      }
+    }, {threshold: [0.0, 0.1, 0.3, 0.5, 0.8, 0.9]});
+
+    intersectionObserver.observe(pageRef.value);
+  })
+
+  onBeforeUnmount(() => {
+    intersectionObserver.disconnect();
+  })
+
+  return [pageRef, showRef];
+}

src/router.js

@@ -6,6 +6,7 @@ const routes = [
   // { path: '/', component: () => import('@/pages/FirstVideo.vue') },
   { path: '/', component: () => import('@/pages/index.vue') },
   { path: '/bk1', component: () => import('@/pages/bk1/index.vue') },
+  { path: '/pg1/video', component: () => import('@/pages/pg1/video.vue') },
   { path: '/pg2-2', component: () => import('@/pages/pg2-2/index.vue') },
   { path: '/pg4', component: () => import('@/pages/pg4/video.vue') },
   { path: '/pg4/next', component: () => import('@/pages/pg4/index.vue') },