<template>
  <div class="section-title">
    <div class="text-title"
         :style="{paddingLeft:Number.parseInt(iconStyle.width)+4+10+'px',backgroundColor:bgColor}"><span class="icon"
                                                                                                         :style="{...iconStyle}"></span><span class="bold"
                                                                                                                                              :style="{fontSize}">
                                                                                                           <slot></slot>
                                                                                                         </span></div>
  </div>
</template>

<script>
export default {
  name: 'SectionTitle',
  props: {
    iconStyle: {
      type: Object,
      default: () => ({
        backgroundColor: '#000',
        width: '4px',
        height: '10px'
      })
    },
    fontSize: {
      type: String,
      default: '14px'
    },
    bgColor: {
      type: String,
      default: '#F5F7FA'
    }
  }
}
</script>

<style lang="scss" scoped>
.section-title {
  .text-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    overflow: hidden;
    .icon {
      position: absolute;
      top: 0;
      left: 10px;
      bottom: 0;
      margin: auto;
    }
  }
}
</style>
