fix: save

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>玉润中华--南京博物院特展</title>
+    <title>春华秋实--南京博物院特展</title>
     <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script>
   
   </head>

src/App.vue

@@ -17,6 +17,10 @@ const fullpage = ref();
 onMounted(() => {
   if (isMobile()) {
     document.body.className = "isMobile";
+    setTimeout(() => {
+      console.log("innerHeight", window.innerHeight);
+      console.log("body-height", document.documentElement.clientHeight);
+    },1000);
   }
   watchEffect(() => {
     if (instance.proxy.$refs.fullpage) {

src/assets/style/index.scss

@@ -700,7 +700,8 @@ body {
   top: 0;
   width: 100vw;
   height: 100vh;
-  background: url(/img/webp/ewm-bg.webp) no-repeat center/cover;
+  background: url(/img/canvas/hua-1/0000.webp) no-repeat center/cover;
+  // background: url(/img/webp/ewm-bg.webp) no-repeat center/cover;
   z-index: 999;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -713,6 +714,7 @@ body {
 }
 .section-loading p {
   font-size: 1.4rem;
+  // color: #d09d68;
   color: #d09d68;
 }
 .section-loading .icon {
@@ -750,7 +752,8 @@ body {
   width: 84vw;
   text-align: center;
   font-size: 1.4rem;
-  color: #d09d68;
+  // color: #d09d68;
+  color: white;
 }
 .isMobile .section-loading .icon {
   width: 84vw;

src/components/imgLoading.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="section 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>
+      <!-- <img src="/img/section1/section1-ww.webp" alt="" class="fadeIn" />
+      <div class="title2 fadeIn"></div> -->
       <div>
-        <div class="icon">
+        <!-- <div class="icon">
           <img src="/img/webp/wsicon.webp" alt="" />
-        </div>
+        </div> -->
         <p id="progress-bar">
           <span>{{ progress }}</span
           >%
@@ -40,7 +40,7 @@ const imgPro = ref(0);
 
 watchEffect(() => {
   if (fullpage.value && progress.value == 100) {
-    fullpage.value.api.setAllowScrolling(true);
+    // fullpage.value.api.setAllowScrolling(true);
   }
 });
 emitter.on("updatePress", (val) => {

src/pages/section1 copy.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="section section1" data-anchor="section1">
+    <div class="logo fadeInUp"></div>
+    <div class="title1 fadeInUp">
+      <span>玉润中华线上展览</span>
+    </div>
+    <div class="section1-wwbox">
+      <img src="/img/section1/section1-ww.webp" alt="" class="fadeIn" />
+      <div class="title2 fadeIn"></div>
+    </div>
+    <div class="txt">
+      <p class="txt1">中国玉器的万年史诗图卷</p>
+      <p class="entxt txt2">An Epic of Chinese Jade for 10,000 Years</p>
+      <p class="entxt txt3">
+        Diversity and Unity,Inheritance and Innovation,Inclusiveness and
+        Gentleness
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+// @import "/src/assets/style/keyframes.scss";
+@import "../assets/style/section1.scss";
+.section {
+  position: relative;
+}
+.section1 {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background: url(/img/section1/bg.webp) no-repeat center/cover;
+  position: relative;
+}
+.section1 {
+  .logo {
+    z-index: 1;
+    width: 6rem;
+    height: 6.375rem;
+    margin-bottom: 1.5rem;
+    display: block;
+    background: url(/img/section1/logo.webp) no-repeat center/cover;
+  }
+  .title1 {
+    z-index: 1;
+    font-size: 0.8rem;
+    color: #997946;
+    letter-spacing: 0.5rem;
+    transform: translate3d(0, -3%, 0);
+  }
+  .section1-box {
+    position: relative;
+    height: min(44rem, 70vh);
+    margin: -4rem 0 -6rem;
+    text-align: center;
+    transform: translate3d(0, -3%, 0);
+    img {
+      z-index: 1;
+      position: relative;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  .section1-title {
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url(/img/section1/section1-title.webp) no-repeat center/contain;
+  }
+  .txt {
+    text-align: center;
+    .txt1 {
+      font-size: 2rem;
+      color: #ebeae3;
+      margin-bottom: 1rem;
+      letter-spacing: 0.2rem;
+    }
+    .txt2 {
+      font-size: 1.5rem;
+      color: #d09d68;
+    }
+    .txt3 {
+      font-size: 0.75rem;
+      color: #d09d68;
+      letter-spacing: 0.015rem;
+    }
+  }
+}
+</style>

src/pages/section1.vue

@@ -1,29 +1,115 @@
 <template>
-  <div class="section section1" data-anchor="section1">
-    <div class="logo fadeInUp"></div>
-    <div class="title1 fadeInUp">
-      <span>玉润中华线上展览</span>
-    </div>
-    <div class="section1-wwbox">
-      <img src="/img/section1/section1-ww.webp" alt="" class="fadeIn" />
-      <div class="title2 fadeIn"></div>
-    </div>
-    <div class="txt">
-      <p class="txt1">中国玉器的万年史诗图卷</p>
-      <p class="entxt txt2">An Epic of Chinese Jade for 10,000 Years</p>
-      <p class="entxt txt3">
-        Diversity and Unity,Inheritance and Innovation,Inclusiveness and
-        Gentleness
-      </p>
+  <div class="section section1">
+    <canvas class="canvas" id="canvas-section-1" v-show="isShowCanvas"></canvas>
+    <process-bar :process="process" />
+    <div
+      class="can-scroll scroll-bar-1"
+      style=""
+      @scroll.capture="onPlayerScroll($event, 1)"
+    >
+      <div
+        style="width: 100%; height: 14000px"
+        class="scroll-bar-1-placeholder"
+      ></div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { onMounted, onUnmounted, ref, inject, watchEffect, unref } from "vue";
+import processBar from "../components/processBar.vue";
+import { emitter } from "../emitter.js";
+import { usePlayer } from "../hooks/usecanvasPlayer.js";
+import { isMobile } from "../utils/isMoblie";
+
+const fullpage = inject("fullpage");
+
+const isShowCanvas = ref(false);
+
+const handler = ({ index: currentIndex, nextIndex }) => {
+  const { index } = nextIndex;
+  const { index: pre } = currentIndex;
+  const player = usePlayer();
+  if (index === 0) {
+    fullpage.value.api.setAllowScrolling(false);
+    player.enableScroll(1);
+    if (pre === 1) {
+      console.log("autoplay");
+      player.autoPlay(0, 60);
+    }
+
+    isShowCanvas.value = true;
+  } else {
+    player.unEnableScroll();
+    isShowCanvas.value = false;
+    fullpage.value.api.setAllowScrolling(true);
+  }
+};
+const process = ref(0);
+
+onMounted(() => {
+  if (isMobile()) {
+    var vcon = new window.VConsole();
+  }
+  emitter.on("onLeave", handler);
+
+  emitter.on("loaded", () => {
+    const player = usePlayer();
+    setTimeout(() => {
+      isShowCanvas.value = true;
+      fullpage.value.api.setAllowScrolling(false);
+      player.enableScroll(1);
+      player.autoPlay(0, 16);
+    }, 500);
+    player.on("process", (p) => {
+      process.value = p.process;
+    });
+    player.on("scroll-prev", (type) => {
+      if (type === 2) {
+        fullpage.value.api.moveSectionUp();
+      }
+    });
+    player.on("scroll-next", (type) => {
+      if (type === 2) {
+        fullpage.value.api.moveSectionDown();
+      }
+    });
+  });
+
+  // player.on("loaded", () => {
+  //   console.log("所有图片完成");
+  // });
+  // player.on("loadPress", (p) => {
+  //   // console.log(`加载`, p);
+  //   emitter.emit("updatePress", p);
+  // });
+});
+onUnmounted(() => {
+  emitter.off("onLeave", handler);
+});
+const onPlayerScroll = (event, type) => {
+  // console.log("onPlayerScroll");
+  const player = usePlayer();
+  player.manualScroll(event, type);
+};
+</script>
 
 <style lang="scss" scoped>
-// @import "/src/assets/style/keyframes.scss";
-@import "../assets/style/section1.scss";
+@import "/src/assets/style/index.scss";
+
+.canvas {
+  position: absolute;
+  top: 0;
+  z-index: 0;
+}
+.can-scroll {
+  // background: white;
+  width: 100%;
+  overflow-y: scroll;
+  position: relative;
+  overflow-x: hidden;
+  z-index: 10;
+}
 .section {
   position: relative;
 }
@@ -31,65 +117,21 @@
   display: flex;
   flex-flow: column;
   align-items: center;
+  line-height: 2;
+  color: #997946;
   justify-content: center;
-  background: url(/img/section1/bg.webp) no-repeat center/cover;
-  position: relative;
-}
-.section1 {
-  .logo {
-    z-index: 1;
-    width: 6rem;
-    height: 6.375rem;
-    margin-bottom: 1.5rem;
-    display: block;
-    background: url(/img/section1/logo.webp) no-repeat center/cover;
-  }
-  .title1 {
-    z-index: 1;
-    font-size: 0.8rem;
-    color: #997946;
-    letter-spacing: 0.5rem;
-    transform: translate3d(0, -3%, 0);
-  }
-  .section1-box {
-    position: relative;
-    height: min(44rem, 70vh);
-    margin: -4rem 0 -6rem;
-    text-align: center;
-    transform: translate3d(0, -3%, 0);
-    img {
-      z-index: 1;
-      position: relative;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-  .section1-title {
-    z-index: 2;
+  background: url(/img/canvas/hua-1/0000.webp) no-repeat center/cover;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  .wwmap {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: url(/img/section1/section1-title.webp) no-repeat center/contain;
-  }
-  .txt {
-    text-align: center;
-    .txt1 {
-      font-size: 2rem;
-      color: #ebeae3;
-      margin-bottom: 1rem;
-      letter-spacing: 0.2rem;
-    }
-    .txt2 {
-      font-size: 1.5rem;
-      color: #d09d68;
-    }
-    .txt3 {
-      font-size: 0.75rem;
-      color: #d09d68;
-      letter-spacing: 0.015rem;
-    }
+    top: 5vh !important;
+    right: 5vw;
+    left: auto;
+    width: auto !important;
+    text-align: right;
   }
 }
 </style>

src/pages/section2 copy.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="section section2">
+    <ul>
+      <li class="fadeInUp">
+        <h3>
+          “玉，石之美有五德：润泽以温，仁之方也；䚡理自外，可以知中，义之方也；其声舒扬，专以远闻，智之方也；不挠而折，勇之方也；锐廉而不忮，洁之方也。”
+        </h3>
+        <p>——汉 许慎《说文解字》</p>
+      </li>
+      <li class="fadeInUp">
+        <h3>
+          “在全世界文化体系里，唯有华夏文明有尊玉爱玉的传统，且8000多年未曾中断。其中不仅有深厚的华夏文化背景，更隐喻着中国文化发展的客观规律，研究和推广玉文化，是关系到中华民族生死存亡的大事。”
+        </h3>
+        <p>——费孝通</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@import "/src/assets/style/section2.css";
+.section {
+  position: relative;
+}
+.section2 {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  line-height: 2;
+  color: #997946;
+  justify-content: center;
+  background: url(/img/section2/bg.webp) no-repeat center/cover;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  ul {
+    li {
+      list-style-type: none;
+      position: relative;
+      &:first-child:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        background: url(/img/section2/line.webp) no-repeat center/contain;
+      }
+      h3 {
+        font-size: 1.5rem;
+        padding: 0 var(--wall-margin-left3);
+        padding-top: 5.875rem;
+      }
+      p {
+        text-align: right;
+        font-size: 1.5rem;
+        padding: 0 var(--wall-margin-left3);
+        padding-bottom: 5.875rem;
+      }
+    }
+  }
+}
+</style>

src/pages/section2.vue

@@ -1,26 +1,110 @@
 <template>
   <div class="section section2">
-    <ul>
-      <li class="fadeInUp">
-        <h3>
-          “玉，石之美有五德：润泽以温，仁之方也；䚡理自外，可以知中，义之方也；其声舒扬，专以远闻，智之方也；不挠而折，勇之方也；锐廉而不忮，洁之方也。”
-        </h3>
-        <p>——汉 许慎《说文解字》</p>
-      </li>
-      <li class="fadeInUp">
-        <h3>
-          “在全世界文化体系里，唯有华夏文明有尊玉爱玉的传统，且8000多年未曾中断。其中不仅有深厚的华夏文化背景，更隐喻着中国文化发展的客观规律，研究和推广玉文化，是关系到中华民族生死存亡的大事。”
-        </h3>
-        <p>——费孝通</p>
-      </li>
-    </ul>
+    <canvas class="canvas" id="canvas-section-2" v-show="isShowCanvas"></canvas>
+    <process-bar :process="process" />
+    <div
+      class="can-scroll scroll-bar-2"
+      style=""
+      @scroll.capture="onPlayerScroll($event, 2)"
+    >
+      <div
+        style="width: 100%; height: 14000px"
+        class="scroll-bar-2-placeholder"
+      ></div>
+
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { onMounted, onUnmounted, ref, inject, watchEffect, unref } from "vue";
+import processBar from "../components/processBar.vue";
+import { emitter } from "../emitter.js";
+import { usePlayer } from "../hooks/usecanvasPlayer.js";
+import { isMobile } from "../utils/isMoblie";
+
+const fullpage = inject("fullpage");
+
+const isShowCanvas = ref(false);
+
+const handler = ({ index: currentIndex, nextIndex }) => {
+  const { index } = nextIndex;
+  const { index: pre } = currentIndex;
+  const player = usePlayer();
+  if (index === 1) {
+    fullpage.value.api.setAllowScrolling(false);
+    player.enableScroll(2);
+    if (pre === 1) {
+      console.log("autoplay");
+      player.autoPlay(0, 60);
+    }
+
+    isShowCanvas.value = true;
+  } else {
+    player.unEnableScroll();
+    isShowCanvas.value = false;
+    fullpage.value.api.setAllowScrolling(true);
+  }
+};
+const process = ref(0);
+
+onMounted(() => {
+  if (isMobile()) {
+    var vcon = new window.VConsole();
+  }
+  emitter.on("onLeave", handler);
+
+  emitter.on("loaded", () => {
+    const player = usePlayer();
+    player.on("process", (p) => {
+      process.value = p.process;
+    });
+    player.on("scroll-prev", (type) => {
+      if (type === 2) {
+        fullpage.value.api.moveSectionUp();
+      }
+    });
+    player.on("scroll-next", (type) => {
+      if (type === 2) {
+        fullpage.value.api.moveSectionDown();
+      }
+    });
+  });
+
+  // player.on("loaded", () => {
+  //   console.log("所有图片完成");
+  // });
+  // player.on("loadPress", (p) => {
+  //   // console.log(`加载`, p);
+  //   emitter.emit("updatePress", p);
+  // });
+});
+onUnmounted(() => {
+  emitter.off("onLeave", handler);
+});
+const onPlayerScroll = (event, type) => {
+  // console.log("onPlayerScroll");
+  const player = usePlayer();
+  player.manualScroll(event, type);
+};
+</script>
 
 <style lang="scss" scoped>
-@import "/src/assets/style/section2.css";
+@import "/src/assets/style/index.scss";
+
+.canvas {
+  position: absolute;
+  top: 0;
+  z-index: 0;
+}
+.can-scroll {
+  // background: white;
+  width: 100%;
+  overflow-y: scroll;
+  position: relative;
+  overflow-x: hidden;
+  z-index: 10;
+}
 .section {
   position: relative;
 }
@@ -31,36 +115,18 @@
   line-height: 2;
   color: #997946;
   justify-content: center;
-  background: url(/img/section2/bg.webp) no-repeat center/cover;
+  // background: url(/img/section2/bg.webp) no-repeat center/cover;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
-  ul {
-    li {
-      list-style-type: none;
-      position: relative;
-      &:first-child:after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 2px;
-        bottom: 0;
-        left: 0;
-        background: url(/img/section2/line.webp) no-repeat center/contain;
-      }
-      h3 {
-        font-size: 1.5rem;
-        padding: 0 var(--wall-margin-left3);
-        padding-top: 5.875rem;
-      }
-      p {
-        text-align: right;
-        font-size: 1.5rem;
-        padding: 0 var(--wall-margin-left3);
-        padding-bottom: 5.875rem;
-      }
-    }
+  .wwmap {
+    position: absolute;
+    top: 5vh !important;
+    right: 5vw;
+    left: auto;
+    width: auto !important;
+    text-align: right;
   }
 }
 </style>

src/utils/canvasPlayer.js

@@ -1,5 +1,5 @@
 import { isMobile } from "./isMoblie";
-import { throttle, debounce, clamp } from "./fn";
+import { throttle, debounce, clamp, aspectFit } from "./fn";
 import gsap from "gsap";
 import mitt from "mitt";
 class Mitt {
@@ -57,8 +57,8 @@ export class CanvasPlayer extends Mitt {
     });
     this.vw = this.canvas.width = window.innerWidth;
     this.vh = this.canvas.height = window.innerHeight;
-    this.imageW = isMobile() ? 750 : 1920;
-    this.imageH = isMobile() ? 1334 : 1080;
+    this.imageW = isMobile() ? 1170 : 1920;
+    this.imageH = isMobile() ? 2532 : 1080;
     this.loadEvent();
   }
   loadImage(url) {
@@ -441,7 +441,31 @@ export class CanvasPlayer extends Mitt {
     );
     if (frameItem && frameItem.index <= frameItem.total) {
       this.context.clearRect(0, 0, this.vw, this.vh);
-      this.context.drawImage(frameItem.image, 0, 0, this.vw, this.vh);
+      if (isMobile()) {
+        var hRatio = this.vw / this.imageW;
+        var vRatio = this.vh / this.imageH;
+        var ratio = Math.min(hRatio, vRatio);
+        var centerShift_x = (this.vw - this.imageW * ratio) / 2;
+        var centerShift_y = (this.vh - this.imageH * ratio) / 2;
+        // this.context.drawImage(
+        //   frameItem.image,
+        //   0,
+        //   0,
+        //   this.imageW,
+        //   this.imageH,
+        //   centerShift_x,
+        //   centerShift_y,
+        //   this.imageW * ratio,
+        //   this.imageH * ratio
+        // );
+        var ratio =
+          frameItem.image.naturalWidth / frameItem.image.naturalHeight;
+        var width = this.vw;
+        var height = width / ratio;
+        this.context.drawImage(frameItem.image, 0, 0, width, height);
+      } else {
+        this.context.drawImage(frameItem.image, 0, 0, this.vw, this.vh);
+      }
     }
   }
 

src/utils/fn.js

@@ -60,3 +60,24 @@ export function clamp(num, min, max) {
 export function range(start, end) {
   return new Array(end - start).fill().map((d, i) => i + start);
 }
+
+export const aspectFit = (
+  imageWidth,
+  imageHeight,
+  canvasWidth,
+  canvasHeight
+) => {
+  const imageRate = imageWidth / imageHeight;
+  const canvasRate = canvasWidth / canvasHeight;
+  let [dx, dy, dw, dh] = [];
+  if (imageRate >= canvasRate) {
+    dw = canvasWidth;
+    dh = canvasWidth / imageRate;
+  } else {
+    dh = canvasHeight;
+    dw = canvasHeight * imageRate;
+  }
+  dx = (canvasWidth - dw) / 2;
+  dy = (canvasHeight - dh) / 2;
+  return [dx, dy, dw, dh];
+};

src/utils/loadImg.js

@@ -1,71 +1,71 @@
 export default [
-    '/img/chapterunit/chapter-bg.webp',
-    '/img/chapterunit/unit-bg.webp',
-    '/img/webp/navicon-active.webp',
-    '/img/webp/nav-bg.webp',
-    '/img/webp/navicon.webp',
-    '/img/webp/ewm-bg.webp',
+    // '/img/chapterunit/chapter-bg.webp',
+    // '/img/chapterunit/unit-bg.webp',
+    // '/img/webp/navicon-active.webp',
+    // '/img/webp/nav-bg.webp',
+    // '/img/webp/navicon.webp',
+    // '/img/webp/ewm-bg.webp',
+    // // '/img/webp/section1/logo.webp',
+    // '/img/webp/xnzt-btn.webp',
+    // '/img/infoicon.png',
+    // '/img/webp/section1/section1-title.webp',
+    // '/img/webp/section1-title.webp',
+    // '/img/close-btn.png',
+    // '/img/nomusic.png',
+    // '/img/music.png',
+    // '/img/webp/wwfirst-bg.webp',
+    // '/img/webp/wsicon-sec.webp',
+    // // '/img/webp/section2/line.webp',
+    // '/img/webp/section1/bg.webp',
+    // '/img/webp/section1/bg.webp',
     // '/img/webp/section1/logo.webp',
-    '/img/webp/xnzt-btn.webp',
-    '/img/infoicon.png',
-    '/img/webp/section1/section1-title.webp',
-    '/img/webp/section1-title.webp',
-    '/img/close-btn.png',
-    '/img/nomusic.png',
-    '/img/music.png',
-    '/img/webp/wwfirst-bg.webp',
-    '/img/webp/wsicon-sec.webp',
-    // '/img/webp/section2/line.webp',
-    '/img/webp/section1/bg.webp',
-    '/img/webp/section1/bg.webp',
-    '/img/webp/section1/logo.webp',
-    '/img/webp/section2/bg.webp',
-    '/img/section1/section1-ww.webp',
-    '/img/section1/bg.webp',
-    '/img/section1/logo.webp',
-    '/img/section1/section1-title.webp',
-    '/img/section2/bg.webp',
-    '/img/section2/line.webp',
-    '/img/map/map-rnsys.webp',
-    '/img/chapterunit/unit-bg.webp',
-    '/img/map/map-k.webp',
-    '/img/webp/jue-1.webp',
-    '/img/map/map-yr.webp',
-    '/img/webp/yuren-1.webp',
-    '/img/map/map-yl.webp',
-    '/img/webp/yulong-1.webp',
-    '/img/map/map-yzl.webp',
-    '/img/webp/yuzhulong-1.webp',
-    '/img/map/map-kfb.webp',
-    '/img/webp/kefubi-1.webp',
-    '/img/map/map-kffsjz.webp',
-    '/img/webp/kefufushijiezong-1.webp',
-    '/img/map/map-ysm.webp',
-    '/img/webp/yushenmian-1.webp',
-    '/img/webp/yushenmian-line1.webp',
-    '/img/map/map-yz.webp',
-    '/img/webp/yazhang-1.webp',
-    '/img/map/map-yg.webp',
-    '/img/webp/yuge-1.webp',
-    '/img/map/map-whlp.webp',
-    '/img/webp/wuhuanglianpei-1.webp',
-    '/img/map/map-swczyp.webp',
-    '/img/webp/yuzupei-1.webp',
-    '/img/map/map-tdxryds.webp',
-    '/img/webp/tdxryds-1.webp',
-    '/img/map/map-yzun.webp',
-    '/img/webp/yuzun-1.webp',
-    '/img/map/map-yljbxd.webp',
-    '/img/webp/yljbdd-1.webp',
-    '/img/map/map-yljbxd.webp',
-    '/img/webp/yljbdd-1.webp',
-    '/img/map/map-cstydhg.webp',
-    '/img/webp/cstythg-1.webp',
-    '/img/webp/qbyteh-1.webp',
-    '/img/map/map-qbyteh.webp',
-    '/img/map/map-tshdzb.webp',
-    '/img/webp/tshdzb-1.webp',
-    '/img/webp/ewm-yy.webp',
-    '/img/webp/ewm-yrzh.webp',
-    '/img/webp/ewm-wx.webp',
+    // '/img/webp/section2/bg.webp',
+    // '/img/section1/section1-ww.webp',
+    // '/img/section1/bg.webp',
+    // '/img/section1/logo.webp',
+    // '/img/section1/section1-title.webp',
+    // '/img/section2/bg.webp',
+    // '/img/section2/line.webp',
+    // '/img/map/map-rnsys.webp',
+    // '/img/chapterunit/unit-bg.webp',
+    // '/img/map/map-k.webp',
+    // '/img/webp/jue-1.webp',
+    // '/img/map/map-yr.webp',
+    // '/img/webp/yuren-1.webp',
+    // '/img/map/map-yl.webp',
+    // '/img/webp/yulong-1.webp',
+    // '/img/map/map-yzl.webp',
+    // '/img/webp/yuzhulong-1.webp',
+    // '/img/map/map-kfb.webp',
+    // '/img/webp/kefubi-1.webp',
+    // '/img/map/map-kffsjz.webp',
+    // '/img/webp/kefufushijiezong-1.webp',
+    // '/img/map/map-ysm.webp',
+    // '/img/webp/yushenmian-1.webp',
+    // '/img/webp/yushenmian-line1.webp',
+    // '/img/map/map-yz.webp',
+    // '/img/webp/yazhang-1.webp',
+    // '/img/map/map-yg.webp',
+    // '/img/webp/yuge-1.webp',
+    // '/img/map/map-whlp.webp',
+    // '/img/webp/wuhuanglianpei-1.webp',
+    // '/img/map/map-swczyp.webp',
+    // '/img/webp/yuzupei-1.webp',
+    // '/img/map/map-tdxryds.webp',
+    // '/img/webp/tdxryds-1.webp',
+    // '/img/map/map-yzun.webp',
+    // '/img/webp/yuzun-1.webp',
+    // '/img/map/map-yljbxd.webp',
+    // '/img/webp/yljbdd-1.webp',
+    // '/img/map/map-yljbxd.webp',
+    // '/img/webp/yljbdd-1.webp',
+    // '/img/map/map-cstydhg.webp',
+    // '/img/webp/cstythg-1.webp',
+    // '/img/webp/qbyteh-1.webp',
+    // '/img/map/map-qbyteh.webp',
+    // '/img/map/map-tshdzb.webp',
+    // '/img/webp/tshdzb-1.webp',
+    // '/img/webp/ewm-yy.webp',
+    // '/img/webp/ewm-yrzh.webp',
+    // '/img/webp/ewm-wx.webp',
 ] 

src/view/index.vue

@@ -4,6 +4,7 @@
   <loadImg />
   <section1 />
   <section2 />
+  <!-- <section2 />
   <section3 />
   <section4 />
   <section5 />
@@ -32,7 +33,7 @@
   <section28 />
   <section29 />
   <section30 />
-  <section31 />
+  <section31 /> -->
 </template>
 <script setup>
 import loadImg from "../components/imgLoading.vue";
@@ -79,11 +80,11 @@ import { isMobile } from "../utils/isMoblie";
 const setting = [
   {
     name: "人鸟兽",
-    sectionType: 3,
-    canvasId: "canvas-section-3",
-    imageUrl: isMobile() ? "./img/canvas/hua" : "./img/canvas/pc1",
+    sectionType: 1,
+    canvasId: "canvas-section-1",
+    imageUrl: isMobile() ? "./img/canvas/hua-1" : "./img/canvas/hua-1",
     // total: isMobile() ? 900 : 300,
-    total: isMobile() ? 940 : 331,
+    total: isMobile() ? 403 : 403,
   },
   // {
   //   name: "金蝉玉叶",