<template>
  <div class="threeTitle" :style="{'background':gradientTitle}">
    <span class="threeTitle_bg">
      <a-icon :style="{'font-size':fontSize}" type="caret-right" style="color:#FFD700;margin-right:10px;"/>
      <span :style="{'font-size':fontSize}" v-if="title">{{title}}</span>
      <span v-else><slot/></span>
    </span>
  </div>
</template>
<script>
  /**
   * 背景渐变标题
   * 使用方法：
   * <title1 title="标题文字在这里"/>
   */
export default {
    name:'Title2',
    props: {
      title: {
        type: String,
        default:''
      },
      fontSize:{
        type: String,
        default: '0.45rem'
      },
      colors:{
        type: Array,
        default: ()=>{
          return ['#5174da','#090f53']
        }
      }
    },
    computed:{
      gradientTitle(){
        const colors = this.colors.join(',')
        return 'linear-gradient(to right,'+colors+')'
      }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/_variables.scss';
.threeTitle {
  margin-bottom: 0.08rem;
  width:100%;
  .threeTitle_bg {
    padding: .02rem 0.3rem 0.02rem 0.13rem;
    display: inline-block;
    span {
      /*<!--background: $gradientTextThree;-->*/
      /*-webkit-background-clip: text;*/
      /*color: transparent;*/
      color: white;
      font-size: 0.2rem;
      font-weight: bold;
      line-height: 2.2;
    }
  }
}
</style>