<template>
  <view class="donation-list">
    <view class="list-header">
      <text class="header-item">编号</text>
      <text class="header-item">姓名</text>
      <text class="header-item">捐款金额(元)</text>
      <text class="header-item">捐款时间</text>
    </view>
    <view class="list-item" v-for="(item, index) in donationList" :key="index">
      <text class="item-id">{{ item.id }}</text>
      <text class="item-name">{{ item.name }}</text>
      <text class="item-amount">{{ item.amount.toLocaleString() }}</text>
      <text class="item-time">{{ item.time }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DonationList',
  props: {
    donationList: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.donation-list {
  width: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  padding-bottom: 106rpx;
}

.list-header {
  display: flex;
  padding: 28rpx 15rpx;
}

.header-item {
  flex: 1;
  font-size: 30rpx;
  color: #643B27;
  font-weight: bold;
  text-align: center;
}

.list-item {
  display: flex;
  padding: 28rpx 20rpx;
}

.list-item:hover {
  background: #FAFAFA;
}

.list-item:last-child {
  border-bottom: none;
}

.item-id, .item-name, .item-amount, .item-time {
  flex: 1;
  font-size: 28rpx;
  text-align: center;
  line-height: 1.5;
}

.item-id {
  color: #666;
  font-weight: 500;
}

.item-name {
  color: #333;
  font-weight: 500;
}

.item-amount {
  color: #E74C3C;
  font-weight: bold;
}

.item-time {
  color: #666;
  font-size: 26rpx;
}
</style> 