feats

src/pages/Language.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="page firstpg" ref="el">
-    <video src="/video/first.mp4" loop="loop" autoplay="autoplay" preload="preload"></video>
+    <video
+      src="/video/first.mp4"
+      loop="loop"
+      autoplay="autoplay"
+      preload="preload"
+      webkit-playsinline
+      playsinline
+    ></video>
     <div class="i18n-change">
       <div class="btn" @click="onSelect('zh')">中文版</div>
       <div class="btn" @click="onSelect('en')">English</div>

src/pages/Loading.vue

@@ -36,10 +36,10 @@
   }
 
   const onProcess = (val) => {
-    console.log('----loading->', val);
     
     const p = Number(val * 100).toFixed(2);
-    if (p >= 1) {
+    console.log('----loading->', p);
+    if (p >= 100) {
       percent.value = '100%';
     } else {
       percent.value = `${p}%`;
@@ -107,6 +107,16 @@
           background-repeat: no-repeat;
           left: calc(v-bind(percent) - 12px);
           top: -11px;
+          animation: loader-cricle 2s linear infinite;
+        }
+      }
+
+      @keyframes loader-cricle {
+        from {
+          transform: rotate(0);
+        }
+        to {
+          transform: rotate(360deg);
         }
       }
 

src/pages/bk1/pg1.vue

@@ -2,6 +2,8 @@
   <div class="page pg-bg bk-pg">
     <div class="bk-pd">
       <video
+        webkit-playsinline
+        playsinline
         src="/video/紫金草走向世界010.mp4"
         poster="/images/bk1/poster.png"
         controls="controls"

src/pages/pg2/index.vue

@@ -13,7 +13,7 @@
         comp="img"
         name="animate__fadeInDown"
         delay="600ms"
-        src="/images/pg2/story.png"
+        src="./images/pg2/story.png"
         alt
         :ready="show"
       />

src/pages/pg3/Map.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="map-box">
+    <img class="map-img" src="/images/pg3/map.png" alt="">
+    <img
+      v-for="(pos, inx) in poses"
+      :key="inx"
+      :style="{left: `${(pos.left - 0.02) * 100}%`, top: `${(pos.top - 0.02) * 100}%`, animationDelay: `${pos.delay}ms` }"
+      class="flower-loc abs animate__slow animate__infinite animate__animated animate__flash"
+      src="/images/logo.png"
+      alt=""
+    >
+  </div>
+</template>
+
+<script setup>
+  const getRand = () => Math.floor(Math.random() * 1000)
+
+  const poses = [
+    {
+      left: 0.125,
+      top: 0.1622464898595944,
+      delay: getRand(),
+    },
+    {
+      left: 0.21942446043165467,
+      top: 0.13260530421216848,
+      delay: getRand(),
+    },
+    {
+      left: 0.15197841726618705,
+      top: 0.20124804992199688,
+      delay: getRand(),
+    },
+    {
+      left: 0.125,
+      top: 0.22932917316692666,
+      delay: getRand(),
+    },
+    {
+      left: 0.17985611510791366,
+      top: 0.2948517940717629,
+      delay: getRand(),
+    },
+    {
+      left: 0.3776978417266187,
+      top: 0.36349453978159124,
+      delay: getRand(),
+    },
+    {
+      left: 0.4199640287769784,
+      top: 0.35725429017160687,
+      delay: getRand(),
+    },
+    {
+      left: 0.4550359712230216,
+      top: 0.3494539781591264,
+      delay: getRand(),
+    },
+    {
+      left: 0.7455035971223022,
+      top: 0.23244929797191888,
+      delay: getRand(),
+    },
+    {
+      left: 0.8138489208633094,
+      top: 0.2792511700468019,
+      delay: getRand(),
+    },
+    {
+      left: 0.3327338129496403,
+      top: 0.5382215288611545,
+      delay: getRand(),
+    },
+    {
+      left: 0.35251798561151076,
+      top: 0.5694227769110765,
+      delay: getRand(),
+    },
+    {
+      left: 0.43884892086330934,
+      top: 0.7207488299531981,
+      delay: getRand(),
+    },
+    {
+      left: 0.545863309352518,
+      top: 0.8361934477379095,
+      delay: getRand(),
+    }
+  ];
+</script>
+
+<style lang="less" scoped>
+.map-box {
+  position: relative;
+  width: 100%;
+  
+  .flower-loc {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

src/pages/pg3/index.vue

@@ -21,7 +21,7 @@
     </div>
 
     <div class="global-map">
-      <img src="/images/pg3/map.png" alt="">
+      <Map />
     </div>
 
     <div class="btn-box">
@@ -40,6 +40,7 @@
   import Btn from '@/components/Btn.vue';
   import Animate from '@/components/Animate.vue';
   import Persons from './Persons.vue';
+  import Map from './Map.vue';
   import usePageShow from '../usePageShow';
 
   const router = useRouter();

src/pages/pg4/Map.vue

@@ -62,6 +62,12 @@
         const point = new BMap.Point(target[0], target[1]);
         const marker = new BMap.Marker(point, { icon });
         map.addOverlay(marker);
+        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
+
+        // map.getOverlays().forEach((overlay) => {
+        //   console.log('------overlay-------', overlay)
+        //   overlay.setAnimation(BMAP_ANIMATION_BOUNCE);
+        // });
       });
 
     // window._AMapSecurityConfig = {

src/pages/pg4/video.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="page pg-bg video-pg">
     <video
+      webkit-playsinline
+      playsinline
       src="/video/和平宣言-视频-压缩.mp4"
       preload="preload"
       controls="controls"

src/utils/resources.js

@@ -1,15 +1,19 @@
 
 export const videos = [
-  './video/紫金草走向世界010.mp4',
-  './video/和平宣言-视频-压缩.mp4',
+  // './video/紫金草走向世界010.mp4',
+  // './video/和平宣言-视频-压缩.mp4',
 ]
 
 export const audios = [
-  './audio/audio.mp3'
+  // './audio/audio.mp3'
 ]
 
 // 预加载资源
 export const resources = [
+  { image: './images/BG.jpg', },
+  { image: './images/loading/main.png', },
+  { image: './images/loading/loader.png', },
+  { image: './images/loading/allrights.png', },
   { image: './images/pg1/bell.png', },
   { image: './images/pg1/earth.png', },
   { image: './images/pg1/honour.png', },