<template>
  <div>
    <div class="header" :class="headerClass">
      <div class="header-title">{{ props.title }}</div>
      <!-- <div class="title-slot"> -->
        <slot name="title-slot"></slot>
      <!-- </div> -->
    </div>
    <div class="triangle"></div>
    <div class="rect">
      <div class="rect-after"></div>
    </div>
  </div>
</template>
<script setup>
  const props = defineProps({
    title: {
        type: String,
        require: true,
    },
    headerClass: {
        type: String,
        require: false,
        default: 'header'
    }
  });
</script>
<style lang='scss' scoped>
.header {
  width: 100%;
  height: 48px;
  background-image: url(@/assets/img/title1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  display: flex;
  align-items: center;
}

.header-title{
  width: 30%;
  text-align: left;
  white-space: nowrap;
  height: 28px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #B4FFFB;
  line-height: 28px;
  margin-left: 45px;
}

.two-header {
  background-image: url(@/assets/img/qxyj_title.png);
  .header-title{
    color: #FF1717;
  }
}


</style>
