<template>
  <div class="panel-container">
    <div class="panel-title">
      {{ title }}
      <div class="title-right">
        <slot name="func" />
      </div>
    </div>
    <div class="panel-body">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'PanelCard',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-container{
  width: 100%;
  padding: 10px;
  border: 1px solid #EBEEF5 ;
  .panel-title{
    width: 100%;
    line-height: 2;
    font-size: 16px;
    font-weight: bold;
    padding: 0px 10px;
    padding-right: 0px;
    border-left: 5px solid #66b1ff;
    position: relative;
    .title-right{
      display: inline-block;
      position: absolute;
      right: 0px;
    }
  }
  .panel-body{
    padding: 5px 0px;
    height:auto;
  }
}
</style>