|
|
@@ -1,39 +1,106 @@
|
|
|
<template>
|
|
|
- <div class="section section14 chapter">
|
|
|
- <div class="box">
|
|
|
- <div class="chapter-num">第二章</div>
|
|
|
- <div class="chapter-title">玉成中国</div>
|
|
|
- <div class="chapter-intro">
|
|
|
- <p>
|
|
|
- 在历史的洪流中，用玉加速了中华文明融合、聚变直至统一。玉礼器成为“最早的中国”形成过程中，不可或缺的政治信物。
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 夏文明崛起时，玉礼器是早期中国形成的重要标志。商与西周，玉礼制一脉相承，奠定了华夏礼仪的基石。东周至秦汉，个体的理性思维开始觉醒，玉器，逐步塑造、确立起中华民族独特的气质涵养与精神品格。
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <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) {
|
|
|
- console.log("hey");
|
|
|
- }
|
|
|
- if (pre === 12) {
|
|
|
- console.log("order");
|
|
|
+ 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("onLeave", handler);
|
|
|
+ emitter.on("loaded", () => {
|
|
|
+ const player = usePlayer();
|
|
|
+ player.on("process", (p) => {
|
|
|
+ process.value = p.process;
|
|
|
+ });
|
|
|
+ player.on("scroll-prev", () => {
|
|
|
+ console.warn("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>
|
gemercheung