Yansen 2 years ago
parent
commit
9cee44008c

BIN
public/images/pg4/vid-title.png View File


+ 35
- 0
src/pages/loading/Flower.vue View File

1
+<template>
2
+  <div class="img-cover"></div>
3
+</template>
4
+
5
+<script setup>
6
+  const props = defineProps({
7
+    percent: String
8
+  })
9
+</script>
10
+
11
+<style lang="less" scoped>
12
+
13
+.img-cover {
14
+  position: relative;
15
+  width: 20vw;
16
+  height: 20vw;
17
+  z-index: 4;
18
+  background: url(/images/loading/flower2.png);
19
+  background-size: 100% 100%;
20
+
21
+  &::before {
22
+    content: '';
23
+    position: absolute;
24
+    width: 100%;
25
+    height: 100%;
26
+    top: 0;
27
+    left: 0;
28
+    background: url(/images/loading/flower1.png);
29
+    background-size: 100% 100%;
30
+    -webkit-mask: -webkit-linear-gradient(90deg, #000 v-bind(percent), transparent v-bind(percent));
31
+    -webkit-mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
32
+    mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
33
+  }
34
+}
35
+</style>

+ 10
- 32
src/pages/loading/index.vue View File

1
 <template>
1
 <template>
2
-  <div class="page pg-bg loading-pg" @click.stop="onClick" @touchmove="onClick">
2
+  <div class="page pg-bg loading-pg" @click.prevent.stop="onClick" @touchmove.prevent @touchend.stop="onClick">
3
     <div class="header abs">
3
     <div class="header abs">
4
       <Bell />
4
       <Bell />
5
     </div>
5
     </div>
6
     <div class="content">
6
     <div class="content">
7
       <div class="loading-main">
7
       <div class="loading-main">
8
         <div class="main-img">
8
         <div class="main-img">
9
-          <div class="img-cover">
10
-          </div>
9
+          <Flower :percent="percent" />
11
         </div>
10
         </div>
12
         <div class="txt">
11
         <div class="txt">
13
           <LoadingTxt />
12
           <LoadingTxt />
27
   import Bell from '@/components/Bell.vue';
26
   import Bell from '@/components/Bell.vue';
28
   import DownArrow from '@/components/DownArrow.vue';
27
   import DownArrow from '@/components/DownArrow.vue';
29
   import LoadingTxt from './LoadingTxt.vue';
28
   import LoadingTxt from './LoadingTxt.vue';
29
+  import Flower from './Flower.vue';
30
   import { preload } from '@/utils/preload';
30
   import { preload } from '@/utils/preload';
31
   import throttle from '@/utils/throttle';
31
   import throttle from '@/utils/throttle';
32
 
32
 
33
   const emit = defineEmits(['ready']);
33
   const emit = defineEmits(['ready']);
34
 
34
 
35
-  const percent = ref(0);
35
+  const percent = ref('0%');
36
   const finished = ref(false);
36
   const finished = ref(false);
37
 
37
 
38
   const onClick = () => {
38
   const onClick = () => {
39
     if (!finished.value) return;
39
     if (!finished.value) return;
40
-    emit('ready');
40
+
41
+    const t = setTimeout(() => {
42
+      emit('ready');
43
+      clearTimeout(t);
44
+    }, 100);
41
   }
45
   }
42
 
46
 
43
   const callback = (val) => {
47
   const callback = (val) => {
47
   }
51
   }
48
 
52
 
49
   onMounted(() => {
53
   onMounted(() => {
50
-    preload(throttle(callback, 100)).then(() => {
54
+    preload(throttle(callback, 0)).then(() => {
51
       percent.value = `${100}%`
55
       percent.value = `${100}%`
52
       finished.value = true;
56
       finished.value = true;
53
       // emit('ready');
57
       // emit('ready');
85
         flex: none;
89
         flex: none;
86
         width: 20vw;
90
         width: 20vw;
87
         position: relative;
91
         position: relative;
88
-
89
-        .img-cover {
90
-          position: relative;
91
-          width: 20vw;
92
-          height: 20vw;
93
-          z-index: 4;
94
-          background: url(/images/loading/flower2.png);
95
-          background-size: 100% 100%;
96
-
97
-          &::before {
98
-            content: '';
99
-            position: absolute;
100
-            width: 100%;
101
-            height: 100%;
102
-            top: 0;
103
-            left: 0;
104
-            background: url(/images/loading/flower1.png);
105
-            background-size: 100% 100%;
106
-            -webkit-mask: -webkit-linear-gradient(90deg, #000 v-bind(percent), transparent v-bind(percent));
107
-            -webkit-mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
108
-            mask: linear-gradient(0, #000 v-bind(percent), transparent v-bind(percent));
109
-          }
110
-        }
111
-
112
       }
92
       }
113
-
114
-
115
     }
93
     }
116
   }
94
   }
117
 
95
 

+ 36
- 10
src/pages/pg1/InMap.vue View File

4
     
4
     
5
     <template v-for="(item, inx) in flowers" :key="item.name">
5
     <template v-for="(item, inx) in flowers" :key="item.name">
6
       <div
6
       <div
7
-        class="flower animate__animated animate__fadeIn"
7
+        class="flower animate__animated animate__fadeIn animate__faster"
8
         :style="{left: item.left, top: item.top, animationDelay: `${(inx+1) * 200}ms`}"
8
         :style="{left: item.left, top: item.top, animationDelay: `${(inx+1) * 200}ms`}"
9
       >
9
       >
10
         <div>
10
         <div>
11
           <img
11
           <img
12
-            class="flower animate__animated animate__fadeIn animate__infinite"
13
-            :style="{animationDelay: `${2000}ms`, animationDuration: `${2 + inx * 10 % 7}s`}"
12
+            class="flower star"
13
+            :style="{animationDelay: `${3000 + inx % 8 * 1500}ms`, animationDuration: `${4}s`}"
14
             src="/images/logo.png" alt="">
14
             src="/images/logo.png" alt="">
15
           <!-- <img class="shine" src="/images/pg1/shine.png" alt=""> -->
15
           <!-- <img class="shine" src="/images/pg1/shine.png" alt=""> -->
16
           <div class="country" :style="getTxtStyle(item)">{{item.name}}</div>
16
           <div class="country" :style="getTxtStyle(item)">{{item.name}}</div>
25
 
25
 
26
   const flowers = ref([]);
26
   const flowers = ref([]);
27
 
27
 
28
+  const rand = () => Math.floor(Math.random() * 14) + 1;
29
+
28
   const getTxtStyle = (item) => {
30
   const getTxtStyle = (item) => {
29
     switch (item.direct) {
31
     switch (item.direct) {
30
       case 'top-left':
32
       case 'top-left':
49
 
51
 
50
     const countries = [
52
     const countries = [
51
       { name: '中国', pos: [316,184], direct: 'top-left' },
53
       { name: '中国', pos: [316,184], direct: 'top-left' },
52
-      { name: '芬兰', pos: [190,79], direct: 'top' },
53
-      { name: '英国', pos: [112,91], direct: 'top' },
54
-      { name: '德国', pos: [135,110], direct: 'right' },
55
-      { name: '瑞士', pos: [113,123], direct: 'left' },
56
-      { name: '土耳其', pos: [156,153], direct: 'bottom' },
57
       { name: '韩国', pos: [348,181], direct: 'bottom' },
54
       { name: '韩国', pos: [348,181], direct: 'bottom' },
58
       { name: '日本', pos: [377,178], direct: 'top-right' },
55
       { name: '日本', pos: [377,178], direct: 'top-right' },
59
-      { name: '马来西亚', pos: [280,264], direct: 'right' },
60
       { name: '新加坡', pos: [295,280], direct: 'bottom' },
56
       { name: '新加坡', pos: [295,280], direct: 'bottom' },
57
+      { name: '马来西亚', pos: [280,264], direct: 'right' },
58
+      { name: '芬兰', pos: [190,79], direct: 'top' },
61
       { name: '澳大利亚', pos: [364,351], direct: 'bottom' },
59
       { name: '澳大利亚', pos: [364,351], direct: 'bottom' },
62
-      { name: '新西兰', pos: [448,401], direct: 'bottom' },
60
+      { name: '土耳其', pos: [156,153], direct: 'bottom' },
61
+      { name: '德国', pos: [135,110], direct: 'right' },
63
       { name: '加拿大', pos: [609,124], direct: 'top' },
62
       { name: '加拿大', pos: [609,124], direct: 'top' },
63
+      { name: '新西兰', pos: [448,401], direct: 'bottom' },
64
+      { name: '英国', pos: [112,91], direct: 'top' },
65
+      { name: '瑞士', pos: [113,123], direct: 'left' },
64
       { name: '美国', pos: [663,146], direct: 'bottom' },
66
       { name: '美国', pos: [663,146], direct: 'bottom' },
65
     ];
67
     ];
66
 
68
 
122
       transform: scale(1.2);
124
       transform: scale(1.2);
123
     }
125
     }
124
   }
126
   }
127
+
128
+  .star {
129
+    animation: star 2s ease-in-out infinite alternate;
130
+  }
131
+
132
+  @keyframes star {
133
+    0% {
134
+      opacity: 1;
135
+      // transform: scale(0.8);
136
+    }
137
+
138
+    40% {
139
+      opacity: 0.2;
140
+    }
141
+
142
+    50% {
143
+      opacity: 1;
144
+      // transform: scale(1.2);
145
+    }
146
+
147
+    90%, 100%{
148
+      opacity: 1;
149
+    }
150
+  }
125
 }
151
 }
126
 </style>
152
 </style>

+ 4
- 6
src/pages/pg4/video.vue View File

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

+ 1
- 1
src/utils/preload.js View File

23
 
23
 
24
     const callback = (e, isError) => {
24
     const callback = (e, isError) => {
25
       cursor += 1;
25
       cursor += 1;
26
-      console.log('-----loading------>', cursor / total);
26
+      // console.log('-----loading------>', cursor / total);
27
       onProgress(cursor / total);
27
       onProgress(cursor / total);
28
       if (cursor >= total) {
28
       if (cursor >= total) {
29
         resolve(resources)
29
         resolve(resources)

+ 4
- 0
src/utils/throttle.js View File

2
 export default (fn, delay) => {
2
 export default (fn, delay) => {
3
   let t = null;
3
   let t = null;
4
   return (...args) => {
4
   return (...args) => {
5
+    if (!delay) {
6
+      return fn(...args);
7
+    }
8
+
5
     if (t) return;
9
     if (t) return;
6
 
10
 
7
     t = setTimeout(() => {
11
     t = setTimeout(() => {