feats

src/pages/pg3/flower.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="flower">
-    <img src="/images/pg3/线轮廓.png" alt="">
-    <Flower1 class="bg-lv1" />
-  </div>
-</template>
-
-<script setup>
-import Flower1 from './flower1.vue';
-</script>
-
-<style lang="less" scoped>
-.flower {
-  position: relative;
-  width: 64vw;
-  height: 64vw;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  & > img {
-    z-index: 0;
-    position: absolute;
-    display: block;
-    height: 100%;
-    right: 0;
-  }
-
-  // background-image: url(./images/pg3/线轮廓.png);
-  // background-size: 100% 100%;
-  // background-repeat: no-repeat;
-  // background-position-x: 16.67vw;
-
-  .bg-lv1 {
-    flex: none;
-    width: 56vw;
-    height: 56vw;
-    z-index: 1;
-  }
-}
-</style>

src/pages/pg3/flower1.vue

@@ -1,56 +0,0 @@
-<template>
-<div class="flower1">
-  <div class="fpart-1 abs">
-    <img src="/images/pg3/组1.png" alt="">
-  </div>
-  <div class="fpart-2 abs">
-    <img src="/images/pg3/组2.png" alt="">
-  </div>
-  <div class="fpart-3 abs">
-    <img src="/images/pg3/组3.png" alt="">
-  </div>
-  <div class="fpart-4 abs">
-    <img src="/images/pg3/组4.png" alt="">
-  </div>
-</div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="less" scoped>
-.flower1 {
-  position: relative;
-  background-image: url(/images/pg3/花朵.png);
-  background-size: 100% 100%;
-
-  & > div {
-    width: 50%;
-    height: 50%;
-    box-sizing: border-box;
-    padding: 8px;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  .fpart-1 {
-    top: 0;
-    left: 25%;
-  }
-  .fpart-2 {
-    top: 25%;
-    right: 0;
-  }
-  .fpart-3 {
-    left: 25%;
-    bottom: 0;
-  }
-  .fpart-4 {
-    left: 0;
-    top: 25%;
-  }
-}
-</style>

src/pages/pg3/index.vue

@@ -26,7 +26,7 @@
 
     <div class="btn-box">
       <Btn class="btn" @click="showPerson = true">人物采访</Btn>
-      <Btn class="btn">视频</Btn>
+      <Btn class="btn" @click="onVideo">视频</Btn>
     </div>
 
     <Persons v-if="showPerson" @cancel="showPerson = false" />
@@ -35,14 +35,20 @@
 
 <script setup>
   import { onBeforeUnmount, onMounted, ref } from 'vue';
+  import { useRouter } from 'vue-router';
   import Bell from '@/components/Bell.vue';
   import Btn from '@/components/Btn.vue';
   import Animate from '@/components/Animate.vue';
   import Persons from './Persons.vue';
   import usePageShow from '../usePageShow';
 
+  const router = useRouter();
   const [pgRef, show] = usePageShow(0.3);
   const showPerson = ref(false);
+
+  const onVideo = () => {
+    router.push('/pg4')
+  }
 </script>
 
 

src/pages/pg4/Rule.vue

@@ -33,11 +33,12 @@
   h3 {
     font-size: 18px;
     font-size: 700;
+    margin-bottom: 0;
   }
 
   ul {
     text-align: left;
-    margin-top: 0;
+    margin-top: 10px;
   }
 }
 </style>

src/utils/preload.js

@@ -1,4 +1,4 @@
-import { resources } from "./resources";
+import { resources, videos, audios } from "./resources";
 
 export function preload(onProgress) {
 
@@ -18,7 +18,7 @@ export function preload(onProgress) {
   }, [])
 
   return new Promise((resolve, reject) => {
-    const total = images.length;
+    const total = images.length + videos.length + audios.length;
     let cursor = 0;
 
     const callback = (e, isError) => {
@@ -29,11 +29,49 @@ export function preload(onProgress) {
       }
     }
 
+    // 先加载图片
     for (let src of images) {
       const img = document.createElement('img');
       img.onload = e => callback(e, false);
       img.onerror = e => callback(e, true);
       img.src = src;
     }
+
+    // 再加载视频
+    for (let src of videos) {
+      let vid = document.createElement('video');
+      const cb = () => {
+        callback();
+        vid.pause();
+        vid.removeEventListener('progress', cb);
+        vid.removeEventListener('error', cb);
+        vid = null;
+        console.log('-----加载视频----')
+      }
+      vid.addEventListener('progress', cb);
+      vid.addEventListener('error', cb);
+      vid.muted = true;
+      vid.autoplay = true;
+      vid.src = src;
+    }
+
+    // 再加载音频
+    for (let src of audios) {
+      let aud = document.createElement('audio');
+      const cb = () => {
+        callback();
+        aud.pause();
+        aud.removeEventListener('progress', cb);
+        aud.removeEventListener('error', cb);
+        aud = null;
+        console.log('-----加载音频----')
+      }
+      aud.addEventListener('progress', cb);
+      aud.addEventListener('error', cb);
+      aud.muted = true;
+      aud.autoplay = true;
+      aud.src = src;
+    }
+
   })
 }

src/utils/resources.js

@@ -1,10 +1,11 @@
 
 export const videos = [
-  './video/first.mp4',
+  './video/紫金草走向世界010.mp4',
+  './video/和平宣言-视频-压缩.mp4',
 ]
 
 export const audios = [
-  // './audio/audio.mp3'
+  './audio/audio.mp3'
 ]
 
 // 预加载资源