<template>
 <div class="price-wrapper">
   <div class="price-item" v-for="(item, index) in data" :key="index">
     <div>{{item.promotion}}</div>
     <div :class="getClass(index)">{{item.promotionAmount}}</div>
   </div>
 </div>
</template>

<script>
export default {
  name: 'BuyerFee',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    desc: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  methods: {
    getClass(index) {
      return {
        red: index === (this.data.length - 1)
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.price-item {
  display: flex;
  font-size: 28px;
  justify-content: space-between;
}

.price-item + .price-item {
  margin-top: 20px;
}

.red {
  font-size: 36px;
  color: red;
  font-weight: bold;
}
</style>