1

src/components/imgLoading.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="section-loading">
+    <div class="section-loading" v-if="progress != 100">
       <div class="section1-wwbox">
         <img src="/img/section1/section1-ww.webp" alt="" class="fadeIn">
         <div class="title2 fadeIn"></div>
@@ -11,18 +11,10 @@
         </div>
       </div>
     </div>
-  <!-- <div class="loading">
-    <div class="section1-wwbox">
-        <div class="icon">
-          <img src="/img/webp/wsicon-sec.webp" alt="" />
-        </div>
-        <p class="text" id="progress-bar"><span>{{ progress }}</span>%</p>
-    </div>
-  </div> -->
 </template>
   
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watchEffect } from "vue";
 import { emitter } from "../emitter.js";
 import imgList from '../utils/loadImg'
 defineOptions({
@@ -31,9 +23,17 @@ defineOptions({
 onMounted(()=>{
   loadImages(imgList)
 })
+const props = defineProps({
+  fullpage: Object,
+});
 const progress = ref(0);
 const framePro = ref(0)
 const imgPro = ref(0)
+watchEffect(() => {
+    if (progress.proxy.$refs.fullpage) {
+      fullpage.value = instance.proxy.$refs.fullpage;
+    }
+  });
 emitter.on("updatePress", (val) => {
     framePro.value = val * 0.7 
     progress.value = Math.round(framePro.value + imgPro.value)

src/pages/section1.vue

@@ -16,12 +16,11 @@
         Gentleness
       </p>
     </div>
-    <loadImg/>
+    <!-- <loadImg/> -->
   </div>
 </template>
 
 <script setup>
-import loadImg from '../components/imgLoading.vue';
 </script>
 
 <style lang="scss" scoped>

src/view/index.vue

@@ -1,5 +1,6 @@
 <template>
   <mouse-tips />
+  <loadImg  :fullpage="fullpage" />
   <nav-guide :fullpage="fullpage" />
   <section1></section1>
   <section2 />
@@ -35,6 +36,7 @@
 </template>
 <script setup>
 import { ref } from "vue";
+import loadImg from '../components/imgLoading.vue';
 import mouseTips from "../components/mouseTips.vue";
 import navGuide from "../components/navGuide.vue";
 import Section1 from "../pages/section1.vue";