<script setup>
import { defineEmits, defineProps, ref, watch } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div class="tit-box">
    <div class="tit-title-wrap">
      <div class="tit-title">
        <template v-if="title">
          <span
            >{{ title }}
            <slot name="title-extra"></slot>
          </span>
        </template>
        <slot v-else name="title"></slot>
      </div>
    </div>
    <div class="tit-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tit-box {
  position: relative;
  display: flex;
  flex-direction: column;
}

.tit-title-wrap {
  height: 37px;
  position: relative;
  background-image: url('@/assets/imgs/card-h-bg.png');
  background-size: 100% 23px;
  background-repeat: no-repeat;
  background-position: center bottom 3px;
  .tit-title {
    font-family: JiangChengXieHei;
    text-indent: 40px;
    font-size: 20px;
    color: transparent;
    text-shadow: 0px 2px 4px rgba(75, 180, 229, 0.4);
    background: linear-gradient(180deg, #31beff 0%, #d8d8d8 10%);
    background-clip: text;
  }
}

.tit-box-content {
  flex: 1;
  margin-top: 8px;
}
</style>
