<template>
  <p class="title" :class="{'big':size=='big','medium':size=='medium','small':size=='small','leftBar el-link el-link--primary titleTextColor':leftBar}">
    <slot></slot>
  </p>
</template>

<script>
  export default {
    name: "Title",
    props: {
      size: {
        type: String,
        default: 'big'
      },
      leftBar:{
        type:Boolean,
        default: false
      }
    }
  }
</script>

<style scoped lang="scss">
  .titleTextColor{
    color: #303133!important;
  }
  .title {
    color: #333333;
    font-size: 24px;
    vertical-align: middle;
    position: relative;
    text-align: left;
    position: relative;
    line-height: 40px;
    font-weight: 500;
    &:hover{
      color: #333333;
      cursor: default;
    }
    &.leftBar{
      text-indent: 20px;
      display: block!important;
      &:after{
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width:0px;
        height:0px;
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 1.5px;
        border-right-width: 1.5px;
        border-style: solid;
        /*background:#1ACCBD;*/
        transform: translateY(-50%);
        opacity:1;
        box-sizing: content-box;
      }
    }
  }


  .big {
    font-size: 28px;
    line-height: 40px;
  }

  .medium {
    font-size: 18px;
    line-height: 30px;
  }

  .small {
    font-size: 16px;
    line-height: 16px;
  }
</style>
