<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;
  font-size: 20px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  position: relative;
}

.lable-title::after {
  content: "";
  position: absolute;
  background: url('~@/assets/images/bg_left.png');
  // background: var(--el-color-primary);
  width: 12px;
  height: 21px;
  top: 4px;
  left: -6px;
}
</style>
