feats

src/pages/pg2-2/Bell.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="bell-box" @click="toggle">
+    <div>
+      <div class="center circle abs">
+        <div class="inner" :class="{'circle-ani': animate}" />
+      </div>
+      <div class="center circle abs">
+        <div class="outer" :class="{'circle-ani': animate}" />
+      </div>
+      <div class="center bell-img">
+        <img :class="{'bell-ani': animate}" src="/images/pg1/bell.png" alt="">
+      </div>
+    </div>
+    <audio ref="el" src="/audio/audio2.mp3" style="max-width: 0" loop preload="auto"></audio>
+  </div>
+</template>
+
+<script setup>
+  import { computed, onMounted, ref } from 'vue';
+  import { useModel } from '@zjxpcyc/vue-tiny-store';
+
+  const { pause } = useModel('audio');
+  const animate = ref(false);
+
+  const el = ref();
+
+  const toggle = () => {
+    if (el.value.paused) {
+      el.value.play();
+      animate.value = true;
+    } else {
+      el.value.pause();
+      animate.value = false;
+    }
+  }
+
+  onMounted(() => {
+    // 停掉原来的
+    pause();
+
+    //
+    el.value.play();
+  });
+
+</script>
+
+<style lang="less" scoped>
+.bell-box {
+  @size: 10vw;
+
+  width: @size;
+  height: @size;
+
+  & > div {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .circle {
+    top: 2vw;
+    left: 0;
+    z-index: 0;
+
+    & > div {
+      flex: none;
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      opacity: 0;
+    }
+
+    .circle-ani {
+      animation-name: bell-circle-show;
+    }
+
+    .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;
+    }
+
+    @keyframes bell-circle-show {
+      0% {
+        opacity: 0;
+        transform: scale(1);
+      }
+
+      50% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+        transform: scale(2.4);
+      }
+    }
+  }
+
+  .bell-img {
+    position: relative;
+    z-index: 2;
+
+    .bell-ani {
+      animation-name: bell-shake;
+    }
+
+    img {
+      flex: none;
+      width: 80%;
+
+      transform-origin: top center;
+      animation-duration: 1.4s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
+    }
+  }
+
+  @keyframes bell-shake {
+    from {
+      transform: rotate(15deg);
+    }
+    to {
+      transform: rotate(-15deg);
+    }
+  }
+}
+</style>

src/pages/pg4/video.vue

@@ -8,6 +8,7 @@
         preload="preload"
         autoplay="autoplay"
         :controls="controls"
+        poster="/images/pg4/vid-poster.png"
         ref="mediaRef"
         @ended="show = true"
         @play="pause()"

src/utils/resources.js

@@ -66,7 +66,7 @@ export const resources = [
   { image: './images/pg3/btn.png' },
   { image: './images/pg3/jing.png' },
   { image: './images/pg3/left-bg.png' },
-  { image: './images/pg3/map.png' },
+  { image: './images/pg3/map.gif' },
   { image: './images/pg3/nan.png' },
   { image: './images/pg3/right-bg.png' },
   { image: './images/pg3/stele.png' },
@@ -77,6 +77,7 @@ export const resources = [
   { image: './images/pg4/planting.png' },
   { image: './images/pg4/播撒种子.png' },
   { image: './images/pg4/重播.png' },
+  { image: './images/pg4/vid-poster.png' },
 
   { image: './images/pg4/plant/中国-.png' },
   { image: './images/pg4/plant/中国.png' },