massage-front/pages_order/components/verifyRecord/voucherCard.vue

<template>
  <view class="card flex voucher">
    <image class="voucher-img" :src="data.member.headImage"></image>
    
    <view class="voucher-info">
      <view class="voucher-name">{{ data.member.nickName }}</view>
      <view class="voucher-desc">{{ `核销时间：${data.useTime}` }}</view>
    </view>

    <view class="voucher-count">
      <text>代金券：</text>
      <text class="voucher-value">{{ `${data.discountAmount}元` }}</text>
    </view>
  </view>
</template>

<script>

export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
  },
}
</script>

<style scoped lang="scss">
.voucher {
  padding: 33rpx 25rpx 33rpx 31rpx;

  &-img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin-right: 7rpx;
  }

  &-info {
    flex: 1;
  }

  &-name {
    color: #333333;
    font-size: 28rpx;
    line-height: 40rpx;
  }

  &-desc {
    color: #333333;
    font-size: 22rpx;
    line-height: 30rpx;
    margin-top: 5rpx;
  }

  &-count {
    color: #000000;
    font-size: 22rpx;
  }

  &-value {
    color: #FF2A2A;
  }
}
</style>