<template>
  <div class="content-border-container" :style="{width:width,height:height}">
    <div class="header">
      <svg-icon :icon-class="iconClass" />{{ title }}
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  iconClass: {
    type: String,
    default: 'logo'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: 'auto'
  },
});
</script>

<style lang="scss" scoped>
.content-border-container{
  border: 1px solid #DFE1E4;
  border-radius: 4px;
  margin-bottom: 20px;
  .header{
    width: 100%;
    height: 44px;
    background: rgb(250, 251, 252);
    // background: #FAFBFC;
    border-bottom: 1px solid #DFE1E4;
    line-height: 44px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 600;
    color: #0B182D;
    >.svg-icon{
      font-size: 20px;
      margin-right: 10px;
      color: #E83333;
      vertical-align: middle;
    }
  }
  .content{
    width: 100%;
    padding: 20px;
  }
}
</style>