169 lines
3.3 KiB
Vue
169 lines
3.3 KiB
Vue
<template>
|
|
<view class="data">
|
|
<!-- 标题和状态行 -->
|
|
<view class="header-row">
|
|
<view class="project-title">{{ item.topLeft || '暂无数据' }}</view>
|
|
<view class="status">{{ item.topRight || '暂无数据' }}</view>
|
|
</view>
|
|
|
|
<!-- 详细信息表格 -->
|
|
<view class="details-table">
|
|
<view class="table-row">
|
|
<text class="label year-col">年份</text>
|
|
<text class="label amount-col">建造金额(约)</text>
|
|
<text class="label donor-col">捐赠人数</text>
|
|
<text class="label detail-col">捐赠名单</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="value year-col">{{ item.year || '暂无数据' }}</text>
|
|
<text class="value amount-col">{{ item.amount || '暂无数据' }}</text>
|
|
<text class="value donor-col">{{ item.donorCount || '暂无数据' }}</text>
|
|
<text class="view-details detail-col" @click="onViewDetail">查看详情</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'InstitutionalItem',
|
|
props: {
|
|
// 数据项
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
topLeft: '',
|
|
topRight: '',
|
|
bottomLeft: '',
|
|
bottomRight: '',
|
|
}),
|
|
},
|
|
// 数据索引
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
methods: {
|
|
// 查看详细
|
|
onViewDetail() {
|
|
// 触发父组件的事件
|
|
this.$emit('view-detail', {
|
|
item: this.item,
|
|
index: this.index,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.data {
|
|
background-color: #fffbf5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 720rpx;
|
|
box-sizing: border-box;
|
|
min-height: 180rpx;
|
|
border-radius: 11px;
|
|
border: 1px solid #c7a26d;
|
|
margin: 15rpx auto;
|
|
padding: 12rpx;
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15rpx;
|
|
padding-bottom: 12rpx;
|
|
}
|
|
|
|
.project-title {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #522510;
|
|
flex: 1;
|
|
}
|
|
|
|
.status {
|
|
font-size: 28rpx;
|
|
color: #7f7f7f;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.details-table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #7c736e;
|
|
font-weight: 500;
|
|
flex: 1;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.value {
|
|
font-size: 26rpx;
|
|
color: #695347;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.view-details {
|
|
font-size: 28rpx;
|
|
color: #522510;
|
|
font-weight: 500;
|
|
|
|
cursor: pointer;
|
|
flex: 1;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.view-details:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* 不同列的弹性比例 */
|
|
.year-col {
|
|
flex: 1;
|
|
}
|
|
|
|
.amount-col {
|
|
flex: 1.5;
|
|
}
|
|
|
|
.donor-col {
|
|
flex: 1;
|
|
}
|
|
|
|
.detail-col {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
min-width: 80rpx;
|
|
}
|
|
</style>
|