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
| import React from 'react';
| import { Card, Tag, Space } from 'antd';
| import { CalendarOutlined } from '@ant-design/icons';
|
| const LawCard = ({ lawItem }) => {
| const {
| lawName,
| effectLevel,
| status,
| org,
| publishDate,
| effectiveDate,
| articlesPreview = [],
| } = lawItem;
|
| const statusColorMap = {
| 有效: 'green',
| 失效: 'orange',
| 废止: 'red',
| };
|
| return (
| <Card
| hoverable
| title={lawName}
| extra={
| <Tag color={statusColorMap[status] || 'default'}>
| {status || '未知状态'}
| </Tag>
| }
| >
| <Space size="middle" wrap>
| <Tag color="blue">{effectLevel}</Tag>
| {org && <Tag>{org}</Tag>}
| {publishDate && (
| <span>
| <CalendarOutlined /> 公布：{publishDate}
| </span>
| )}
| {effectiveDate && (
| <span>
| <CalendarOutlined /> 施行：{effectiveDate}
| </span>
| )}
| </Space>
|
| {articlesPreview.length > 0 && (
| <div style={{ marginTop: 12 }}>
| <div style={{ fontWeight: 500, marginBottom: 4 }}>部分条文：</div>
| {articlesPreview.slice(0, 2).map((a) => (
| <div key={a.articleNo} style={{ fontSize: 13, color: '#555' }}>
| <span style={{ fontWeight: 500, marginRight: 8 }}>
| {a.articleNo}
| </span>
| {a.contentSnippet}
| </div>
| ))}
| </div>
| )}
| </Card>
| );
| };
|
| export default LawCard;
|
|
