slibra-module-web/src/views/control/components/BaseTitle.vue

<script setup>

defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'first'
  }
})

</script>

<template>
  <div class="header">
    <div class="title">
      <svg xmlns="http://www.w3.org/2000/svg" width="8" height="24" viewBox="0 0 8 24" fill="none" v-if="type === 'first'">
        <path d="M0 6.86197V3.24507L4.21274 0H7.11111L4.45741 24H1.35684L4.01053 3.85352L0 6.86197Z" fill="#2454FF" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24" fill="none" v-else>
        <path d="M7.74366 10.4333C8.43696 9.03333 8.78361 7.76667 8.78361 6.6V6.1C8.78361 5.06667 8.58552 4.26667 8.16459 3.7C7.74366 3.13333 7.19892 2.83333 6.48086 2.83333C5.7628 2.83333 5.21807 3.1 4.8219 3.66667C4.42573 4.23333 4.22764 5.1 4.22764 6.23333V7.16667H1.94966V6.1C1.94966 4.26667 2.37059 2.8 3.18769 1.66667C4.02956 0.566667 5.14379 0 6.53039 0C7.42177 0 8.23887 0.266667 8.93217 0.8C9.62547 1.3 10.1702 2.03333 10.5416 2.96667C10.9378 3.9 11.1111 4.93333 11.1111 6.03333V6.6C11.1111 7.6 10.9873 8.5 10.7149 9.4C10.4673 10.2667 10.0959 11.1667 9.57595 12.1L2.94652 21.1667H9.16145V24H0V21.6L7.74366 10.4333Z" fill="#2454FF"/>
      </svg>
      <span class="text">{{ title }}</span>
    </div>
    <div class="btn-group space-x-[8px]">
      <slot name="right"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  @include flex(x, center, between);
  height: 75px;
  flex-shrink: 1;
  padding: 24px 16px 24px 16px;
  color: #1A2029;

  .title {
    display: flex;
    align-items: center;
    height: 24px;

    .text {
      height: 100%;
      padding-left: 13px;
      margin-left: -6px;
      background: linear-gradient(90deg, rgba(36, 84, 255, 0.10) -0.94%, rgba(36, 84, 255, 0.00) 95.3%);
      font-size: 15px;
      font-weight: bold;
      line-height: 24px
    }
  }

  .btn-group {
    @include flex(x, center, center);
  }

}
</style>