|
|
@@ -1,8 +1,9 @@
|
|
1
|
1
|
<template>
|
|
2
|
2
|
<div
|
|
3
|
3
|
class="loader-wrapper"
|
|
4
|
|
- :class="{ loaded: !loading, mask: maskReadyRef }"
|
|
|
4
|
+ :class="{ loaded: !loading, mask: maskStatusRef > 1 }"
|
|
5
|
5
|
:style="visibleStyle"
|
|
|
6
|
+ @click="playMask"
|
|
6
|
7
|
@touchmove.prevent
|
|
7
|
8
|
@mousewheel.prevent
|
|
8
|
9
|
>
|
|
|
@@ -12,6 +13,7 @@
|
|
12
|
13
|
<p class="progress">
|
|
13
|
14
|
<div :style="progressStyle"></div>
|
|
14
|
15
|
</p>
|
|
|
16
|
+ <p class="enter" v-if="maskStatusRef > 0">点击进入</p>
|
|
15
|
17
|
</div>
|
|
16
|
18
|
<!-- <div class="loader-section section-top"></div>
|
|
17
|
19
|
<div class="loader-section section-bottom"></div> -->
|
|
|
@@ -21,7 +23,7 @@
|
|
21
|
23
|
</template>
|
|
22
|
24
|
|
|
23
|
25
|
<script setup>
|
|
24
|
|
-import { computed, onMounted, ref, watch } from "vue"
|
|
|
26
|
+import { computed, ref, watch } from "vue"
|
|
25
|
27
|
import MaskVue from "./Mask.vue";
|
|
26
|
28
|
|
|
27
|
29
|
const entranceAudio = './audios/entrance.mp3';
|
|
|
@@ -40,11 +42,10 @@ const props = defineProps({
|
|
40
|
42
|
|
|
41
|
43
|
const elRef = ref();
|
|
42
|
44
|
const maskRef = ref();
|
|
43
|
|
-const maskReadyRef = ref(false);
|
|
|
45
|
+const maskStatusRef = ref(0);
|
|
44
|
46
|
const progressStyle = computed(() => ({ width: `${props.percent}%` }));
|
|
45
|
47
|
const visibleStyle = ref({})
|
|
46
|
48
|
const entranceAudioRef = ref()
|
|
47
|
|
-const entranceAudioReady = ref(false)
|
|
48
|
49
|
|
|
49
|
50
|
const onEnd = () => {
|
|
50
|
51
|
visibleStyle.value = { display: 'none' }
|
|
|
@@ -56,31 +57,17 @@ const onTouchMove = (e) => {
|
|
56
|
57
|
}
|
|
57
|
58
|
|
|
58
|
59
|
const playMask = () => {
|
|
59
|
|
- if (maskReadyRef.value && entranceAudioReady.value) {
|
|
60
|
|
- entranceAudioRef.value.play();
|
|
61
|
|
- maskRef.value.start();
|
|
62
|
|
- }
|
|
|
60
|
+ maskStatusRef.value = 2
|
|
|
61
|
+ entranceAudioRef.value.play();
|
|
|
62
|
+ maskRef.value.start();
|
|
63
|
63
|
}
|
|
64
|
64
|
|
|
65
|
65
|
watch(() => props.loading, (newVal, oldVal) => {
|
|
66
|
66
|
if (oldVal && !newVal) {
|
|
67
|
|
- maskReadyRef.value = true;
|
|
68
|
|
- playMask();
|
|
|
67
|
+ maskStatusRef.value = 1
|
|
69
|
68
|
}
|
|
70
|
69
|
})
|
|
71
|
70
|
|
|
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
|
|
-
|
|
84
|
71
|
</script>
|
|
85
|
72
|
|
|
86
|
73
|
|
|
|
@@ -124,6 +111,11 @@ onMounted(() => {
|
|
124
|
111
|
border-radius: 50%;
|
|
125
|
112
|
}
|
|
126
|
113
|
}
|
|
|
114
|
+
|
|
|
115
|
+ .enter {
|
|
|
116
|
+ margin-top: 2em;
|
|
|
117
|
+ font-family: "STXINGKA";
|
|
|
118
|
+ }
|
|
127
|
119
|
}
|
|
128
|
120
|
|
|
129
|
121
|
.loader-section {
|
