OrderStatisticCard.tsx
1.84 KB
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
import Icon from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { Flex } from 'antd';
export default () => {
const HeartSvg = () => (
<svg width="200" height="200">
<path
d="M859.062857 256l-170.788571 20.48a6.948571 6.948571 0 0 0-4.022857 11.702857l50.834285 49.005714-193.462857 193.828572-87.405714-87.405714a13.897143 13.897143 0 0 0-19.382857 0l-275.748572 275.748571a7.314286 7.314286 0 0 0 0 9.874286L197.851429 768a6.948571 6.948571 0 0 0 9.508571 0l237.348571-236.982857 87.04 87.04a14.262857 14.262857 0 0 0 19.382858 0l232.594285-232.594286 50.834286 50.834286a6.948571 6.948571 0 0 0 11.702857-4.022857l20.48-170.788572a6.582857 6.582857 0 0 0-7.68-5.485714z"
fill="#d81e06"
></path>
</svg>
);
const CardTitle = ({ title }) => {
return <span className="text-sm text-stone-600">{title}</span>;
};
const CardContent = ({ unit, content, icon }) => {
return (
<Flex vertical>
<Flex>
<div>
<span className="text-base">{unit}</span>
<span className="text-2xl">{content}</span>
</div>
<Icon component={HeartSvg} />
</Flex>
<div>
<span className="text-sm text-stone-600">{icon}</span>
</div>
</Flex>
);
};
return (
<ProCard title="卡片组展开" ghost gutter={8} collapsible>
<ProCard bordered title={<CardTitle title={'总收入'} />}>
<CardContent unit="￥" content={19000} icon="" />
</ProCard>
<ProCard title={<CardTitle title={'指标'} />} bordered></ProCard>
<ProCard title={<CardTitle title={'总订单量'} />} bordered></ProCard>
<ProCard title={<CardTitle title={'未审核订单'} />} bordered></ProCard>
<ProCard title={<CardTitle title={'未发货订单'} />} bordered></ProCard>
</ProCard>
);
};