<template>
  <div class="template-content">
    <div class="template-content-title">
      <slot name="title">{{ title }}</slot>
      <div class="template-content-title-extra">
        <slot name="extra-btn"></slot>
      </div>
    </div>
    <div class="template-content-main">
      <slot name="grid"></slot>
    </div>
    <div class="template-bottom-button" v-if="needBottomButton">
      <slot name="bottom-btn"></slot>
    </div>
  </div>
</template>

<script>
import { Vue, Component, Prop } from "vue-property-decorator";
@Component
export default class ContentWrapper extends Vue {
  @Prop(String) title;
  @Prop({ default: false }) needBottomButton;
}
</script>

<style scoped lang="less">
.template-content {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 10px #cccccc;
  padding: 15px;
  box-sizing: border-box;
}
</style>
