## OPInfoCard 信息卡片

·描述

用于展示一组 label / value 信息项的卡片式布局，支持 2/3/4 列布局，适合在详情页顶部展示统计信息或基本信息。

·API

| 参数      | 说明                         | 类型        | 默认值 |
| --------- | ---------------------------- | ----------- | ------ | --- | --- |
| data      | 信息项数组，{ label, value } | Array<对象> | -      |
| columns   | 列数，支持 2/3/4             | Number（2   | 3      | 4） | 3   |
| className | 自定义类名                   | String      | -      |

示例

```j
import React from 'react';
import ReactDOM from 'react-dom';
import { OPInfoCard } from '../src/view';

const data = [
  { label: 'Location name', value: 'Arrival area-01' },
  { label: 'Total parcel number', value: '200' },
  { label: 'Total bag number', value: '50' },
  { label: 'Total pallet number', value: '20' },
  { label: 'Total container number', value: '2' },
  { label: 'Creation time', value: '2025-10-27 11:00:00' },
  { label: 'Creator', value: 'Jack' },
];

function App() {
  return (
    <div style={{ padding: 20 }}>
      <h3>基础信息卡片（3 列）</h3>
      <OPInfoCard data={data} columns={3} />

      <h3 style={{ marginTop: 24 }}>两列布局</h3>
      <OPInfoCard data={data.slice(0,4)} columns={2} />

      <h3 style={{ marginTop: 24 }}>四列布局</h3>
      <OPInfoCard data={data.concat(data).slice(0,8)} columns={4} />
    </div>
  );
}

ReactDOM.render(<App />, mountNode);
```

```css
body {
  overflow: auto;
}
```

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { OPInfoCard } from '../src/view';

const data = [
  { label: 'Location name', value: 'Arrival area-01' },
  { label: 'Total parcel number', value: '200' },
  { label: 'Total bag number', value: '50' },
  { label: 'Total pallet number', value: '20' },
  { label: 'Total container number', value: '2' },
  { label: 'Creation time', value: '2025-10-27 11:00:00' },
  { label: 'Creator', value: 'Jack' },
];

ReactDOM.render(
  <div style={{ padding: 16 }}>
    <h3>基础信息卡片（3 列）</h3>
    <OPInfoCard data={data} columns={3} />

    <h3 style={{ marginTop: 24 }}>两列布局</h3>
    <OPInfoCard data={data.slice(0, 4)} columns={2} />

    <h3 style={{ marginTop: 24 }}>四列布局</h3>
    <OPInfoCard data={data.concat(data).slice(0, 8)} columns={4} />
  </div>,
  mountNode,
);
```