<template>
  <div style="width: 100%;padding-right:10px;" class="flex just-between pt10 pb10" >
    <div style='display: flex;justify-content: start;'>
    <span class="lable-title" :style="{color:props.color}">{{ props.title }}</span>
        <slot name="icon"></slot>
    </div>

    <slot name="btn"></slot>
  </div>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '#F6F6F6'
  },
  color:{
    type: String,
    default:'#000'
  }

});
</script>

<style lang="scss" scoped>
.lable-title {
  color: #000;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  position: relative;
}

.lable-title::after {
  content: "";
  position: absolute;
  background: var(--el-color-primary);
  width: 3px;
  height: 16px;
  top: 7px;
  left: 0;
}
</style>
