index.vue

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

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

export default {
  name: "Home",
  components: {
    QuickVisitVue,
    TaskStatisticsVue,
    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-cell {
  width: 33%;
  height: 49%;
  margin-left: 0.166%;
  margin-right: 0.166%;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 8px;
}
.home-cell >>> .cell-content {
  /* max-height: calc(100% - 52px); */
  height: calc(100% - 52px);
  overflow: auto;
}
</style>