jy-docs/jydocs-mobile/src/components/docs-card/Price.vue

<template>
  <div class="price-container">
    <van-icon name="diy-iconLogoLight" v-if="!alreadyBuy" />
    <span class="p-r" :class="{bought: alreadyBuy}">{{ price }}</span>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Icon } from 'vant'

@Component({
  name: 'docs-price',
  components: {
    [Icon.name]: Icon
  }
})

export default class Price extends Vue {
  @Prop({ default: '' }) price?: string | undefined;

  get alreadyBuy () {
    return this.price === '已购买'
  }
}
</script>

<style lang="scss" scoped>
.price-container {
  display: flex;
  align-items: center;
  @include diy-icon('iconLogoLight', 20, 20);

  .p-r {
    margin-left: 4px;
    font-size: 14px;
    color: #ff3a20;
    &.bought {
      color: #686868;
    }
  }
}
</style>