feats

src/pages/loading/Flower.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="img-cover"></div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    percent: String
+  })
+</script>
+
+<style lang="less" scoped>
+
+.img-cover {
+  position: relative;
+  width: 20vw;
+  height: 20vw;
+  z-index: 4;
+  background: url(/images/loading/flower2.png);
+  background-size: 100% 100%;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url(/images/loading/flower1.png);
+    background-size: 100% 100%;
+    -webkit-mask: -webkit-linear-gradient(90deg, #000 v-bind(percent), transparent v-bind(percent));
+    -webkit-mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
+    mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
+  }
+}
+</style>

src/pages/loading/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="page pg-bg loading-pg" @click.stop="onClick" @touchmove="onClick">
+  <div class="page pg-bg loading-pg" @click.prevent.stop="onClick" @touchmove.prevent @touchend.stop="onClick">
     <div class="header abs">
       <Bell />
     </div>
     <div class="content">
       <div class="loading-main">
         <div class="main-img">
-          <div class="img-cover">
-          </div>
+          <Flower :percent="percent" />
         </div>
         <div class="txt">
           <LoadingTxt />
@@ -27,17 +26,22 @@
   import Bell from '@/components/Bell.vue';
   import DownArrow from '@/components/DownArrow.vue';
   import LoadingTxt from './LoadingTxt.vue';
+  import Flower from './Flower.vue';
   import { preload } from '@/utils/preload';
   import throttle from '@/utils/throttle';
 
   const emit = defineEmits(['ready']);
 
-  const percent = ref(0);
+  const percent = ref('0%');
   const finished = ref(false);
 
   const onClick = () => {
     if (!finished.value) return;
-    emit('ready');
+
+    const t = setTimeout(() => {
+      emit('ready');
+      clearTimeout(t);
+    }, 100);
   }
 
   const callback = (val) => {
@@ -47,7 +51,7 @@
   }
 
   onMounted(() => {
-    preload(throttle(callback, 100)).then(() => {
+    preload(throttle(callback, 0)).then(() => {
       percent.value = `${100}%`
       finished.value = true;
       // emit('ready');
@@ -85,33 +89,7 @@
         flex: none;
         width: 20vw;
         position: relative;
-
-        .img-cover {
-          position: relative;
-          width: 20vw;
-          height: 20vw;
-          z-index: 4;
-          background: url(/images/loading/flower2.png);
-          background-size: 100% 100%;
-
-          &::before {
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            background: url(/images/loading/flower1.png);
-            background-size: 100% 100%;
-            -webkit-mask: -webkit-linear-gradient(90deg, #000 v-bind(percent), transparent v-bind(percent));
-            -webkit-mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
-            mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
-          }
-        }
-
       }
-
-
     }
   }
 

src/pages/pg1/InMap.vue

@@ -4,13 +4,13 @@
     
     <template v-for="(item, inx) in flowers" :key="item.name">
       <div
-        class="flower animate__animated animate__fadeIn"
+        class="flower animate__animated animate__fadeIn animate__faster"
         :style="{left: item.left, top: item.top, animationDelay: `${(inx+1) * 200}ms`}"
       >
         <div>
           <img
-            class="flower animate__animated animate__fadeIn animate__infinite"
-            :style="{animationDelay: `${2000}ms`, animationDuration: `${2 + inx * 10 % 7}s`}"
+            class="flower star"
+            :style="{animationDelay: `${3000 + inx % 8 * 1500}ms`, animationDuration: `${4}s`}"
             src="/images/logo.png" alt="">
           <!-- <img class="shine" src="/images/pg1/shine.png" alt=""> -->
           <div class="country" :style="getTxtStyle(item)">{{item.name}}</div>
@@ -25,6 +25,8 @@
 
   const flowers = ref([]);
 
+  const rand = () => Math.floor(Math.random() * 14) + 1;
+
   const getTxtStyle = (item) => {
     switch (item.direct) {
       case 'top-left':
@@ -49,18 +51,18 @@
 
     const countries = [
       { name: '中国', pos: [316,184], direct: 'top-left' },
-      { name: '芬兰', pos: [190,79], direct: 'top' },
-      { name: '英国', pos: [112,91], direct: 'top' },
-      { name: '德国', pos: [135,110], direct: 'right' },
-      { name: '瑞士', pos: [113,123], direct: 'left' },
-      { name: '土耳其', pos: [156,153], direct: 'bottom' },
       { name: '韩国', pos: [348,181], direct: 'bottom' },
       { name: '日本', pos: [377,178], direct: 'top-right' },
-      { name: '马来西亚', pos: [280,264], direct: 'right' },
       { name: '新加坡', pos: [295,280], direct: 'bottom' },
+      { name: '马来西亚', pos: [280,264], direct: 'right' },
+      { name: '芬兰', pos: [190,79], direct: 'top' },
       { name: '澳大利亚', pos: [364,351], direct: 'bottom' },
-      { name: '新西兰', pos: [448,401], direct: 'bottom' },
+      { name: '土耳其', pos: [156,153], direct: 'bottom' },
+      { name: '德国', pos: [135,110], direct: 'right' },
       { name: '加拿大', pos: [609,124], direct: 'top' },
+      { name: '新西兰', pos: [448,401], direct: 'bottom' },
+      { name: '英国', pos: [112,91], direct: 'top' },
+      { name: '瑞士', pos: [113,123], direct: 'left' },
       { name: '美国', pos: [663,146], direct: 'bottom' },
     ];
 
@@ -122,5 +124,29 @@
       transform: scale(1.2);
     }
   }
+
+  .star {
+    animation: star 2s ease-in-out infinite alternate;
+  }
+
+  @keyframes star {
+    0% {
+      opacity: 1;
+      // transform: scale(0.8);
+    }
+
+    40% {
+      opacity: 0.2;
+    }
+
+    50% {
+      opacity: 1;
+      // transform: scale(1.2);
+    }
+
+    90%, 100%{
+      opacity: 1;
+    }
+  }
 }
 </style>

src/pages/pg4/video.vue

@@ -2,10 +2,7 @@
   <div class="page pg-bg video-pg">
     <div class="content">
       <div class="title">
-        <div class="txt">六写《和平宣言》</div>
-        <div class="txt" style="font-size: 0.9em">
-          冯亦同用心用情用音向世界发出和平之声
-        </div>
+        <img src="/images/pg4/vid-title.png">
       </div>
       <video
           webkit-playsinline
@@ -94,8 +91,9 @@
     position: relative;
 
     .title {
-      text-align: center;
-      margin-bottom: 24px;
+      width: 60vw;
+      margin: auto;
+      margin-bottom: 80px;
     }
 
     video {

src/utils/preload.js

@@ -23,7 +23,7 @@ export function preload(onProgress) {
 
     const callback = (e, isError) => {
       cursor += 1;
-      console.log('-----loading------>', cursor / total);
+      // console.log('-----loading------>', cursor / total);
       onProgress(cursor / total);
       if (cursor >= total) {
         resolve(resources)

src/utils/throttle.js

@@ -2,6 +2,10 @@
 export default (fn, delay) => {
   let t = null;
   return (...args) => {
+    if (!delay) {
+      return fn(...args);
+    }
+
     if (t) return;
 
     t = setTimeout(() => {