## OPCard 卡片组件

Card API

| 参数            | 说明                                                                                        | 类型       | 默认值    |           |     |
| --------------- | ------------------------------------------------------------------------------------------- | ---------- | --------- | --------- | --- |
| className       | 自定义样式类，可选                                                                          | String     | ''        |           |     |
| maxHeight       | 卡片最大高，超出滚动，可选 默认最大高度：卡片宽度 * 70%，calc(100vw*0.25\*0.7)              | Boolean \  | String    | false     |     |
| backgroundColor | 卡片背景颜色，可选 特殊颜色：包材'pm'，防护'protection'，重点信息'primary' 其他颜色可自定义 | Enum \     | String    | ''        |     |
| title           | 卡片标题，可选                                                                              | String \   | ReactNode | ''        |     |
| content         | 卡片内容，支持数组展示多行                                                                  | String \   | Array \   | ReactNode | ''  |
| imgList         | 图片列表，可选                                                                              | Array      | []        |           |     |
| barcode         | 条码，可选                                                                                  | Object     | {}        |           |     |
| action          | 操作配置，可选                                                                              | Object     | {}        |           |     |
| status          | 卡片状态，可选值：选中 active、禁用 disabled                                                | String     | ''        |           |     |
| tag             | 卡片 tag，参考 OPTag                                                                        | Object     | {}        |           |     |

Card.List API

| 参数       | 说明                                                                             | 类型                | 默认值 |
| ---------- | -------------------------------------------------------------------------------- | ------------------- | ------ |
| className  | 自定义样式类，可选                                                               | String              | ''     |
| maxHeight  | 卡片最大高，超出滚动，可选 默认最大高度：卡片宽度 \* 70%，calc(100vw\*0.25\*0.7) | Boolean \| String   | false  |
| title      | 卡片标题，可选                                                                   | String \| ReactNode | ''     |
| dataSource | 数据源                                                                           | Array               | []     |
| labelAlign | 标题位置，可选 可选值：top、left                                                 | Enum                | 'top'  |
| labelWidth | 标题宽度，可选                                                                   | String              | '30%'  |

```css
.custom-content-size .op-card-content {
  font-size: 24px;
}
.bubble-box .box-item {
  line-height: 52px;
  font-size: 22px;
  color: #8fa9c6;
}
.bubble-box .box-item.selected {
  font-size: 48px;
  color: #196ee6;
}
```

```jsx
import React, { Component, createRef } from 'react';
import ReactDOM from 'react-dom';
import { Grid } from '@alife/cn-ui';
import { OPCard, OPLayout } from '../src/view';

const { Row, Col } = Grid;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <OPLayout style={{ padding: '25px', backgroundColor: '#EEF4FA' }}>
        <h1>卡片大小</h1>
        <Row gutter={16}>
          <Col span='8'>
            <p>文本卡片</p>
            <OPCard title='理论重量' content='12.6kg' />
            <OPCard title='理论重量' content='12.6kg' />
          </Col>
          <Col span='8'>
            <p>图片卡片</p>
            <OPCard
              content='原包装整箱+缠绕膜'
              imgList={[
                {
                  url: 'https://img.alicdn.com/tfscom/TB117blRFzqK1RjSZFoXXbfcXXa',
                  fit: 'contain-in',
                },
              ]}
              backgroundColor='protection'
            />
          </Col>

          <Col span='8'>
            <p>冷链</p>
            <OPCard
              title='包裹防护方案'
              content='MC生鲜冷冻春秋季24H中部'
              imgList={[
                {
                  url: 'https://pkmt.oss-cn-hangzhou.aliyuncs.com/pkmt/20220307/20220307215759843/8e651e06-3df7-4479-8b50-e19cd55e0957.jpg',
                  fit: 'contain-out',
                },
              ]}
              backgroundColor='#D7EAFC'
              contentStyle={{
                fontSize: '40px',
                color: '#143666',
              }}
              titleStyle={{
                fontSize: '20px',
                color: '#6683A6',
              }}
            />
          </Col>
        </Row>
        <h1>颜色分类</h1>
        <Row gutter={16} wrap>
          <Col span='8'>
            <p>包材信息</p>
            <OPCard
              title='推荐包材'
              content={['BOX6977413', '商家兜底包材纸箱']}
              backgroundColor='pm'
            />
            <OPCard
              title='包装方式'
              content='海淘'
              backgroundColor='#945AFF'
              titleStyle={{
                color: 'white',
              }}
              contentStyle={{
                color: 'white',
              }}
            />
          </Col>
          <Col span='8'>
            <p>商品防护信息</p>
            <OPCard
              content='原包装整箱+缠绕膜'
              imgList={[
                {
                  url: 'https://img.alicdn.com/tfscom/TB117blRFzqK1RjSZFoXXbfcXXa',
                },
              ]}
              backgroundColor='protection'
            />
          </Col>
          <Col span='8'>
            <p>重点信息</p>
            <OPCard content='易鼠咬商品' backgroundColor='primary' />
          </Col>
        </Row>
        <h1>类型</h1>
        <Row gutter={16}>
          <Col span='8'>
            <p>单一文本</p>
            <OPCard content='易鼠咬商品' />
          </Col>
          <Col span='8'>
            <p>带标题文本</p>
            <OPCard title='理论重量' content='12.6kg' />
          </Col>
          <Col span='8'>
            <p>指定文字大小-24px</p>
            <OPCard
              className='custom-content-size'
              title='防护方案'
              content={['大葫芦泡4节 (DHLP004)*1', '缠绕膜(KCM001)*1']}
              backgroundColor='protection'
            />
          </Col>
        </Row>
        <h1>状态</h1>
        <Row gutter={16}>
          <Col span='8'>
            <p>选中</p>
            <OPCard
              title='未付尾款容器'
              content='A06'
              backgroundColor='pm'
              status='active'
            />
          </Col>
          <Col span='8'>
            <p>禁用</p>
            <OPCard
              title='已付尾款容器'
              content='A05'
              backgroundColor='protection'
              status='disabled'
            />
          </Col>
          <Col span='8'>
            <p>标题Tag</p>
            <OPCard
              title='已付尾款容器'
              content='A04'
              status='disabled'
              tag={{
                children: '已完结',
                type: 'disabled',
              }}
            />
          </Col>
        </Row>
        <h1>简单文本卡片高度</h1>
        <Row gutter={16}>
          <Col span='8'>
            <p>单行</p>
            <OPCard content='易鼠咬商品' />
          </Col>
          <Col span='8'>
            <p>多行</p>
            <OPCard content='我要用菜鸟来发货，重要客户请注意' />
          </Col>
          <Col span='8'>
            <p>卡片最大高：maxHeight</p>
            <OPCard
              content='我要用菜鸟来发货，重要客户请注意，内有易碎品注意防护，我要用菜鸟来发货，重要客户请注意'
              backgroundColor='pink'
              maxHeight='300px'
            />
          </Col>
        </Row>
        <h1>组合文本</h1>
        <Row gutter={16}>
          <Col span='8'>
            <p>上下布局</p>
            <OPCard.List
              dataSource={[
                { label: '商家卡片信息', value: '美宝莲旗舰店' },
                { label: '货主', value: '欧莱雅集团' },
              ]}
              maxHeight={true}
            />
          </Col>
          <Col span='8'>
            <p>左右布局，label宽度可自定义</p>
            <OPCard.List
              title='信息列表'
              labelAlign='left'
              dataSource={[
                { label: '店铺名称放', value: '虾选官方自营店' },
                { label: '订单备注', value: 'Stellar_销售订单' },
                { label: '卖家备注', value: '--' },
                {
                  label: '买家备注',
                  value: '买家备注了很多很多很多很多很多信息',
                },
                { label: '货主', value: '淘宝心选' },
                { label: '快递', value: '韵达快递' },
                { label: '篮号', value: 8 },
                { label: '货主', value: '淘宝心选' },
                { label: '快递', value: '韵达快递' },
                { label: '篮号', value: 8 },
              ]}
              maxHeight={true}
            />
          </Col>
          <Col span='8'>
            <p>泡沫箱</p>
            <OPCard
              title='泡沫箱指引'
              content={
                <div className='bubble-box'>
                  {[
                    { label: '泡沫箱-12873874' },
                    { label: '泡沫箱-78324', selected: true },
                    { label: '泡沫箱-33874837' },
                  ].map(({ label, selected }) => (
                    <div
                      className={['box-item', selected ? 'selected' : ''].join(
                        ' ',
                      )}
                    >
                      {label}
                    </div>
                  ))}
                </div>
              }
            />
          </Col>
        </Row>
        <h1>文本/图片</h1>
        <Row gutter={16} wrap>
          <Col span='8'>
            <p>单张图片</p>
            <OPCard
              title='SN码指引'
              imgList={[
                {
                  url: 'https://img.alicdn.com/tfs/TB1d6yPoXzqK1RjSZSgXXcpAVXa-1668-800.png',
                },
              ]}
            />
          </Col>
          <Col span='8'>
            <p>两张图片</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
                },
                {
                  url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
                },
              ]}
            />
          </Col>
          <Col span='8'>
            <p>大不压小，重不压轻</p>
            <OPCard
              content='大不压小，重不压轻'
              imgList={[
                {
                  url: 'https://img.alicdn.com/tfs/TB1R.40KNnaK1RjSZFBXXcW7VXa-120-120.png',
                  fit: 'contain-in',
                },
              ]}
            />
          </Col>
          <Col span='8'>
            <p>封箱指导</p>
            <OPCard
              content='封箱指导'
              imgList={[
                {
                  url: 'https://img.alicdn.com/imgextra/i2/O1CN01pligCA1JmYz4rjfyP_!!6000000001071-2-tps-629-302.png',
                },
              ]}
            />
          </Col>
          <Col span='8'>
            <p>封箱</p>
            <OPCard
              title='封箱'
              content='纸箱封箱胶带平整无翘起，封箱胶带两端需超出纸箱边缘80mm并黏贴平整，摇盖离缝不超过5mm。'
              imgList={[
                {
                  url: 'https://img.alicdn.com/tfs/TB1exFCKMHqK1RjSZFgXXa7JXXa-120-120.png',
                  fit: 'contain-in',
                },
              ]}
            />
          </Col>
        </Row>
        <h1>条码(参考jsbarcode)</h1>
        <Row gutter={16}>
          <Col span='6'>
            <OPCard
              content='强制完成'
              barcode={{
                value: '123',
                height: 80,
                width: 3.5,
                margin: 0,
              }}
            />
          </Col>
          <Col span='6'>
            <OPCard
              content='完成'
              barcode={{
                value: '456',
                height: 50,
                width: 4,
                margin: 0,
              }}
            />
          </Col>
          <Col span='6'>
            <OPCard
              title='WY-4礼袋'
              barcode={{
                value: '456',
                height: 50,
                width: 4,
                margin: 0,
              }}
              tag={{
                children: '已完结',
              }}
              imgList={[
                {
                  url: 'http://wh-cp-console.oss-cn-zhangjiakou.aliyuncs.com/20221229135721637?Expires=4825893441&OSSAccessKeyId=LTAI5tPg2iHf1JTs1QKCvRqn&Signature=pEQXbVOXL7eazY5%2F2CfNEjk%2BMGo%3D',
                  fit: 'contain-out',
                },
              ]}
              barcode={{
                value: '6946138556320',
                height: 50,
              }}
            />
          </Col>
        </Row>
        <h1>图片缩放：宽高等图</h1>
        <Row gutter={16}>
          <Col span='6'>
            <p>fit: contain-out (短边适应容器)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
                  fit: 'contain-out',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: contain-in (长边适应容器)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
                  fit: 'contain-in',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: width (宽度100%)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
                  fit: 'width',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: height (高度100%)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://petpress.net/wp-content/uploads/2019/10/samoyed-dog-1.jpg',
                  fit: 'height',
                },
              ]}
            />
          </Col>
        </Row>
        <h1>图片缩放：宽图</h1>
        <Row gutter={16}>
          <Col span='6'>
            <p>fit: contain-out (短边适应容器)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
                  fit: 'contain-out',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: contain-in (长边适应容器)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
                  fit: 'contain-in',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: width (宽度100%)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
                  fit: 'width',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: height (高度100%)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://images.chinatimes.com/newsphoto/2020-11-14/1024/20201114004076.jpg',
                  fit: 'height',
                },
              ]}
            />
          </Col>
        </Row>
        <h1>图片缩放：高图</h1>
        <Row gutter={16}>
          <Col span='6'>
            <p>fit: contain-out (短边适应容器)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
                  fit: 'contain-out',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: contain-in (长边适应容器)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
                  fit: 'contain-in',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: width (宽度100%)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
                  fit: 'width',
                },
              ]}
            />
          </Col>
          <Col span='6'>
            <p>fit: height (高度100%)</p>
            <OPCard
              title='高破品包装'
              imgList={[
                {
                  url: 'https://tse1-mm.cn.bing.net/th/id/R-C.c6282597c4447f9ff3802bd8b95dfe79?rik=ND0f9H9FmmAwKQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221090358-127552747.jpg&ehk=40r3jP4zNFa8NatiqF0NjV5SV%2fl9KdGMUTLXI6YGG%2f0%3d&risl=&pid=ImgRaw&r=0',
                  fit: 'height',
                },
              ]}
            />
          </Col>
        </Row>
        <h1>卡片操作</h1>
        <Row gutter={16}>
          <Col span='8'>
            <OPCard
              title='商品图片'
              imgList={[
                {
                  url: 'https://img.alicdn.com/tfs/TB1d6yPoXzqK1RjSZSgXXcpAVXa-1668-800.png',
                },
              ]}
              action={{
                name: '查看大图',
                hotkey: 'F6',
                onAction: () => {
                  alert('点击查看大图');
                },
              }}
            />
          </Col>
          <Col span='8'></Col>
          <Col span='8'></Col>
        </Row>
      </OPLayout>
    );
  }
}

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