web/src/views/portrayal/components/FreeExpBanner.vue

<template>
  <div class="free-exp-banner" :class="isGiving ? 'before-give-text' : ''">
    <div class="flex-r-c left">
      <span class="content-text">{{ contentText }}</span>
      <div class="exp-button" @click="toUnlock">{{ rightButtonText }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'free-exp-banner',
  props: {
    isGiving: {
      type: Boolean,
      default: true
    },
    contentText: [String],
    rightButtonText: {
      type: String,
      default: '去解锁 >>'
    }
  },
  methods: {
    toUnlock () {
      this.$emit('rightButtonClick')
    }
  }
}
</script>
<style lang="scss" scoped>
.before-give-text {
  position: relative;
  &::before {
    content: "赠送";
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 48px;
    height: 22px;
    font-size: 14px;
    padding-left: 8px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    border-bottom-right-radius: 20px;
    background: linear-gradient(104deg, #D69C06 0%, #B16C05 100%);
  }
}
.free-exp-banner {
  margin: 0 !important;
  width: 100%;
  padding: 10px 136px;
  font-size: 18px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #663600;
  line-height: 28px;
  background-color: #F1D08F;
  background: url("~@/assets/images/free-exp-banner-bg.png") no-repeat;
  background-size: 100% 100%;
  .content-text {
    flex: 1;
  }
  .exp-button {
    cursor: pointer;
    text-align: center;
    width: 110px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    background: linear-gradient(104deg, #D69C06 0%, #B16C05 100%);
    border-radius: 20px 20px 20px 20px
  }
}
</style>