# InstitutionalItem 建制数据项组件

一个用于展示建制数据的可复用组件。

## 功能特性

- 展示建制项目的详细信息
- 支持查看详细功能
- 响应式布局
- 统一的样式风格

## 使用方法

### 基础用法

```vue
<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 对象结构

```javascript
{
  topLeft: '2023年 项目名称',      // 左上角显示内容
  topRight: '进行中',              // 右上角显示内容
  bottomLeft: '建造金额：100万',    // 左下角显示内容
  bottomRight: '捐赠人数：50人'     // 右下角显示内容
}
```

## Events

| 事件名      | 参数            | 说明               |
| ----------- | --------------- | ------------------ |
| view-detail | { item, index } | 点击查看详细时触发 |

## 样式说明

- 组件使用统一的建制风格
- 背景色：`#FFFBF5`
- 边框：`1px solid #C7A26D`
- 圆角：`11px`
- 高度：`180rpx`

## 注意事项

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