feat: 保存

src/App.vue

@@ -35,6 +35,7 @@ const options = ref({
   // anchors: ["section1", "page2", "page3"],
   controlArrows: true,
   scrollOverflow: false,
+  normalScrollElements: ".can-scroll",
   // scrollBar: true,
   // sectionsColor: ["#41b883", "#ff5f45", "#0798ec"],
   onLeave: onLeave,

src/pages/section3.vue

@@ -1,88 +1,79 @@
 <template>
-  <div class="section section3" data-anchor="section3">
-    <div
-      class="slimScrollDiv"
-      style="position: relative; width: 100%; height: 919px"
-    >
-      <div
-        class="fp-scrollable"
-        style="width: auto; height: 919px"
-      >
-        <div class="wwmap hide active" id="videocont-map">
-          <img src="/img/map/map-rnsys.webp" alt="" />
-        </div>
-        <div class="wwintrobox wwintrobox-shadow hide active" id="videocont1-1">
-          <div class="wwtitle">人鸟兽玉饰</div>
-          <div class="wwintro">
-            原本湖绿色<b>玉质</b>在埋藏千年后<br />已焕发出带有<b>柔和光泽</b>的<br /><b
-              >白色斑纹</b
-            >。
-          </div>
-        </div>
-
-        <div class="wwinfobox hide active" id="videocont1-2">
-          <div class="wwinfo">良渚文化早期</div>
-          <div class="wwinfo">南京博物院藏</div>
-          <div class="wwinfo">
-            端饰长5.5厘米，宽1.3厘米，厚0.2厘米-0.4厘米，孔径0.3厘米
-          </div>
-          <div class="wwinfo">1991年江苏省昆山市赵陵山遗址出土</div>
+  <div class="section section3 " data-anchor="section3">
+    <div class="can-scroll" style="">
+      <!-- <div style="width: 100%; height: 1400px; background: red"></div> -->
+      <div class="wwmap hide active" id="videocont-map">
+        <img src="/img/map/map-rnsys.webp" alt="" />
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide active" id="videocont1-1">
+        <div class="wwtitle">人鸟兽玉饰</div>
+        <div class="wwintro">
+          原本湖绿色<b>玉质</b>在埋藏千年后<br />已焕发出带有<b>柔和光泽</b>的<br /><b
+            >白色斑纹</b
+          >。
         </div>
-        <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-3">
-          <div class="wwtitle2">飞鸟</div>
-          <div class="wwintro3">
-            飞鸟悠闲驻足于一位跪状显贵者长长的发冠上；鸟的身下，人双手举托起的四足短尾小兽奋力向上攀爬。鸟，遨游云端，上下翻飞，先民深信它们是通天的生灵；
-          </div>
+      </div>
+      <div class="wwinfobox hide active" id="videocont1-2">
+        <div class="wwinfo">良渚文化早期</div>
+        <div class="wwinfo">南京博物院藏</div>
+        <div class="wwinfo">
+          端饰长5.5厘米，宽1.3厘米，厚0.2厘米-0.4厘米，孔径0.3厘米
         </div>
-        <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-4">
-          <div class="wwtitle2">兽</div>
-          <div class="wwintro3">兽，奔跑原野，下穿三泉，是大地的主人；</div>
+        <div class="wwinfo">1991年江苏省昆山市赵陵山遗址出土</div>
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-3">
+        <div class="wwtitle2">飞鸟</div>
+        <div class="wwintro3">
+          飞鸟悠闲驻足于一位跪状显贵者长长的发冠上；鸟的身下，人双手举托起的四足短尾小兽奋力向上攀爬。鸟，遨游云端，上下翻飞，先民深信它们是通天的生灵；
         </div>
-        <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-5">
-          <div class="wwtitle2">人</div>
-          <div class="wwintro3">
-            人，立于天地之间，与生俱来地拥有智慧而承担起沟通天地的桥梁。
-          </div>
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-4">
+        <div class="wwtitle2">兽</div>
+        <div class="wwintro3">兽，奔跑原野，下穿三泉，是大地的主人；</div>
+      </div>
+      <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-5">
+        <div class="wwtitle2">人</div>
+        <div class="wwintro3">
+          人，立于天地之间，与生俱来地拥有智慧而承担起沟通天地的桥梁。
         </div>
       </div>
-      <div
-        class="slimScrollBar"
-        style="
-          background: rgb(0, 0, 0);
-          width: 10px;
-          position: absolute;
-          top: 444px;
-          opacity: 0.4;
-          display: block;
-          border-radius: 7px;
-          z-index: 99;
-          right: 1px;
-          height: 30px;
-        "
-      ></div>
-      <div
-        class="slimScrollRail"
-        style="
-          width: 10px;
-          height: 100%;
-          position: absolute;
-          top: 0px;
-          display: none;
-          border-radius: 7px;
-          background: rgb(51, 51, 51);
-          opacity: 0.2;
-          z-index: 90;
-          right: 1px;
-        "
-      ></div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+import { emitter } from "../emitter.js";
+
+const props = defineProps({
+  fullpage: Object,
+});
+
+const handler = ({ index: currentIndex, nextIndex }) => {
+  const { index } = nextIndex;
+  if (index === 2) {
+    console.log("fullpage", props.fullpage.api);
+    // props.fullpage.api.setAllowScrolling(false);
+    // props.fullpage.api.setAutoScrolling(false);
+  } else {
+    props.fullpage.api.setAllowScrolling(true);
+  }
+};
+onMounted(() => {
+  emitter.on("onLeave", handler);
+});
+onUnmounted(() => {
+  emitter.off("onLeave", handler);
+});
+</script>
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.css";
+.can-scroll {
+  // background: white;
+  width: 100%;
+  overflow-y: scroll;
+}
 .section {
   position: relative;
 }

src/utils/canvasPlayer.js

@@ -0,0 +1,7 @@
+class canvasPlayer {
+  constructor(canvasId) {
+    this.canvas = document.getElementById(canvasId);
+  }
+  proload() {}
+  render() {}
+}

src/view/index.vue

@@ -3,7 +3,7 @@
   <nav-guide :fullpage="fullpage" />
   <section1></section1>
   <section2 />
-  <section3 />
+  <section3 :fullpage="fullpage" />
   <section4 />
   <section5 />
   <section6 />
@@ -74,5 +74,4 @@ defineOptions({
 const props = defineProps({
   fullpage: Object,
 });
-
 </script>