Browse Source

Merge branch 'master' of http://git.ycjcjy.com/H5/wenhua818 into master

lisenzhou 2 years ago
parent
commit
861760f7bf

+ 1
- 0
package.json View File

11
   "dependencies": {
11
   "dependencies": {
12
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
12
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
13
     "v-viewer": "^3.0.10",
13
     "v-viewer": "^3.0.10",
14
+    "viewerjs": "1.9.0",
14
     "vue": "^3.2.37"
15
     "vue": "^3.2.37"
15
   },
16
   },
16
   "devDependencies": {
17
   "devDependencies": {

+ 35
- 0
pnpm-lock.yaml View File

4
   '@vitejs/plugin-vue': ^3.0.3
4
   '@vitejs/plugin-vue': ^3.0.3
5
   '@zjxpcyc/vue-tiny-store': ^1.0.1
5
   '@zjxpcyc/vue-tiny-store': ^1.0.1
6
   less: ^4.1.3
6
   less: ^4.1.3
7
+  v-viewer: ^3.0.10
8
+  viewerjs: 1.9.0
7
   vite: ^3.0.7
9
   vite: ^3.0.7
8
   vue: ^3.2.37
10
   vue: ^3.2.37
9
 
11
 
10
 dependencies:
12
 dependencies:
11
   '@zjxpcyc/vue-tiny-store': registry.npmmirror.com/@zjxpcyc/vue-tiny-store/1.0.1
13
   '@zjxpcyc/vue-tiny-store': registry.npmmirror.com/@zjxpcyc/vue-tiny-store/1.0.1
14
+  v-viewer: registry.npmmirror.com/v-viewer/3.0.10_vue@3.2.37
15
+  viewerjs: registry.npmmirror.com/viewerjs/1.9.0
12
   vue: registry.npmmirror.com/vue/3.2.37
16
   vue: registry.npmmirror.com/vue/3.2.37
13
 
17
 
14
 devDependencies:
18
 devDependencies:
557
       - supports-color
561
       - supports-color
558
     dev: true
562
     dev: true
559
 
563
 
564
+  registry.npmmirror.com/lodash/4.17.21:
565
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz}
566
+    name: lodash
567
+    version: 4.17.21
568
+    dev: false
569
+
560
   registry.npmmirror.com/magic-string/0.25.9:
570
   registry.npmmirror.com/magic-string/0.25.9:
561
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz}
571
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz}
562
     name: magic-string
572
     name: magic-string
738
     version: 2.4.0
748
     version: 2.4.0
739
     dev: true
749
     dev: true
740
 
750
 
751
+  registry.npmmirror.com/v-viewer/3.0.10_vue@3.2.37:
752
+    resolution: {integrity: sha512-ZT5sYYS+Cy4z2TP/PuhqPyiK4NonaZzhkDPfiY9bwa5EjGyusO8R7/k/4c1ptvTzx2nBSV9MvQHl2X3XzhANqw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/v-viewer/-/v-viewer-3.0.10.tgz}
753
+    id: registry.npmmirror.com/v-viewer/3.0.10
754
+    name: v-viewer
755
+    version: 3.0.10
756
+    peerDependencies:
757
+      vue: ^3.0.0
758
+    dependencies:
759
+      lodash: registry.npmmirror.com/lodash/4.17.21
760
+      viewerjs: registry.npmmirror.com/viewerjs/1.10.5
761
+      vue: registry.npmmirror.com/vue/3.2.37
762
+    dev: false
763
+
764
+  registry.npmmirror.com/viewerjs/1.10.5:
765
+    resolution: {integrity: sha512-QwKrmXlSfKg5x4y74F/jicpHIRqBMMfHXyboOxHDi5n4XAaejjpalphPq4/HW6venQAoMiD57HpVwBk0JvqpSA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/viewerjs/-/viewerjs-1.10.5.tgz}
766
+    name: viewerjs
767
+    version: 1.10.5
768
+    dev: false
769
+
770
+  registry.npmmirror.com/viewerjs/1.9.0:
771
+    resolution: {integrity: sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/viewerjs/-/viewerjs-1.9.0.tgz}
772
+    name: viewerjs
773
+    version: 1.9.0
774
+    dev: false
775
+
741
   registry.npmmirror.com/vite/3.0.8_less@4.1.3:
776
   registry.npmmirror.com/vite/3.0.8_less@4.1.3:
742
     resolution: {integrity: sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite/-/vite-3.0.8.tgz}
777
     resolution: {integrity: sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite/-/vite-3.0.8.tgz}
743
     id: registry.npmmirror.com/vite/3.0.8
778
     id: registry.npmmirror.com/vite/3.0.8

BIN
public/audios/10台城.mp3 View File


BIN
public/audios/11十里堤.mp3 View File


BIN
public/audios/11紫金山.mp3 View File


BIN
public/audios/12石头城.mp3 View File


BIN
public/audios/13莫愁湖公园.mp3 View File


BIN
public/audios/14赏心亭.mp3 View File


BIN
public/audios/15长干里.mp3 View File


BIN
public/audios/16大报恩寺.mp3 View File


BIN
public/audios/17凤凰台.mp3 View File


BIN
public/audios/18桃叶渡.mp3 View File


BIN
public/audios/19雨花台.mp3 View File


BIN
public/audios/1南京长江大桥.mp3 View File


BIN
public/audios/20牛首山.mp3 View File


BIN
public/audios/21石臼湖.mp3 View File


BIN
public/audios/22东山.mp3 View File


BIN
public/audios/23瞻园.mp3 View File


BIN
public/audios/24文德桥.mp3 View File


BIN
public/audios/24白鹭洲.mp3 View File


BIN
public/audios/25随园.mp3 View File


BIN
public/audios/26世界文学客厅.mp3 View File


BIN
public/audios/2阅江楼.mp3 View File


BIN
public/audios/3秦淮河.mp3 View File


BIN
public/audios/4乌衣巷.mp3 View File


BIN
public/audios/5燕子矶.mp3 View File


BIN
public/audios/6栖霞山.mp3 View File


BIN
public/audios/7朝天宫.mp3 View File


BIN
public/audios/8梁洲.mp3 View File


BIN
public/audios/9后湖映月.mp3 View File


BIN
public/audios/entrance.mp3 View File


+ 5
- 0
src/App.vue View File

27
   const { onStart, onEnd } = scroll(window.document);
27
   const { onStart, onEnd } = scroll(window.document);
28
 
28
 
29
   onStart(() => {
29
   onStart(() => {
30
+    if (!entranceAudioPlayed.value) {
31
+      entranceAudioRef.value.play()
32
+      entranceAudioPlayed.value = true
33
+    }
34
+
30
     fixedLogoHidden.value = true;
35
     fixedLogoHidden.value = true;
31
   })
36
   })
32
 
37
 

+ 31
- 4
src/components/Loader.vue View File

1
 <template>
1
 <template>
2
   <div 
2
   <div 
3
     class="loader-wrapper"
3
     class="loader-wrapper"
4
-    :class="{ loaded: !loading }"
4
+    :class="{ loaded: !loading, mask: maskReadyRef }"
5
     :style="visibleStyle"
5
     :style="visibleStyle"
6
     @touchmove.prevent
6
     @touchmove.prevent
7
     @mousewheel.prevent
7
     @mousewheel.prevent
16
     <!-- <div class="loader-section section-top"></div>
16
     <!-- <div class="loader-section section-top"></div>
17
     <div class="loader-section section-bottom"></div>     -->
17
     <div class="loader-section section-bottom"></div>     -->
18
     <MaskVue ref="maskRef" @end="onEnd"/>
18
     <MaskVue ref="maskRef" @end="onEnd"/>
19
+    <audio :src="entranceAudio" style="max-width: 1px;max-height: 1px;" ref="entranceAudioRef" ></audio>
19
   </div>
20
   </div>
20
 </template>
21
 </template>
21
 
22
 
23
 import { computed, onMounted, ref, watch } from "vue"
24
 import { computed, onMounted, ref, watch } from "vue"
24
 import MaskVue from "./Mask.vue";
25
 import MaskVue from "./Mask.vue";
25
 
26
 
27
+const entranceAudio = './audios/entrance.mp3';  
28
+
26
 const props = defineProps({
29
 const props = defineProps({
27
   tip: {
30
   tip: {
28
     type: String,
31
     type: String,
37
 
40
 
38
 const elRef = ref();
41
 const elRef = ref();
39
 const maskRef = ref();
42
 const maskRef = ref();
43
+const maskReadyRef = ref(false);
40
 const progressStyle = computed(() => ({ width: `${props.percent}%` }));
44
 const progressStyle = computed(() => ({ width: `${props.percent}%` }));
41
-const visibleStyle = ref({  })
45
+const visibleStyle = ref({})
46
+const entranceAudioRef = ref()
47
+const entranceAudioReady = ref(false)
48
+
42
 const onEnd = () => {
49
 const onEnd = () => {
43
   visibleStyle.value = { display: 'none' }
50
   visibleStyle.value = { display: 'none' }
44
 }
51
 }
48
   e.preventDefault();
55
   e.preventDefault();
49
 }
56
 }
50
 
57
 
58
+const playMask = () => {
59
+  if (maskReadyRef.value && entranceAudioReady.value) {
60
+    entranceAudioRef.value.play();
61
+    maskRef.value.start();
62
+  }
63
+}
64
+
51
 watch(() => props.loading, (newVal, oldVal) => {
65
 watch(() => props.loading, (newVal, oldVal) => {
52
   if (oldVal && !newVal) {
66
   if (oldVal && !newVal) {
53
-    maskRef.value.start();
67
+    maskReadyRef.value = true;
68
+    playMask();
54
   }
69
   }
55
 })
70
 })
56
 
71
 
72
+onMounted(() => {
73
+  const isDev = import.meta.env.DEV
74
+  if (isDev) {
75
+    entranceAudioReady.value = true;
76
+  }
77
+
78
+  document.addEventListener("WeixinJSBridgeReady", function () {
79
+    entranceAudioReady.value = true;
80
+    playMask();
81
+  }, false);
82
+})
83
+
57
 </script>
84
 </script>
58
 
85
 
59
 
86
 
115
     bottom: 0;
142
     bottom: 0;
116
   }
143
   }
117
 
144
 
118
-  &.loaded {
145
+  &.loaded.mask {
119
     // visibility: hidden;
146
     // visibility: hidden;
120
     // transform: translateX(-100%);
147
     // transform: translateX(-100%);
121
     // transition: all 0.3s 1s ease-out;
148
     // transition: all 0.3s 1s ease-out;

+ 1
- 1
src/components/Mask.vue View File

37
 
37
 
38
   const xStart = 60;
38
   const xStart = 60;
39
   const yStart = 90;
39
   const yStart = 90;
40
-  const speed = 20;
40
+  const speed = 10;
41
   const draw = () => {
41
   const draw = () => {
42
     i += speed;
42
     i += speed;
43
     const canv = cvsRef.value;
43
     const canv = cvsRef.value;

+ 26
- 26
src/utils/resources.js View File

105
 // import audio26 from '@/assets/audios/26世界文学客厅.mp3';
105
 // import audio26 from '@/assets/audios/26世界文学客厅.mp3';
106
 
106
 
107
 const audios = [
107
 const audios = [
108
-  "./audios/1南京长江大桥.mp3",
109
-  "./audios/2阅江楼.mp3",
110
-  "./audios/3秦淮河.mp3",
111
-  "./audios/4乌衣巷.mp3",
112
-  "./audios/5燕子矶.mp3",
113
-  "./audios/6栖霞山.mp3",
114
-  "./audios/7朝天宫.mp3",
115
-  "./audios/8梁洲.mp3",
116
-  "./audios/9后湖映月.mp3",
117
-  "./audios/10台城.mp3",
118
-  "./audios/11十里堤.mp3",
119
-  "./audios/12石头城.mp3",
120
-  "./audios/13莫愁湖公园.mp3",
121
-  "./audios/14赏心亭.mp3",
122
-  "./audios/15长干里.mp3",
123
-  "./audios/16大报恩寺.mp3",
124
-  "./audios/17凤凰台.mp3",
125
-  "./audios/18桃叶渡.mp3",
126
-  "./audios/19雨花台.mp3",
127
-  "./audios/20牛首山.mp3",
128
-  "./audios/21石臼湖.mp3",
129
-  "./audios/22东山.mp3",
130
-  "./audios/23瞻园.mp3",
131
-  "./audios/24白鹭洲.mp3",
132
-  "./audios/25随园.mp3",
133
-  "./audios/26世界文学客厅.mp3",
108
+  './audios/1南京长江大桥.mp3',
109
+  './audios/2阅江楼.mp3',
110
+  './audios/3秦淮河.mp3',
111
+  './audios/4乌衣巷.mp3',
112
+  './audios/5燕子矶.mp3',
113
+  './audios/6栖霞山.mp3',
114
+  './audios/7朝天宫.mp3',
115
+  './audios/8梁洲.mp3',
116
+  './audios/9后湖映月.mp3',
117
+  './audios/10台城.mp3',
118
+  './audios/11紫金山.mp3',
119
+  './audios/12石头城.mp3',
120
+  './audios/13莫愁湖公园.mp3',
121
+  './audios/14赏心亭.mp3',
122
+  './audios/15长干里.mp3',
123
+  './audios/16大报恩寺.mp3',
124
+  './audios/17凤凰台.mp3',
125
+  './audios/18桃叶渡.mp3',
126
+  './audios/19雨花台.mp3',
127
+  './audios/20牛首山.mp3',
128
+  './audios/21石臼湖.mp3',
129
+  './audios/22东山.mp3',
130
+  './audios/23瞻园.mp3',
131
+  './audios/24文德桥.mp3',
132
+  './audios/25随园.mp3',
133
+  './audios/26世界文学客厅.mp3',
134
 ];
134
 ];
135
 
135
 
136
 // 预加载资源
136
 // 预加载资源