<template>
  <div class="am-title-view">
    <div class="am-bar" :style="{ backgroundColor: `${color}` }"></div>
    <span class="am-text">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
/**
 * @Description: 公共的标题条组件
 * @author LiuBo
 * @date 2021/2/1
 * @time 11:23
 */
@Component({
  name: "TitleText"
})
export default class TitleText extends Vue {
  @Prop({ default: "#2858d6" }) color: string | undefined; // 标题条颜色
}
</script>

<style scoped lang="scss">
.am-title-view {
  display: flex;
  align-items: center;
  .am-bar {
    width: 4px;
    height: 16px;
    margin-right: 0.75rem;
  }
  .am-text {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
