Skip to content

Commit c1681bb

Browse files
OweQianOweQian
committed
feat: 贡献者模块
1 parent 0d5b787 commit c1681bb

File tree

2 files changed

+221
-44
lines changed

2 files changed

+221
-44
lines changed

‎pages/components/contributors/index.tsx‎

Lines changed: 178 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,191 @@
11
import {FC} from "react";
2-
import {Col, Row} from '@douyinfe/semi-ui';
2+
import {Row, Col, Descriptions, Card, Avatar, Space, Button, Typography} from '@douyinfe/semi-ui';
33
import styles from "./styles.module.scss";
44

55
export interface IContributorsProps {
66
}
77

88
const Contributors: FC<IContributorsProps> = ({}) => {
9+
const { Meta } = Card;
10+
const { Text } = Typography;
911
return (
1012
<div className={styles.contributorsContainer}>
11-
<Row className={styles.row} type="flex" align="middle">
12-
<Col span={7}>
13-
<div className={styles.title}>参与建设</div>
14-
<div className={styles.description}>很多小伙伴在和我们一同建设 IoTSharp，如果你有兴趣，欢迎加入我们 。</div>
15-
</Col>
16-
<Col span={10} offset={2}>
17-
<a href="https://github.com/iotsharp/iotsharp/graphs/contributors">
18-
<img src="https://contrib.rocks/image?repo=iotsharp/iotsharp" />
19-
</a>
20-
<a href="https://github.com/iotsharp/ClientAppWithVue3/graphs/contributors">
21-
<img src="https://contrib.rocks/image?repo=iotsharp/ClientAppWithVue3" />
22-
</a>
23-
</Col>
24-
</Row>
13+
<p className={styles.title}>与用户共同成长</p>
14+
<p className={styles.subTitle}>IoTSharp 重视我们的用户，加入并助力我们不断完善</p>
15+
<Descriptions align="center" size="large" row>
16+
<Descriptions.Item itemKey="Stars">795+</Descriptions.Item>
17+
<Descriptions.Item itemKey="Fork">1100+</Descriptions.Item>
18+
<Descriptions.Item itemKey="Download">1000+</Descriptions.Item>
19+
<Descriptions.Item itemKey="Contributors">30+</Descriptions.Item>
20+
</Descriptions>
21+
<div className={styles.imageBox}>
22+
<Row gutter={32} type="flex" align="top">
23+
<Col span={8}>
24+
<Card
25+
footerLine={false}
26+
headerLine={false}
27+
title={
28+
<Meta
29+
title=""
30+
description=""
31+
avatar={
32+
<Avatar
33+
alt='Card meta img'
34+
size="default"
35+
src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
36+
/>
37+
}
38+
/>
39+
}
40+
footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
41+
footer={
42+
<Space>
43+
<div>@Mengzhou</div>
44+
</Space>
45+
}
46+
>
47+
接入简单易上手；API 丰富全面。
48+
</Card>
49+
</Col>
50+
<Col span={8}>
51+
<Card
52+
footerLine={false}
53+
headerLine={false}
54+
title={
55+
<Meta
56+
title=""
57+
description=""
58+
avatar={
59+
<Avatar
60+
alt='Card meta img'
61+
size="default"
62+
src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
63+
/>
64+
}
65+
/>
66+
}
67+
footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
68+
footer={
69+
<Space>
70+
<div>@Mengzhou</div>
71+
</Space>
72+
}
73+
>
74+
有很多公司内的其他业务使用，有比较多的样例参考，参考其他业务平台的设计方案，统一平台的交付标准。
75+
</Card>
76+
</Col>
77+
<Col span={8}>
78+
<Card
79+
footerLine={false}
80+
headerLine={false}
81+
title={
82+
<Meta
83+
title=""
84+
description=""
85+
avatar={
86+
<Avatar
87+
alt='Card meta img'
88+
size="default"
89+
src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
90+
/>
91+
}
92+
/>
93+
}
94+
footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
95+
footer={
96+
<Space>
97+
<div>@Mengzhou</div>
98+
</Space>
99+
}
100+
>
101+
接入简单易上手；API 丰富全面。
102+
</Card>
103+
</Col>
104+
<Col span={8}>
105+
<Card
106+
footerLine={false}
107+
headerLine={false}
108+
title={
109+
<Meta
110+
title=""
111+
description=""
112+
avatar={
113+
<Avatar
114+
alt='Card meta img'
115+
size="default"
116+
src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
117+
/>
118+
}
119+
/>
120+
}
121+
footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
122+
footer={
123+
<Space>
124+
<div>@Mengzhou</div>
125+
</Space>
126+
}
127+
>
128+
接入简单易上手；API 丰富全面。
129+
</Card>
130+
</Col>
131+
<Col span={8} style={{marginTop: '40px'}}>
132+
<Card
133+
footerLine={false}
134+
headerLine={false}
135+
title={
136+
<Meta
137+
title=""
138+
description=""
139+
avatar={
140+
<Avatar
141+
alt='Card meta img'
142+
size="default"
143+
src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
144+
/>
145+
}
146+
/>
147+
}
148+
footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
149+
footer={
150+
<Space>
151+
<div>@Mengzhou</div>
152+
</Space>
153+
}
154+
>
155+
接入简单易上手。
156+
</Card>
157+
</Col>
158+
<Col span={8}>
159+
<Card
160+
footerLine={false}
161+
headerLine={false}
162+
title={
163+
<Meta
164+
title=""
165+
description=""
166+
avatar={
167+
<Avatar
168+
alt='Card meta img'
169+
size="default"
170+
src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
171+
/>
172+
}
173+
/>
174+
}
175+
footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
176+
footer={
177+
<Space>
178+
<div>@Mengzhou</div>
179+
</Space>
180+
}
181+
>
182+
接入简单易上手；API 丰富全面。
183+
</Card>
184+
</Col>
185+
</Row>
186+
</div>
25187
</div>
26188
);
27189
};
28190

29-
export default Contributors;
191+
export default Contributors;

‎pages/components/contributors/styles.module.scss‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,55 @@
11
.contributorsContainer {
22
display: flex;
3-
-ms-flex-pack: justify;
43
justify-content: space-between;
54
align-items: center;
6-
width: 60%;
7-
margin-bottom: 5rem;
8-
padding-top: 3.125rem;
9-
padding-bottom: 3.125rem;
10-
background: var(--yellow-color);
11-
border-radius: 0 126px 126px 0;
12-
position: relative;
13-
&:before {
14-
display: block;
15-
content: "";
16-
height: 100%;
17-
width: 800px;
18-
position: absolute;
19-
left: -800px;
20-
top: 0;
21-
background: var(--yellow-color);
22-
}
23-
.row {
24-
margin-left: -100px;
5+
flex-direction: column;
6+
width: 100%;
7+
padding: 10rem 8rem;
8+
.imageBox {
9+
width: 100%;
10+
margin-top: 3rem;
2511
}
2612
.title {
27-
font-size: 1.25rem;
28-
font-weight: 700;
29-
line-height: 3.5rem;
30-
letter-spacing: .5px;
13+
font-size: 2rem;
14+
color: var(--semi-color-text-0);
15+
font-weight: 600;
16+
margin-top: 0;
17+
text-align: center;
18+
vertical-align: middle;
19+
}
20+
.subTitle {
21+
font-size: 1.125rem;
22+
color: var(--semi-color-text-0);
23+
text-align: left;
24+
vertical-align: top;
25+
font-weight: 400;
26+
margin-bottom: 3rem;
27+
margin-top: 0;
3128
}
3229
img {
3330
width: 100%;
31+
height: 25rem;
32+
border-radius: 8px;
3433
}
35-
.description {
36-
font-size: 1rem;
37-
line-height: 1.56rem;
38-
letter-spacing: .15px;
34+
:global {
35+
.semi-descriptions {
36+
display: flex;
37+
width: 100%;
38+
align-items: center;
39+
padding: 0 -20px;
40+
}
41+
.semi-row {
42+
margin-top: 3rem;
43+
}
44+
.semi-descriptions table {
45+
width: 100%;
46+
}
47+
.semi-descriptions-double tbody {
48+
width: 100%;
49+
justify-content: space-between;
50+
}
51+
.semi-descriptions-value {
52+
color: rgb(var(--semi-purple-5));
53+
}
3954
}
4055
}

0 commit comments

Comments
 (0)