fullpage-show/src/view/index.vue

<template>
  <mouse-tips />
  <nav-guide :fullpage="fullpage" />
  <loadImg :fullpage="fullpage" />
  <section1 />
  <section2 />
  <section3 :fullpage="fullpage" />
  <section4 />
  <section5 />
  <section6 />
  <section7 />
  <section8 />
  <section9 />
  <section10 />
  <section11 />
  <section12 />
  <section13 />
  <section14 :fullpage="fullpage" />
  <section15 />
  <section16 />
  <section17 />
  <section18 />
  <section19 />
  <section20 />
  <section21 />
  <section22 />
  <section23 />
  <section24 />
  <section25 />
  <section26 />
  <section27 />
  <section28 />
  <section29 />
  <section30 />
  <section31 />
</template>
<script setup>
import loadImg from "../components/imgLoading.vue";
import mouseTips from "../components/mouseTips.vue";
import navGuide from "../components/navGuide.vue";

import Section1 from "../pages/section1.vue";
import Section2 from "../pages/section2.vue";
import Section3 from "../pages/section3.vue";
import Section4 from "../pages/section4.vue";
import Section5 from "../pages/section5.vue";
import Section6 from "../pages/section6.vue";
import Section7 from "../pages/section7.vue";
import Section8 from "../pages/section8.vue";
import Section9 from "../pages/section9.vue";
import Section10 from "../pages/section10.vue";
import Section11 from "../pages/section11.vue";
import Section12 from "../pages/section12.vue";
import Section13 from "../pages/section13.vue";
import Section14 from "../pages/section14.vue";
import Section15 from "../pages/section15.vue";
import Section16 from "../pages/section16.vue";
import Section17 from "../pages/section17.vue";
import Section18 from "../pages/section18.vue";
import Section19 from "../pages/section19.vue";
import Section20 from "../pages/section20.vue";
import Section21 from "../pages/section21.vue";
import Section22 from "../pages/section22.vue";
import Section23 from "../pages/section23.vue";
import Section24 from "../pages/section24.vue";
import Section25 from "../pages/section25.vue";
import Section26 from "../pages/section26.vue";
import Section27 from "../pages/section27.vue";
import Section28 from "../pages/section28.vue";
import Section29 from "../pages/section29.vue";
import Section30 from "../pages/section30.vue";
import Section31 from "../pages/section31.vue";

import { onMounted } from "vue";
import { useCanvasPlayer } from "../hooks/usecanvasPlayer";
import { emitter } from "../emitter.js";
import { isMobile } from "../utils/isMoblie";

const setting = [
  {
    name: "人鸟兽",
    sectionType: 3,
    canvasId: "canvas-section-3",
    imageUrl: isMobile() ? "./img/canvas/hua" : "./img/canvas/pc1",
    // total: isMobile() ? 900 : 300,
    total: isMobile() ? 940 : 331,
  },
  {
    name: "金蝉玉叶",
    canvasId: "canvas-section-14",
    sectionType: 14,
    imageUrl: isMobile() ? "./img/canvas/tt" : "./img/canvas/rsy",
    dots: [],
    total: isMobile() ? 300 : 297,
  },
];

defineOptions({
  name: "View",
});
const props = defineProps({
  fullpage: Object,
});

const player = useCanvasPlayer(setting);

onMounted(() => {
  player.mount();
  player.on("loaded", () => {
    console.log("所有图片完成");
    emitter.emit("loaded");
  });
  player.on("loadPress", (p) => {
    // console.log("loadPress", p);
    emitter.emit("updatePress", p);
  });
});
</script>