<template>
  <div class="div_pay_item">
    <div class="div_pay_item_title">
      <span class="span_pay_item_dark">{{payModel.billName}}</span>
      <span class="span_pay_item_dark">¥ {{payModel.billAlreadyMoney}}</span>
    </div>
    <div v-for="(data,index) in payModel.billDetail" :key="index" class="div_pay_item_content">
      <span class="span_pay_item_light">{{data.chargePeriod}}</span>
      <span class="span_pay_item_light">¥ {{data.alreadyMoney}}</span>
    </div>

  </div>
</template>

<script>
  export default {
    name: "chargeRecordPayItem",
    props:{
      payModel:{
        type:Object,
      }
    }
  }
</script>

<style scoped>
  .div_pay_item{

  }
  .div_pay_item_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
  }
  .div_pay_item_content{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .span_pay_item_dark{
    color: #000000;
    font-size: 14px;
  }
  .span_pay_item_light{
    color: #999999;
    font-size: 12px;
  }

</style>
