<template>
  <div class="eContainer-home">
    <QuickVisitVue></QuickVisitVue>
    <NoticeAnnouncementVue></NoticeAnnouncementVue>
    <HallVue></HallVue>
    <CustomerAnalyseVue></CustomerAnalyseVue>
    <QuickSearchVue></QuickSearchVue>
  </div>
</template>

<script>
import QuickVisitVue from "./QuickVisit.vue";
import NoticeAnnouncementVue from "./NoticeAnnouncement.vue";
import HallVue from "./Hall.vue";
import CustomerAnalyseVue from "./CustomerAnalyse.vue";
import QuickSearchVue from "./QuickSearch.vue";

export default {
  name: "Home",
  components: {
    QuickVisitVue,
    NoticeAnnouncementVue,
    HallVue,
    CustomerAnalyseVue,
    QuickSearchVue,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.eContainer-home {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.home-item {
  height: 47%;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 8px;
}
#quickVisit {
  width: 65.3%;
}
#noticeAnnouncement,
#hall,
#customerAnalyse,
#quickSearch {
  width: 32%;
}
.home-item >>> .item-content {
  /* max-height: calc(100% - 52px); */
  height: calc(100% - 52px);
  overflow: auto;
}
</style>