<template lang='pug'>
.card-warp
  .card-header(
    :style="{ height, 'line-height': height, background: bgcolor }"
  )
    span.card-title {{ title }}
      div(style="margin-left: 20px;color:#3A648A;")
        slot(name="left")
    span(style='font-size:12px;')
        slot(name="right")
  .card-content
    slot(name="content")
</template>

<script>
export default {
  name: 'card-warp',
  props: {
    title: {
      type: String,
      default: '数据统计'
    },
    height: {
      type: String,
      default: '74px'
    },
    bgcolor: {
      type: String,
      default: '#f2faff'
    }
  }
}
</script>
<style lang="scss" scoped>
.card-warp {
  width: 100%;
  //   height: 100%;
  border: 1px solid #ececec;

  .card-header {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid #ececec;
    .card-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
    //   font-weight: 600;
    }
  }
  .card-content {
    margin: 20px;
  }
}
</style>
