<template>
  <div class="home">
    <Boutique class="home-item" 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" />
  </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 {
  name: "Home",
  components: {
    // NavBar,
    // Footer,
    MuseumMap,
    Boutique,
    Virtural,
    Display,
    CulturalRelic,
  },
  // data() {
  //   return {
  //     headerFixed: false,
  //   };
  // },

};
</script>

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