couponItem.vue

<template>
  <div class="coupon-item">
    <img src="../assets/images/coupon-item-bg.png" class="bg"/>
    <div class="coupon-content">
      <div class="coupon-table">
        <div class="cell info" v-if="data.voucherType === 2">
          <div class="price">免费<span class="unit">价值{{data.cost}}元</span></div>
          <div class="title">{{data.name}}</div>
          <small class="des">{{data.labelId === 1 || data.labelId === 3 ? '孕产妇检券':data.labelId === 2 ? '儿童健康体检券': ''}}</small>
        </div>
        <div class="cell info" v-else>
          <div class="title">{{data.name}}</div>
          <div class="price">{{data.cost}}<span class="unit">元</span></div>
          <small class="des">{{data.labelId === 1 || data.labelId === 3 ? '孕产妇检券':data.labelId === 2 ? '儿童健康体检券': ''}}</small>
        </div>
        <div class="cell btn"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'couponItem',
  data () {
    return {
    }
  },
  props: ['data'],
  created () {
  },
  mounted: function () {
  },
  computed: {
  },
  methods: {
  }
}
</script>

<style scoped>
  .coupon-item {
    position:relative;
    padding: 0.5em 1em 0 1em;
  }

  .coupon-item > .bg  {
    width: 100%;
  }

  .coupon-item > .coupon-content {
    position:absolute;
    left:1em;
    top:0;
    bottom:0;
    right:1em;
  }

  .coupon-item > .coupon-content > .coupon-table{
    display:table;
    width:100%;
    height:100%;
  }
  .coupon-item > .coupon-content > .coupon-table > .cell {
    display:table-cell;
    vertical-align:middle;
  }
  .coupon-item > .coupon-content > .coupon-table > .info{
    padding-left: 2.5em;
    width: 77%;
  }
  .coupon-item > .coupon-content > .coupon-table > .info .title{
    font-size: 1.1em;
    color:#9B7F53;
    width:12em;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
  .coupon-item > .coupon-content > .coupon-table > .info .price {
    font-size: 1.8em;
    color:#E9462B;
    margin:0.1em 0;
    font-weight:bold;
  }
  .coupon-item > .coupon-content > .coupon-table > .info .price > .unit {
    font-size: 50%;
    font-weight:normal;
    margin-left: 10px;
  }
  .coupon-item > .coupon-content > .coupon-table > .info .des{
    font-size: 0.8em;
    color:#9B7F53;
  }
</style>