<template>
  <!-- <child1 slot="skeleton" /> -->
  <div class="home">
    <Boutique class="home-item wow animate__animated animate__fadeIn" ref="Boutique" />
    <Virtural class="home-item" ref="Virtural" />
    <CulturalRelic class="home-item" ref="CulturalRelic" />
    <Display class="home-item" ref="Display" />
    <MuseumMap class="home-item" ref="MuseumMap" />

    <!-- <vue-lazy-component>
      <Boutique class="home-item wow" ref="Boutique" />
    </vue-lazy-component>
    <vue-lazy-component>
      <Virtural class="home-item" ref="Virtural" />
    </vue-lazy-component>
    <vue-lazy-component>
      <CulturalRelic class="home-item" ref="CulturalRelic" />
    </vue-lazy-component>
    <vue-lazy-component>
      <Display class="home-item" ref="Display" />
    </vue-lazy-component>
    <vue-lazy-component>
      <MuseumMap class="home-item" ref="MuseumMap" />
    </vue-lazy-component> -->
  </div>
</template>

<script>
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default {
  components: {
    // NavBar,
    // Footer,
    MuseumMap,
    Boutique,
    Virtural,
    Display,
    CulturalRelic,
  },
  name: "Home",
  data() {
    return {
      boutiqueShow: true,
      virtualShow: true,
      crShow: true,
      displayShow: true,
      mapShow: true,
      currentScroll: "",
    };
  },
  mounted() {
    // window.addEventListener("scroll", this.handleScrollbox, true);
    this.$nextTick(() => {
      this.$wow.init();
    });
  },
  methods: {
    //   handleScrollbox() {
    //     this.currentScroll = window.pageYOffset; //表示当前滚动的位置
    //     if (this.currentScroll >= this.$refs.testref.offsetTop - 600) {
    //       //当前滚动位置到达testref的时候，显示div（100作为调整用）
    //       this.testShow = true;
    //     }
    //     if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) {
    //       this.testShow2 = true;
    //     }
    //     if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) {
    //       this.testShow3 = true;
    //     }
    //     if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) {
    //       this.testShow4 = true;
    //     }
    //   },
    // },
    // beforeDestroy() {
    //   window.removeEventListener("scroll", this.handleScrollbox, true);
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .home-item {
    height: 100vh;
    width: 100%;
  }
}
</style>