fullpage-show/src/pages/section3.vue

<template>
  <div class="section section3" data-anchor="section3">
    <canvas id="canvas"></canvas>
    <div class="can-scroll" style="">
      <div style="width: 100%; height: 14000px"></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>
      <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>
      <div class="wwintrobox wwintrobox-shadow hide" id="videocont1-3">
        <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>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { emitter } from "../emitter.js";
import { CanvasPlayer } from "../utils/canvasPlayer.js";
const setting = [
  {
    name: "人鸟兽",
    sectionType: 3,
    className: ["canvas", ".scroll-container", ".section3 .fp-scrollable"],
    canvas: null,
    context: null,
    imageUrl: "./img/canvas/rsy",
    dots: [],
    total: 298,
    CA: [
      {
        name: "#videocont1-1",
        start: 112,
        end: 158,
      },
      {
        name: "#videocont-map",
        start: 112,
        end: 298,
      },
      {
        name: "#videocont1-2",
        start: 130,
        end: 158,
      },
      {
        name: "#videocont1-3",
        start: 162,
        end: 195,
      },
      {
        name: "#videocont1-4",
        start: 196,
        end: 233,
      },
      {
        name: "#videocont1-5",
        start: 245,
        end: 298,
      },
    ],
  },
  {
    name: "金蝉玉叶",
    sectionType: 54,
    className: ["canvas1", ".scroll-container1", ".jinchanyuye .fp-scrollable"],
    canvas: null,
    context: null,
    imageUrl: "./img/canvas/jcyy",
    dots: [],
    total: 288,
    CA: [
      {
        name: "#videocont2-1",
        start: 74,
        end: 116,
      },
      {
        name: "#videocont2-map",
        start: 74,
        end: 116,
      },
      {
        name: "#videocont2-2",
        start: 84,
        end: 116,
      },
      {
        name: "#videocont2-3",
        start: 84,
        end: 116,
      },
      {
        name: "#videocont2-4",
        start: 120,
        end: 181,
      },
      {
        name: "#videocont2-5",
        start: 194,
        end: 242,
      },
    ],
  },
];

const props = defineProps({
  fullpage: Object,
});

const player = new CanvasPlayer("canvas", setting);

const handler = ({ index: currentIndex, nextIndex }) => {
  const { index } = nextIndex;
  if (index === 2) {
    console.log("fullpage", props.fullpage.api);
    props.fullpage.api.setAllowScrolling(false);
    player.enableScroll(3);
  } else {
    props.fullpage.api.setAllowScrolling(true);
  }
};
onMounted(() => {
  emitter.on("onLeave", handler);
  player.init();
  player.on("loaded", () => {
    console.log("所有图片完成");
  });
  window.player = player;
});
onUnmounted(() => {
  emitter.off("onLeave", handler);
});
</script>

<style lang="scss" scoped>
@import "/src/assets/style/index.css";

#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;
}
.section3 {
  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;
  .wwmap {
    position: absolute;
    top: 5vh !important;
    right: 5vw;
    left: auto;
    width: auto !important;
    text-align: right;
  }
}
</style>