<template>
  <section class="subHeader">
    <div class="subHeader-title" :class="{right:!!$scopedSlots.right}">
      <h2 class="fill" v-text="title"/>
      <slot name="right"/>
    </div>
    <div class="divider"/>
    <div class="slot">
      <slot/>
    </div>
  </section>
</template>

<script>
export default {
  name: 'subHeader',
  props: ['title']
}
</script>

<style lang="scss" scoped>
.subHeader {
  //background: #7583900f;

  .subHeader-title {
    display: flex;
    align-items: center;
    height: 51px;
    padding: 0 8px 0 46px;
    box-sizing: border-box;
    background-image: linear-gradient(90deg, #00d4ff00 0%, rgba(0, 212, 255, 0.3) 12%, #0080ff00 100%), url("https://cdn.sinoecare.com/i/2024/09/03/66d6d5b006572.png");
    background-size: 100% 6px, 54px 42px;
    background-position: center bottom, left center;
    background-repeat: no-repeat;


    h2 {
      font-size: 20px;
      color: #fff;
      font-weight: 500;
    }


    img {
      width: 28px;
      height: 28px;
      margin-right: 8px;
    }

    &.right {
      padding-right: 0;
    }
  }

  .divider {
    height: 7px;
    background-image: linear-gradient(110deg, transparent 0% 14%, #1F979A 15% 29%, transparent 30% 44%, #1F979ABF 45% 59%, transparent 60% 74%, #1F979A82 75% 89%, transparent 90% 100%),
    linear-gradient(90deg, #243132 80%, #02FEFF 99%);
    background-size: 21px 7px, 100% 3px;
    background-position: calc(100% - 92px) top, left center;
    background-repeat: no-repeat;
  }

  .slot {
    height: calc(100% - 60px);
    padding-top: 12px;
  }
}
</style>
