<template>
  <el-card class="tab-title">
    {{ text }}
  </el-card>
</template>

<script>
export default defineComponent({
  props: {
    text: {
      type: String,
      required: true
    }
  },
})
</script>

<style scope lang="scss">
.tab-title {
  display: flex;
  align-items: center;
  /*for vertical align*/
  font-size: 20px;
  height: 50px;
  color: #1890FF;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 0;

  .el-card__body {
    padding: 0 !important;
  }
}

.tab-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  /* 矩形的宽度 */
  height: 28px;
  /* 矩形的高度 */
  background-color: #1890FF;
  /* 矩形的背景颜色 */
  margin-right: 8px;
  border-radius: 8px;
  margin-left: 8px;
}</style>
