93 lines
1.5 KiB
Vue
93 lines
1.5 KiB
Vue
<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 v-for="(item, index) in donationList" :key="index" class="list-item">
|
|
<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;
|
|
}
|
|
|
|
.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>
|