web/apps/mobile/src/views/order/components/vipsubscribe/Introduction.vue

<template>
  <div class="vip-rights">
    <div class="buy-tip">
      <div class="buy-tip-header">
        购买须知
      </div>
      <div class="buy-tip-text">
        剑鱼平台产品与服务属于虚拟数字产品，鉴于服务的特殊性，一旦开通权益不支持退款，请确认无误后进行支付。
      </div>
    </div>
    <!-- <img src="@/assets/image/vip-subscribe/introduce.png" alt=""> -->
    <div class="product-introduce">
      <div class="product-introduce-header">
        <span class="icon-bracket" />
        <span class="title">整体服务对比</span>
        <span class="icon-bracket reverse" />
      </div>
      <div class="product-introduce-text">
        超级订阅不包含超前项目（拟建项目、采购意向）服务。<br>
        如需超前项目服务，请<span class="gold" @click="goBuyMember">购买大会员</span>
      </div>
      <div class="product-introduce-content">
        <IntroductionCard />
      </div>
    </div>
    <div class="allViewrights" @click="goViewrights">
      查看全部权益
    </div>
  </div>
</template>

<script>
import IntroductionCard from './IntroductionCard.vue'

export default {
  name: 'VipSubscribeIntroduction',
  components: {
    IntroductionCard
  },
  data: () => ({}),
  beforeCreate() {},
  created() {},
  methods: {
    goViewrights() {
      this.$router.push('/common/vipsubscribeRights')
    },
    goBuyMember() {
      this.$router.push('/order/create/bigmember?meal=sj')
    }
  }
}
</script>

<style lang="scss" scoped>
.vip-rights {
  padding: 0 !important;
  background: linear-gradient(113.06deg, #3e3e52 0%, #2f2f3d 100%);
  padding-bottom: 1px;

  img {
    width: 100%;
  }

  .buy-tip {
    margin-bottom: 12px;
    padding: 12px 16px;
    background: #fff;

    &-header {
      margin-bottom: 4px;
      font-size: 16px;
      line-height: 24px;
      color: #171826;
    }

    &-text {
      font-size: 12px;
      color: #5f5e64;
      line-height: 18px;
    }
  }
  .product-introduce {
    margin-top: 26px;
    .product-introduce-header {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-bracket {
        display: flex;
        width: 44px;
        height: 8px;
        background: url('../../../../assets/image/icon/bracket.png') no-repeat;
        background-size: 100% 100%;
        &.reverse {
          transform: rotate(180deg);
        }
      }
      .title {
        padding: 0 8px;
        font-size: 18px;
        line-height: 26px;
        color: #FAE7CA;
      }
    }
    .product-introduce-text {
      margin-top: 8px;
      text-align: center;
      font-size: 12px;
      line-height: 18px;
      .gold {
        color: #FAE7CA;

      }
    }
    .product-introduce-content {
      padding: 18px 8px;
    }
  }
  .allViewrights {
    width: 343px;
    height: 46px;
    background-color: #2abed1;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f7f9fa;
    border-radius: 8px;
    margin: auto;
    margin-bottom: 25px;
  }
}
</style>