hlm_pl_mall_h5/pages/member/buy/child/CheckoutDesc.vue

<template>
    <flex-line :show-border="true">
        <label class="title">{{title}}</label>
        <view class="div" slot="right">
            <label class="subtitle discount" v-if="discount">-￥{{subtitle}}</label>
            <label class="subtitle" v-else>￥{{subtitle}}</label>
        </view>
    </flex-line>
</template>

<script>
import flexLine from '../../../flexLine'
export default {
  props: {
    title: {
    },
    subtitle: {
    },
    discount: { default: false }
  },
  components: {
    flexLine
  }
}
</script>

<style lang="scss" scoped>
    .title {
        width: 5rem;
        font-size:$subFontSize;
        color: #333;
    }
    .subtitle {
        flex: 1;
        margin-left: 1rem;
        color: #333;
        font-size:$h3;
        text-align: right;
    }
    .subtitle.discount{color:$primaryColor}
</style>