<!--
 * @Author: xiejiang
 * @Date: 2024-11-29 16:08:58
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-08 15:08:34
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <div class="title-wrap">
    <div class="prefix"></div>
    <div v-if="props.title" class="title">{{ props.title }}</div>
    <div class="title" v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="PageTitle">
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
</script>

<style lang="less" scoped>
.title-wrap {
  display: flex;
  align-items: center;

  .prefix {
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 0 3px;
    background: var(--td-brand-color);
  }

  .title {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--td-font-gray-1);
    margin-left: 8px;
  }
}
</style>
