<template lang="pug">
.board
  el-card.box-card(shadow="hover")
    .clearfix(slot='header')
      span {{title}}
      el-button.close(type="danger" size="mini" icon="el-icon-close" v-if="canClose" @click="handleClose")
      slot(name="operations")
    slot
</template>
<script>

export default {
  name: 'Board',
  props: {
    title: {
      type: [String, Number],
      default: '标题',
    },
    id: {
      type: String,
      default: '',
    },
    canClose: {
      type: Boolean,
    },
  },
  data () {
    return {
    }
  },
  created () {},
  components: {},
  computed: {},
  methods: {
    handleClose () {
      this.$emit('close', this)
    },
  },
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.board {
  width 100%
  box-sizing border-box
  position relative
  margin-bottom 20px
  >>> .el-card__header {
    padding 12px
  }
  >>> .el-card__body {
    padding 12px
  }
  .title {
    position absolute
    cursor pointer
    top -12px
    left 10px
    padding 0 10px
    background-color #fff
    border: 1px solid #b7b7b7
  }
  .close {
    cursor pointer
    width 18px
    height 18px
    line-height 18px
    font-size 12px
    padding 0
    border-radius 40px
    float right
  }
  .content {
    min-width 100%
    position relative
  }
  ul {
    padding-left 0
  }
  >>>img {
    max-width 100%
  }
}
</style>
