<template functional>
  <div class="member-title">
    <!-- <h1 class="member-title__title">开通羊小咩MAX会员<br />享「无限次免息」</h1>-->
    <cr-image
      src="@/assets/images/maxMember/title.png"
      width="8.13rem"
      height="auto"
      class="member-title__title-pic"
    />
    <div class="member-title__sub">
      {{ props.subTitle }}
    </div>
  </div>
</template>

<script>
// 函数式组件
export default {
  props: {
    subTitle: {
      type: String,
      default: '先享后付 0利息 0手续费'
    }
  }
};
</script>

<style lang="less" scoped>
.member-title {
  margin-bottom: @padding-sm;
  &__title {
    .text-size(34px);
    color: #2139fd;
    background: linear-gradient(127deg, #1b16fd 0%, #ba3fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: @padding-md + 2;
    &-pic {
      padding-bottom: @padding-md + 2;
    }
  }
  &__sub {
    display: inline-block;
    .text-size(14px);
    font-weight: 500;
    color: #060606;
    background: linear-gradient(270deg, #8ffff6 0%, #e9efff 54%, #8ffeff 100%);
    border-radius: @border-radius-lx;
    padding: @padding-xs @padding-md - 1;
    letter-spacing: 0.88px;
    &.large {
      .text-size(16px);
      padding: @padding-xs @padding-md - 1;
    }
  }
}
</style>
