<template>
  <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>
      <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";

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";
@import "/src/assets/style/reset.css";
@import "/src/assets/style/section1.css";
.can-scroll {
  // background: white;
  width: 100%;
  overflow-y: scroll;
}
.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>
