<template>
  <div class="home-cell">
    <CellHeader :title="title">
      <slot name="header"></slot>
    </CellHeader>
    <div class="cell-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import CellHeader from "./CellHeader.vue";

export default {
  name: "CellWrapper",
  components: { CellHeader },
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.home-cell {
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 8px;
  padding-bottom: 10px;
  width: 100%;
  height: 100%;
}
.home-cell::before {
  display: table;
  content: "";
}
.home-cell >>> .el-scrollbar__wrap {
  overflow-y: scroll;
  overflow-x: auto;
}
.cell-content {
  height: calc(100% - 50px);
  overflow: auto;
}
</style>