2019-12-26 15:27:52 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import { Card, Row, Col } from 'antd';
|
|
|
|
import './MorePage.less';
|
|
|
|
|
|
|
|
interface MoreProps {
|
|
|
|
title: string;
|
|
|
|
description: string;
|
|
|
|
date: string;
|
|
|
|
img: string;
|
|
|
|
source: 'zhihu' | 'yuque';
|
|
|
|
href: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
const SourceImages = {
|
|
|
|
zhihu: 'https://gw.alipayobjects.com/zos/basement_prod/5f4e1fd0-d255-4309-b181-a3715a720ebe.svg',
|
|
|
|
yuque: 'https://gw.alipayobjects.com/zos/basement_prod/53e7a5b8-c9f4-45a4-8378-cbf50f2dd0d0.svg',
|
|
|
|
};
|
|
|
|
|
|
|
|
const MORE_LIST: MoreProps[] = [
|
|
|
|
{
|
2020-04-20 11:52:50 +08:00
|
|
|
title: '揭密可视化专家配色秘笈',
|
|
|
|
description: '颜色搭配不仅可以传递出美感,颜色还可以通过不同的组合排序,形成一门新的界面语言,讲述数据的故事。',
|
|
|
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*M7rLR5follIAAAAAAAAAAABkARQnAQ',
|
|
|
|
date: '2020-04-02',
|
2020-01-20 17:21:29 +08:00
|
|
|
source: 'zhihu',
|
2020-04-20 11:52:50 +08:00
|
|
|
href: 'https://zhuanlan.zhihu.com/p/112540818',
|
2019-12-26 15:27:52 +08:00
|
|
|
},
|
|
|
|
{
|
2020-04-20 11:52:50 +08:00
|
|
|
title: 'HiTu 插画资产设计分享',
|
2020-02-04 18:36:39 +08:00
|
|
|
description:
|
2020-04-20 11:52:50 +08:00
|
|
|
'分享一下我们在做 HiTu 插画设计的一些过程和方法,希望能给同样做插画资产的同学带来帮助与启发。',
|
|
|
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cJdyS4KVDlgAAAAAAAAAAABkARQnAQ',
|
|
|
|
date: '2020-03-16',
|
2019-12-26 15:27:52 +08:00
|
|
|
source: 'zhihu',
|
2020-04-20 11:52:50 +08:00
|
|
|
href: 'https://zhuanlan.zhihu.com/p/112541651',
|
2019-12-26 15:27:52 +08:00
|
|
|
},
|
|
|
|
{
|
2020-04-20 11:52:50 +08:00
|
|
|
title: '从常用图表到 DashBoard 页面模板,懒人套餐请享用吧!',
|
2019-12-26 15:27:52 +08:00
|
|
|
description:
|
2020-04-20 11:52:50 +08:00
|
|
|
'Ant Design 4.0 和 AntV 的重磅产品 G2 4.0 发布之际,图表的样式也跟着大升级了哦。',
|
|
|
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*d_D0TLmwFLoAAAAAAAAAAABkARQnAQ',
|
|
|
|
date: '2020-03-11',
|
2019-12-26 15:27:52 +08:00
|
|
|
source: 'zhihu',
|
2020-04-20 11:52:50 +08:00
|
|
|
href: 'https://zhuanlan.zhihu.com/p/111373360',
|
2019-12-26 15:27:52 +08:00
|
|
|
},
|
|
|
|
{
|
2020-04-20 11:52:50 +08:00
|
|
|
title: '言之有序',
|
2019-12-26 15:27:52 +08:00
|
|
|
description:
|
2020-04-20 11:52:50 +08:00
|
|
|
'大到一个系统,小到一个按钮,背后的每一条规则既要思考设计的易用性,同时也要去推敲组织的合理性。',
|
|
|
|
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*J1SBR47PngwAAAAAAAAAAABkARQnAQ',
|
|
|
|
date: '2020-03-03',
|
2019-12-26 15:27:52 +08:00
|
|
|
source: 'zhihu',
|
2020-04-20 11:52:50 +08:00
|
|
|
href: 'https://zhuanlan.zhihu.com/p/110442621',
|
2019-12-26 15:27:52 +08:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const MoreCard = ({ title, description, date, img, source, href }: MoreProps) => {
|
|
|
|
return (
|
|
|
|
<Col xs={24} sm={6}>
|
2020-02-04 18:36:39 +08:00
|
|
|
<a
|
|
|
|
href={href}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
onClick={() => {
|
|
|
|
if (window.gtag) {
|
|
|
|
window.gtag('event', '点击', {
|
|
|
|
event_category: '首页文章',
|
|
|
|
event_label: href,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
2019-12-26 15:27:52 +08:00
|
|
|
<Card hoverable cover={<img alt={title} src={img} />} className="more-card">
|
|
|
|
<Card.Meta title={title} description={description} />
|
|
|
|
<div>
|
|
|
|
{date}
|
|
|
|
<span className="more-card-source">
|
|
|
|
<img src={SourceImages[source]} alt={source} />
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</Card>
|
|
|
|
</a>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default function MorePage() {
|
|
|
|
return (
|
|
|
|
<Row gutter={[24, 32]}>
|
|
|
|
{MORE_LIST.map(more => (
|
|
|
|
<MoreCard key={more.title} {...more} />
|
|
|
|
))}
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
}
|