<template>
  <div class="container-fluid" :class="[contentClass]">
    <el-row>
      <el-col :span="24">
        <div class="box">
          <div class="box-body">
            <div class="search">
              <slot name="search-container" />
            </div>
            <!-- <el-card shadow="never"> -->
            <slot name="main-container" />
            <!-- </el-card> -->
            <slot />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BoxContent',
  props: {
    noTitle: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    contentClass() {
      return this.noTitle ? 'content-notitle' : 'content'
    }
  }
}
</script>
<style lang="scss">
  .box-body{
     padding:  0px;
     background-color: #fff;
     .el-card__body {
      padding: 0px;
    }
    .search{
      display: flex;
      padding: 5px;

      .mr5{
        margin-right:5px;
      }
      .el-form-item{
        margin-bottom: 10px;
      }
    }
    .page{
      text-align: right;
      padding-top: 3px;
    }
    .el-button.is-circle {
      padding: 9px;
      font-weight: bold;
      font-size: 14px;
    }
  }
</style>
