<template>
  <div class="card-box" :style="{'background': background}">
    <el-row v-if="!noHeader">
      <el-col :span="8">
        <div class="head-line" >
          <img src="@/assets/images/leibie-2.png" class="img-xm" v-show="!noIcon">
          <span style="color:#2C2F3E;font-size: 16px;font-weight: 700;">{{label}}</span>
        </div>
      </el-col>
      <el-col :span="8" style="display: flex;align-items: center;justify-content: center">
        <slot name="centerContent"/>
      </el-col>
      <el-col :span="rightSpan" style="display: flex;align-items: center;justify-content: right;height: 100%" >
        <slot name="rightContent" />
      </el-col>
    </el-row>
    <slot name="default"></slot>
  </div>
</template>

<script>
export default {
  name: 'RedHeaderLine',
  props:{
    label:{
      type:String,
      default:"",
    },
    background:{
      type: String,
      default:'#fff'
    },
    noIcon:{
      type: Boolean,
      default: false
    },
    noHeader:{
      type: Boolean,
      default: false
    },
    rightSpan:{
      type:Number,
      default:8
    }
  }
}
</script>

<style scoped>
  .card-box{
    /*box-shadow: 0 0 2px rgba(0,0,0,0.3);*/
    padding: 16px 22px 16px 0;

    margin-bottom: 0;
  }
  .head-line {
    display: inline-flex;        /* 开启flex布局 */
    align-items: center;  /* 垂直居中对齐 */
    margin-top: 11px;
    margin-bottom: 16px;
    height: 20px;
  }

.img-xm {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

</style>
