Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 4x 4x 12x 12x 12x 12x 12x 12x 12x 12x | /* eslint-disable react/destructuring-assignment */
/*
* @Describe: 根据业务收拢的基础卡片组件
* @Author: kexu9
* @Date: 2021-05-17 16:37:01
* @Last Modified by: kexu9
* @Last Modified time: 2021-05-19 10:54:18
*/
import React from 'react';
import cls from 'classnames';
import {Card, CardProps, Typography} from '../..';
import Button from '../button';
import withProps from '../../utils/with-props';
import scopedClasses from '../../utils/scopedClasses';
import {LLCardBasicProps} from './types';
import './ll_card.less';
const sc = scopedClasses('ll-card-basic');
/* 预定义样式 */
const LLCardBasic = withProps<CardProps>(
Card,
{
headStyle: {border: 0, fontSize: 24, fontWeight: 'bold', padding: '22px 38px 0 40px'},
bodyStyle: {padding: 40}
},
{
mergeFunction(predefineProps, props) {
return {
...predefineProps,
...props,
headStyle: {...predefineProps.headStyle, ...props.headStyle},
bodyStyle: {...predefineProps.bodyStyle, ...props.bodyStyle}
};
}
}
);
/* 增加查看按钮 */
export default (props: LLCardBasicProps) => {
const {children, onViewButtonClick, showViewButton = true, title, icon, className} = props;
const copiedProps = {...props};
delete copiedProps.icon;
delete copiedProps.cardType;
delete copiedProps.onViewButtonClick;
delete copiedProps.showViewButton;
return (
<LLCardBasic {...copiedProps} className={cls(sc(), className)} title={null}>
<div className={sc('body')}>
{icon ? <span className={sc('icon-container')}>{icon}</span> : null}
<div className={sc('content')}>
<div className={sc('title-container')}>
<Typography.Title className={sc('title')} level={3} ellipsis>
{title}
</Typography.Title>
</div>
<div className={sc('content-container')}>{children}</div>
</div>
</div>
{showViewButton ? (
<div style={{textAlign: 'right', marginTop: 38, marginBottom: -12}}>
<Button type="link" onClick={onViewButtonClick} style={{padding: 0}}>
查看
</Button>
</div>
) : null}
</LLCardBasic>
);
};
|