buddhism/pages/institutionalStructure/components/README.md

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

注意事项

1. 组件会自动处理空值，显示"暂无数据"
2. 点击"查看详细"会触发 view-detail 事件
3. 样式与建制页面保持一致