feat: 保存

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+public/img/canvas

src/components/navGuide.vue

@@ -77,7 +77,6 @@ onUnmounted(() => {
 
 const handleSlideTo = (index) => {
   if (props.fullpage) {
-    // console.log("moveTO", index);
     props.fullpage.api.moveTo(index);
   }
 };

src/pages/section14-frame.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="section section14">
+    <canvas
+      class="canvas"
+      id="canvas-section-14"
+      v-show="isShowCanvas"
+    ></canvas>
+    <process-bar :process="process" />
+    <div class="can-scroll scroll-bar-14" @scroll="onPlayerScroll($event, 14)">
+      <div
+        style="width: 100%; height: 14000px"
+        class="scroll-bar-14-placeholder"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, 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 props = defineProps({
+  fullpage: Object,
+});
+
+const isShowCanvas = ref(false);
+
+const handler = ({ index: currentIndex, nextIndex }) => {
+  const { index } = nextIndex;
+  const { index: pre } = currentIndex;
+  const player = usePlayer();
+  if (index === 13) {
+    props.fullpage.api.setAllowScrolling(false);
+    player.enableScroll(14);
+    if (pre === 12) {
+      console.log("autoplay");
+      player.autoPlay(0, 60);
+    }
+    isShowCanvas.value = true;
+  } else {
+    player.unEnableScroll();
+    isShowCanvas.value = false;
+    props.fullpage.api.setAllowScrolling(true);
+  }
+};
+const process = ref(0);
+
+onMounted(() => {
+  emitter.on("onLeave", handler);
+
+  emitter.on("loaded", () => {
+    const player = usePlayer();
+    player.on("process", (p) => {
+      process.value = p.process;
+    });
+    player.on("scroll-prev", () => {
+      props.fullpage.api.moveSectionUp();
+    });
+    player.on("scroll-next", () => {
+      console.warn("scroll-next");
+      props.fullpage.api.moveSectionDown();
+    });
+  });
+});
+onUnmounted(() => {
+  emitter.off("onLeave", handler);
+});
+const onPlayerScroll = (event, type) => {
+  const player = usePlayer();
+  player.manualScroll(event, type);
+};
+</script>
+
+<style lang="scss" scoped>
+@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;
+}
+.section14 {
+  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;
+}
+</style>

src/pages/section14.vue

@@ -56,13 +56,15 @@ onMounted(() => {
     player.on("process", (p) => {
       process.value = p.process;
     });
-    player.on("scroll-prev", () => {
-      console.warn("scroll-prev");
-      props.fullpage.api.moveSectionUp();
+    player.on("scroll-prev", (type) => {
+      if (type === 14) {
+        props.fullpage.api.moveSectionUp();
+      }
     });
-    player.on("scroll-next", () => {
-      console.warn("scroll-next");
-      props.fullpage.api.moveSectionDown();
+    player.on("scroll-next", (type) => {
+      if (type === 14) {
+        props.fullpage.api.moveSectionDown();
+      }
     });
   });
 });

src/pages/section3.vue

@@ -96,13 +96,15 @@ onMounted(() => {
     player.on("process", (p) => {
       process.value = p.process;
     });
-    player.on("scroll-prev", () => {
-      console.warn("scroll-prev");
-      props.fullpage.api.moveSectionUp();
+    player.on("scroll-prev", (type) => {
+      if (type === 3) {
+        props.fullpage.api.moveSectionUp();
+      }
     });
     player.on("scroll-next", () => {
-      console.warn("scroll-next");
-      props.fullpage.api.moveSectionDown();
+      if (type === 3) {
+        props.fullpage.api.moveSectionDown();
+      }
     });
   });
 

src/pages/section5.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="section section5  unit" >
+  <div class="section section5 unit">
     <div class="box">
-          <div class="unit-num">第一单元</div>
-          <div class="unit-title">万年</div>
-          <div class="unit-intro">
-            <p>
-              遥远的洪荒时代，自然的力量巨大而神秘，华夏先民笃信万物皆有灵。在生存探索中，他们发现坚韧而温润的玉不仅是工具，更是可与天地对话的灵物。
-            </p>
-            <p>
-              在东北乌苏里江畔的小南山，燃起了华夏大地成熟用玉的星火。由此，玉器承载起中华民族对美的追求、对信仰的寄托，这是中华民族万年用玉的文明曙光。
-            </p>
-          </div>
-        </div>
+      <div class="unit-num">第一单元</div>
+      <div class="unit-title">万年</div>
+      <div class="unit-intro">
+        <p>
+          遥远的洪荒时代，自然的力量巨大而神秘，华夏先民笃信万物皆有灵。在生存探索中，他们发现坚韧而温润的玉不仅是工具，更是可与天地对话的灵物。
+        </p>
+        <p>
+          在东北乌苏里江畔的小南山，燃起了华夏大地成熟用玉的星火。由此，玉器承载起中华民族对美的追求、对信仰的寄托，这是中华民族万年用玉的文明曙光。
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -29,16 +29,9 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: column;
-          flex-flow: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
+  flex-flow: column;
+  justify-content: center;
 }
 .unit-num {
   color: #d09d68;

src/utils/canvasPlayer.js

@@ -111,8 +111,15 @@ export class CanvasPlayer extends Mitt {
                 this.context.drawImage(image, 0, 0, this.vw, this.vh);
 
               this.frames.push(frame);
-              const cu = key + framekey * item.total;
+
+              const prev_base = Array.from(
+                this.setting.slice(0, framekey)
+              ).reduce((pre, current) => pre + current["total"], 0);
+
+              const cu = key + prev_base;
+
               const process = Math.floor(Number(cu / total) * 100);
+
               this.emit("loadPress", process);
             }
           });
@@ -439,14 +446,14 @@ export class CanvasPlayer extends Mitt {
   }
 
   scrollPre = debounce(() => {
-    this.emit("scroll-prev");
-    console.log("scroll-prev");
+    this.emit("scroll-prev", this.currentType);
+    console.warn("scroll-prev", this.currentType);
     this.reset();
-  }, 500);
+  }, 1000);
 
   scrollNext = debounce(() => {
-    this.emit("scroll-next");
-    console.log("scroll-next");
-  }, 500);
+    this.emit("scroll-next", this.currentType);
+    console.warn("scroll-next", this.currentType);
+  }, 1000);
   update() {}
 }

src/view/index.vue

@@ -81,17 +81,17 @@ const setting = [
     name: "人鸟兽",
     sectionType: 3,
     canvasId: "canvas-section-3",
-    imageUrl: isMobile() ? "./img/canvas/pc1_mo" : "./img/canvas/pc1",
+    imageUrl: isMobile() ? "./img/canvas/hua" : "./img/canvas/pc1",
     // total: isMobile() ? 900 : 300,
-    total: isMobile() ? 900 : 331,
+    total: isMobile() ? 940 : 331,
   },
   {
     name: "金蝉玉叶",
     canvasId: "canvas-section-14",
     sectionType: 14,
-    imageUrl: "./img/canvas/jcyy",
+    imageUrl: isMobile() ? "./img/canvas/tt" : "./img/canvas/rsy",
     dots: [],
-    total: 288,
+    total: isMobile() ? 300 : 297,
   },
 ];
 
@@ -111,6 +111,7 @@ onMounted(() => {
     emitter.emit("loaded");
   });
   player.on("loadPress", (p) => {
+    // console.log("loadPress", p);
     emitter.emit("updatePress", p);
   });
 });