Merge branch 'master' of http://git.ycjcjy.com/H5/njDaTuSha into master

src/App.vue

@@ -5,7 +5,7 @@
   import track from '@/utils/track'
   import Loading from './First.vue';
 
-  const { el } = useModel('audio');
+  const { el, play } = useModel('audio');
   const { setUser, contries } = useModel('user');
   const show = ref(false);
   
@@ -42,13 +42,19 @@
   
   share();
 
+  const onTouch = () => {
+    play();
+    window.removeEventListener('touchstart', onTouch);
+  }
+  window.addEventListener('touchstart', onTouch);
+
 </script>
 
 <template>
   <!-- <Loading v-if="!show" class="loading" @ready="(show = true)" /> -->
   <router-view></router-view>
 
-  <audio ref="el" src="/audio/audio.mp3" style="max-width: 0"  preload="auto"></audio>
+  <audio ref="el" src="/audio/audio.mp3" style="max-width: 0" loop preload="auto"></audio>
 </template>
 
 <style lang="less" scoped>

src/components/Bell.vue

@@ -53,7 +53,6 @@ const animate = computed(() => state.value === 1);
       flex: none;
       width: 50%;
       height: 50%;
-      border: 2px solid rgba(255, 255, 255, 1);
       border-radius: 50%;
       opacity: 0;
     }
@@ -63,12 +62,14 @@ const animate = computed(() => state.value === 1);
     }
 
     .inner {
+      border: 2px solid #fff;
       animation-duration: 3s;
       animation-timing-function: linear;
       animation-iteration-count: infinite;
     }
 
     .outer {
+      border: 2px solid #fff;
       animation-duration: 1.5s;
       animation-timing-function: linear;
       animation-iteration-count: infinite;

src/components/InkEffect.vue

@@ -7,13 +7,23 @@
 
   const canvasRef = ref();
   const renderRef = ref();
+  const clearRef = ref();
   const props = defineProps({
     src: String,
     active: Boolean,
     speed: {
       type: Number,
       default: 5,
-    }
+    },
+    xSpeed: {
+      type: Number,
+      default: 40,
+    },
+    ySpeed: {
+      type: Number,
+      default: 70,
+    },
+    clearable: Boolean
   })
 
   let frameId = null;
@@ -26,6 +36,12 @@
         renderRef.value();
       }
     }
+
+    if (props.clearable && !newVal) {
+      if (clearRef.value) {
+        clearRef.value();
+      }
+    }
   })
 
   onMounted(() => {
@@ -41,17 +57,23 @@
 
     img.src = props.src;
     imgMask.src = './images/cloud-texture.png'
+
+    function clear() {
+      cxt.clearRect(0, 0, canv.width, canv.height);
+    }
+
+    clearRef.value = clear;
     
     function draw() {
       i += props.speed;
       
-      let maskX = (canv.width - (70 + i)) / 2,
-          maskY = (canv.height - (40 + i)) / 2;
+      let maskX = (canv.width - (props.ySpeed + i)) / 2,
+          maskY = (canv.height - (props.xSpeed + i)) / 2;
       
       ctx.clearRect(0, 0, canv.width, canv.height);
       ctx.globalCompositeOperation = "source-over";
       
-      ctx.drawImage(imgMask, maskX, maskY, 70 + i, 40 + i);
+      ctx.drawImage(imgMask, maskX, maskY, props.ySpeed + i, props.xSpeed + i);
       
       ctx.globalCompositeOperation = "source-in";
       ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

src/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100vh;">
-    <Bell class="bell abs" />
+    <Bell class="bell" />
     <div class="pages slide-container">
       <div class="slide-page-2">
         <Pg1 class="container" />
@@ -51,6 +51,7 @@ onMounted(() => {
   right: 30px;
   top: 30px;
   z-index: 100;
+  position: fixed;
 }
 
 .pages {

src/pages/pg1/Md3.vue

@@ -18,6 +18,8 @@
           autoplay="autoplay"
           controls="controls"
           src="/video/9年活动.mp4"
+          @play="pause()"
+          @pause="play()"
         ></video>
       </div>
     </div>
@@ -25,8 +27,11 @@
 </template>
 
 <script setup>
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
   import Modal from '@/components/Modal.vue';
   import Animate from '@/components/Animate.vue';
+
+  const { play, pause } = useModel('audio');
 </script>
 
 <style lang="less" scoped>

src/pages/pg1/index.vue

@@ -2,6 +2,7 @@
   <div class="page pg-bg pg1" parallax>
     <div class="bg">
       <div>
+        <!-- <InkEffect class="ink-bg" src="/images/pg1/bg1.png" :active="true" /> -->
         <img src="/images/pg1/bg1.png" alt="">
       </div>
     </div>
@@ -27,7 +28,7 @@
 <script setup>
   import { onMounted, ref } from 'vue';
   import { useRouter } from 'vue-router';
-  import Bell from '@/components/Bell.vue';
+  import InkEffect from '@/components/InkEffect.vue';
   import Logo from './Logo.vue';
   import Part1 from './P1.vue';
   import Part2 from './P2.vue';
@@ -64,6 +65,10 @@
     & > div {
       position: relative;
     }
+
+    .ink-bg {
+      width: 100%;
+    }
   }
 
   .conent {

src/pages/pg2/index.vue

@@ -46,14 +46,13 @@
 
     <div class="groups abs">
       <div>
-        <div>
-          <img class="ruins" src="/images/pg2/废墟.png" alt />
-        </div>
+        <InkEffect class="ink-ruins" src="./images/pg2/废墟color.png" :speed="10" :active="inkActive" :clearable="true" />
+        <img class="ruins" src="/images/pg2/废墟.png" alt />
       </div>
     </div>
     <div class="flower1">
       <div>
-        <img src="/images/pg2/flower1.png" alt="" />
+        <img :class="{'flower-fly': show}" src="/images/pg2/flower1.png" alt="" @animationend="inkActive = true" />
       </div>
     </div>
 
@@ -71,47 +70,55 @@
 </template>
 
 <script setup>
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
-import Bell from "@/components/Bell.vue";
-import Animate from "@/components/Animate.vue";
-import Cloud from "./Cloud.vue";
-import Smoke from "./smoke.vue";
-import Flower1 from "./flower/Flower1.vue";
-import Flower2 from "./flower/Flower2.vue";
-import Flower3 from "./flower/Flower3.vue";
-import usePageShow from "../usePageShow";
-
-const router = useRouter();
-
-const onClick = () => {
-  router.push(`/pg2-2`);
-};
-
-const flowerAnimate = reactive({
-  left: "",
-  right: "",
-});
-
-let lastRatio = 0;
-const flowShow = ({ intersectionRatio }) => {
-  console.log(intersectionRatio);
-  const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio;
-  const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio;
-
-  if (isIn) {
-    flowerAnimate.left = "animate__fadeInLeft";
-    flowerAnimate.right = "animate__fadeInRight";
-  }
-  if (isOut) {
-    flowerAnimate.left = "animate__fadeOutLeft";
-    flowerAnimate.right = "animate__fadeOutRight";
-  }
+  import { reactive, ref, watch } from "vue";
+  import { useRouter } from "vue-router";
+  import Bell from "@/components/Bell.vue";
+  import Animate from "@/components/Animate.vue";
+  import InkEffect from "@/components/InkEffect.vue";
+  import Cloud from "./Cloud.vue";
+  import Smoke from "./smoke.vue";
+  import Flower1 from "./flower/Flower1.vue";
+  import Flower2 from "./flower/Flower2.vue";
+  import Flower3 from "./flower/Flower3.vue";
+  import usePageShow from "../usePageShow";
+
+  const router = useRouter();
+  const inkActive = ref(false);
+
+  const onClick = () => {
+    router.push(`/pg2-2`);
+  };
+
+  const flowerAnimate = reactive({
+    left: "",
+    right: "",
+  });
+
+  let lastRatio = 0;
+  const flowShow = ({ intersectionRatio }) => {
+    console.log(intersectionRatio);
+    const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio;
+    const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio;
+
+    if (isIn) {
+      flowerAnimate.left = "animate__fadeInLeft";
+      flowerAnimate.right = "animate__fadeInRight";
+    }
+    if (isOut) {
+      flowerAnimate.left = "animate__fadeOutLeft";
+      flowerAnimate.right = "animate__fadeOutRight";
+    }
+
+    lastRatio = intersectionRatio;
+  };
 
-  lastRatio = intersectionRatio;
-};
+  const [pgRef, show] = usePageShow(flowShow);
 
-const [pgRef, show] = usePageShow(flowShow);
+  watch(show, (val) => {
+    if (!val) {
+      inkActive.value = false;
+    }
+  })
 </script>
 
 <style lang="less" scoped>
@@ -170,6 +177,15 @@ const [pgRef, show] = usePageShow(flowShow);
       z-index: 2;
       position: relative;
     }
+
+    .ink-ruins {
+      position: absolute;
+      z-index: 4;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
   }
   .flower1 {
     position: absolute;
@@ -184,6 +200,29 @@ const [pgRef, show] = usePageShow(flowShow);
       width: 50px;
     }
   }
+  
+
+  .flower-fly {
+    transform-origin: left bottom;
+    animation: flower-fly 3s ease-in-out 1s forwards;
+  }
+
+  @keyframes flower-fly {
+    0% {
+      transform: rotate(0) translate3d(0, 0, 0);
+      opacity: 1;
+    }
+
+    90% {
+      opacity: 0;
+    }
+
+    100% {
+      transform: rotate(180deg) translate3d(-60vw, -6vh, 0);
+      opacity: 0;
+    }
+  }
+
   .flower2 {
     position: absolute;
     z-index: 20;

src/pages/pg4/video.vue

@@ -6,9 +6,12 @@
         playsinline
         src="/video/和平宣言-视频-压缩.mp4"
         preload="preload"
+        autoplay="autoplay"
         controls="controls"
         ref="mediaRef"
         @ended="show = true"
+        @play="pause()"
+        @pause="play()"
       ></video>
       <div class="play-action animate__animated animate__fadeIn" v-if="show">
         <img src="/images/pg4/重播.png" @click="onReplay" alt="" />
@@ -19,21 +22,24 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+  import { ref } from "vue";
+  import { useRouter } from "vue-router";
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
 
-const router = useRouter();
-const mediaRef = ref();
-const show = ref(false);
+  const { play, pause } = useModel('audio');
+  const router = useRouter();
+  const mediaRef = ref();
+  const show = ref(false);
 
-const onReplay = () => {
-  mediaRef.value.play();
-  show.value = false;
-};
+  const onReplay = () => {
+    mediaRef.value.play();
+    show.value = false;
+  };
+
+  const onNext = () => {
+    router.push("/pg4/next");
+  };
 
-const onNext = () => {
-  router.push("/pg4/next");
-};
 </script>
 
 <style lang="less" scoped>