<template>
  <div class="section" :style="{ height: height }">
    <UTitle :title="title" :type="type">
      <template slot="title-slot">
        <slot name="title-slot"></slot>
      </template>
    </UTitle>
    <div class="container">
      <slot name="container-slot" />
    </div>
  </div>
</template>
<script>
import UTitle from "./Utitle";
export default {
  name: "Section",
  components: { UTitle },
  props: {
    title: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "400px",
    },
    type: {
      type: String,
      default: "short",
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  margin-top: 10px;
  height: calc(100% - 64px);
}
</style>