InstitutionalItem 建制数据项组件
一个用于展示建制数据的可复用组件。
功能特性
- 展示建制项目的详细信息
- 支持查看详细功能
- 响应式布局
- 统一的样式风格
使用方法
基础用法
<template>
<view>
<institutional-item
v-for="(item, index) in institutionalData"
:key="index"
:item="item"
:index="index"
@view-detail="handleViewDetail"
/>
</view>
</template>
<script>
import InstitutionalItem from './components/institutional-item.vue'
export default {
components: {
InstitutionalItem,
},
methods: {
handleViewDetail(data) {
console.log('查看详细:', data.item)
// 处理查看详细逻辑
},
},
}
</script>
Props
| 参数 |
类型 |
默认值 |
说明 |
| item |
Object |
{} |
数据项对象 |
| index |
Number |
0 |
数据索引 |
item 对象结构
{
topLeft: '2023年 项目名称', // 左上角显示内容
topRight: '进行中', // 右上角显示内容
bottomLeft: '建造金额：100万', // 左下角显示内容
bottomRight: '捐赠人数：50人' // 右下角显示内容
}
Events
| 事件名 |
参数 |
说明 |
| view-detail |
{ item, index } |
点击查看详细时触发 |
样式说明
- 组件使用统一的建制风格
- 背景色：
#FFFBF5
- 边框：
1px solid #C7A26D
- 圆角：
11px
- 高度：
180rpx
注意事项
- 组件会自动处理空值，显示"暂无数据"
- 点击"查看详细"会触发
view-detail 事件
- 样式与建制页面保持一致
