<template>
  <div class="threeTitle">
    <span class="threeTitle_bg">
      <span :style="{'font-size':fontSize}" v-if="title">{{title}}</span>
      <span v-else><slot/></span>
    </span>
  </div>
</template>
<script>
  /**
   * 文字渐变标题
   * 使用方法：
   * <title1 title="标题文字在这里"/>
   */
  export default {
  name:'Title1',
  props: {
    title: {
      type: String,
      default:''
    },
    fontSize:{
      type: String,
      default: '0.2rem'
    }
  }
}
</script>

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