自适应卡片布局

使用响应式设计，使得用户在屏幕尺寸发生变化时，动态调整页面的卡片布局。

自适应卡片布局

GroupCardListLayout组件实现布局，GroupCard组件实现卡片样式

// index.js
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import GroupCard from '@/components/GroupCard';
import styles from './index.less';

class GroupCardListLayout extends PureComponent {
  static propTypes = {
    data: PropTypes.array.isRequired,
    onEditDivision: PropTypes.func.isRequired,
    onDeleteDivision: PropTypes.func.isRequired,
  };

  render() {
    const { data, onEditDivision, onDeleteDivision } = this.props;

    return (
      <div>
        {data.length > 0 && (
          <div className={styles.modelContent}>
            {data.map((project) => (
              <GroupCard
                key={project.divisionId}
                record={project}
                onEditDivision={onEditDivision}
                onDeleteDivision={onDeleteDivision}
              />
            ))}
          </div>
        )}
      </div>
    );
  }
}

export default GroupCardListLayout;

  // index.less

@import '~antd/lib/style/themes/default.less';

.modelContent {
  display: grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-template-rows:repeat(auto-fill,minmax(160,160));
  grid-column-gap:10px;
  grid-row-gap:20px;
}

 // index.js

import React, { PureComponent } from 'react';
import { Card, Tooltip, Icon, Row ,Col} from 'antd';
import styles from './index.less';
import PropTypes from 'prop-types';

class GroupCard extends PureComponent {
  static propTypes = {
    record: PropTypes.object.isRequired,
    onEditDivision: PropTypes.func.isRequired,
    onDeleteDivision: PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { record, onEditDivision, onDeleteDivision } = this.props;
    const { divisionName, userList } = record;
    return (
      <div className={styles.main}>
        <Card className={styles.card}
          title={`${divisionName} （共 ${userList.length} 人）`}
          bodyStyle={{ height: '100px', width: '300px' }}
          actions={[
            <Tooltip title='编辑' key="edit">
              <Icon type="edit" onClick={() => onEditDivision(record)} />
            </Tooltip>,
            <Tooltip title='删除' key="delete">
              <Icon type="delete" onClick={() => onDeleteDivision(record)} />
            </Tooltip>,
          ]}
        >
        </Card>
      </div>
    );
  }
}

export default GroupCard;

// index.less

@import '~antd/lib/style/themes/default.less';

.main{
  width: 100%;
  height: 100%;
  display: flex;
}

// 卡片
.card {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3%;
  border: 0.5px solid rgba(226, 226, 226, 1);
  //width: 320px;
}