Skip to content

Commit 6d83741

Browse files
OweQianOweQian
committed
style: reformate code
feat: 评论
1 parent 69ad743 commit 6d83741

File tree

10 files changed

+165
-68
lines changed

10 files changed

+165
-68
lines changed

‎pages/_document.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ export default function Document() {
77
<Html>
88
<Head/>
99
<body>
10-
<Main/>
11-
<NextScript/>
12-
<Script id="theme-script" strategy="beforeInteractive">
13-
{`const item = localStorage.getItem('theme') || 'light';
10+
<Main/>
11+
<NextScript/>
12+
<Script id="theme-script" strategy="beforeInteractive">
13+
{`const item = localStorage.getItem('theme') || 'light';
1414
localStorage.setItem('theme', item);
1515
document.getElementsByTagName('html')[0].dataset.theme = item;`}
16-
</Script>
16+
</Script>
1717
</body>
1818
</Html>
1919
);

‎pages/components/banner/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {Col, Row} from '@douyinfe/semi-ui';
44
import cName from "classnames";
55
import {ThemeContext} from "@/stores/theme";
66

7-
export interface IBannerProps {}
7+
export interface IBannerProps {
8+
}
89

910
const Banner: FC<IBannerProps> = ({}) => {
1011
const mainRef = useRef<HTMLDivElement>(null);
@@ -34,7 +35,7 @@ const Banner: FC<IBannerProps> = ({}) => {
3435
</Col>
3536
<Col xs={24} sm={24} md={24} lg={14} xl={14} offset={2}>
3637
<div className={styles.bannerImage}>
37-
<div className={styles.background} />
38+
<div className={styles.background}/>
3839
<div className={styles.icon}/>
3940
</div>
4041
</Col>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,20 +127,23 @@
127127
padding: 10rem 8rem;
128128
overflow: hidden;
129129
border-bottom: 1px solid var(--semi-color-border);
130+
130131
:global {
131132
.semi-row-flex {
132133
height: 100%;
133134
}
134135
}
136+
135137
.icon {
136138
width: 920px;
137139
position: relative;
138140
border-radius: 8px;
139-
height: 32.5rem!important;
141+
height: 32.5rem !important;
140142
border-bottom: 1px solid var(--semi-color-border);
141143
background-image: var(--banner-icon);
142144
background-size: 100% 100%;
143145
}
146+
144147
.container {
145148
display: flex;
146149
flex-direction: column;
@@ -179,12 +182,14 @@
179182
margin-top: 4rem;
180183
}
181184
}
185+
182186
.bannerImage {
183187
position: relative;
184188
width: 100%;
185189
padding-top: 20px;
186190
padding-left: 50px;
187191
}
192+
188193
.background {
189194
position: absolute;
190195
width: 640px;
@@ -194,6 +199,7 @@
194199
-webkit-filter: blur(120px);
195200
filter: blur(120px);
196201
opacity: .6;
202+
197203
&:before {
198204
content: "";
199205
position: absolute;
@@ -203,6 +209,7 @@
203209
top: 132px;
204210
background-color: rgb(var(--semi-purple-5));
205211
}
212+
206213
&:after {
207214
content: "";
208215
position: absolute;

‎pages/components/contributors/index.tsx‎

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,83 @@
11
import {FC} from "react";
2-
import {Row, Col, Descriptions} from '@douyinfe/semi-ui';
2+
import {Avatar, Card, Col, Descriptions, Row, Space} from '@douyinfe/semi-ui';
33
import styles from "./styles.module.scss";
4-
import Image from "next/image";
5-
import ContributorForQQ from '@/public/contributor_1.png';
6-
import ContributorForWechat from '@/public/contributor_2.png';
74

85
export interface IContributorsProps {
96
}
107

118
const Contributors: FC<IContributorsProps> = ({}) => {
9+
const {Meta} = Card;
10+
const Comments = [{
11+
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg',
12+
name: 'Mengzhou',
13+
content: '接入简单易上手；API 丰富全面。'
14+
}, {
15+
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg',
16+
name: 'Mengzhou',
17+
content: '有很多公司内的其他业务使用，有比较多的样例参考，参考其他业务平台的设计方案，统一平台的交付标准。',
18+
}, {
19+
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg',
20+
name: 'Mengzhou',
21+
content: '接入简单易上手；API 丰富全面。'
22+
}, {
23+
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg',
24+
name: 'Mengzhou',
25+
content: '接入简单易上手；API 丰富全面。'
26+
}, {
27+
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg',
28+
name: 'Mengzhou',
29+
content: 'API 丰富全面。',
30+
style: { marginTop: '40px'},
31+
}, {
32+
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg',
33+
name: 'Mengzhou',
34+
content: '接入简单易上手；API 丰富全面。'
35+
}]
1236
return (
1337
<div className={styles.contributorsContainer}>
1438
<p className={styles.title}>与用户共同成长</p>
1539
<p className={styles.subTitle}>IoTSharp 重视我们的用户，加入并助力我们不断完善</p>
1640
<Descriptions align="center" size="large" row>
17-
<Descriptions.Item itemKey="Stars">795+</Descriptions.Item>
18-
<Descriptions.Item itemKey="Fork">1100+</Descriptions.Item>
19-
<Descriptions.Item itemKey="Download">1000+</Descriptions.Item>
41+
<Descriptions.Item itemKey="Stars">600+</Descriptions.Item>
42+
<Descriptions.Item itemKey="Fork">150+</Descriptions.Item>
43+
<Descriptions.Item itemKey="Download">180+</Descriptions.Item>
2044
<Descriptions.Item itemKey="Contributors">30+</Descriptions.Item>
2145
</Descriptions>
2246
<div className={styles.imageBox}>
23-
<Row type="flex" gutter={80}>
24-
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
25-
<Image src={ContributorForQQ} alt="" width={90} height={90}/>
26-
</Col>
27-
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
28-
<Image src={ContributorForWechat} alt="" width={90} height={90}/>
29-
</Col>
47+
<Row gutter={32} type="flex" align="top">
48+
{
49+
Comments?.map((comment, index) => {
50+
return (
51+
<Col span={8} style={{...comment?.style}}>
52+
<Card
53+
footerLine={false}
54+
headerLine={false}
55+
title={
56+
<Meta
57+
avatar={
58+
<Avatar
59+
alt=""
60+
size="default"
61+
src={comment?.avatar}
62+
/>
63+
}
64+
/>
65+
}
66+
footerStyle={{display: 'flex', justifyContent: 'flex-end'}}
67+
footer={
68+
<Space>
69+
<div>{comment?.name}</div>
70+
</Space>
71+
}
72+
>
73+
{comment?.content}
74+
</Card>
75+
</Col>
76+
)
77+
})
78+
}
3079
</Row>
3180
</div>
32-
3381
</div>
3482
);
3583
};

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
flex-direction: column;
66
width: 100%;
77
padding: 10rem 8rem;
8+
89
.imageBox {
910
width: 100%;
1011
margin-top: 3rem;
1112
}
13+
1214
.title {
1315
font-size: 2rem;
1416
color: var(--semi-color-text-0);
@@ -17,6 +19,7 @@
1719
text-align: center;
1820
vertical-align: middle;
1921
}
22+
2023
.subTitle {
2124
font-size: 1.125rem;
2225
color: var(--semi-color-text-0);
@@ -26,28 +29,34 @@
2629
margin-bottom: 3rem;
2730
margin-top: 0;
2831
}
32+
2933
img {
3034
width: 100%;
3135
height: 25rem;
3236
border-radius: 8px;
3337
}
38+
3439
:global {
3540
.semi-descriptions {
3641
display: flex;
3742
width: 100%;
3843
align-items: center;
3944
padding: 0 -20px;
4045
}
46+
4147
.semi-row {
4248
margin-top: 3rem;
4349
}
50+
4451
.semi-descriptions table {
4552
width: 100%;
4653
}
54+
4755
.semi-descriptions-double tbody {
4856
width: 100%;
4957
justify-content: space-between;
5058
}
59+
5160
.semi-descriptions-value {
5261
color: rgb(var(--semi-purple-5));
5362
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
width: 100%;
33
background: #1f1f1f;
44
padding: 2rem 8rem;
5+
56
.titleContainer {
67
display: flex;
78
flex-direction: column;
@@ -29,13 +30,16 @@
2930
line-height: .5rem;
3031
}
3132
}
33+
3234
.list {
3335
margin-top: 3rem;
36+
3437
.item {
3538
display: flex;
3639
align-items: center;
3740
flex-direction: column;
3841
margin-bottom: 3rem;
42+
3943
.title {
4044
margin-top: 1rem;
4145
font-weight: 700;

‎pages/components/platform/index.tsx‎

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import {FC, useContext, useRef, useState} from "react";
2-
import {Col, Row} from '@douyinfe/semi-ui';
3-
import Image from "next/image";
4-
import {IPopupRef, Popup} from "@/components/popup";
1+
import {FC, useContext} from "react";
2+
import {Carousel} from '@douyinfe/semi-ui';
53
import TenantImage from '@/public/img_9.png';
64
import TenantImageDark from '@/public/img_10.png';
75
import RuleImage from '@/public/img_6.png';
@@ -20,9 +18,7 @@ export interface IPlatformProps {
2018
}
2119

2220
const Platform: FC<IPlatformProps> = ({}) => {
23-
const {setTheme, theme} = useContext(ThemeContext);
24-
const popupRef = useRef<IPopupRef>(null);
25-
const [currentImage, setCurrentImage] = useState(null)
21+
const {theme} = useContext(ThemeContext);
2622
const Options = [{
2723
image: theme === Themes.light ? TenantImage : TenantImageDark,
2824
title: '多租户',
@@ -40,39 +36,34 @@ const Platform: FC<IPlatformProps> = ({}) => {
4036
title: '资产管理',
4137
description: '使用多个设备及其属性和遥测可抽象为资产更利于管理设备和数据分析。'
4238
},
43-
{
44-
image: theme === Themes.light ? ProductImage : ProductImageDark,
45-
title: '产品管理',
46-
description: '为设备或者网关提供简洁有效的数据模板、字典、认证、素材组织能力。'
47-
}]
48-
const viewImage = (image: any): void => {
49-
setCurrentImage(image)
50-
popupRef.current?.open();
51-
}
39+
{
40+
image: theme === Themes.light ? ProductImage : ProductImageDark,
41+
title: '产品管理',
42+
description: '为设备或者网关提供简洁有效的数据模板、字典、认证、素材组织能力。'
43+
}]
44+
const style = {
45+
width: '100%',
46+
height: '400px',
47+
};
5248
return (
5349
<div className={styles.platformContainer}>
54-
{
55-
Options?.map((option, index) => {
56-
return (
57-
<Row type="flex" gutter={100} className={styles.row} key={index}>
58-
<Col xs={24} sm={24} md={24} lg={12} xl={12} order={index % 2 == 0 ? 1 : 2}>
59-
<Image src={option?.image} width={400} height={500} alt="" onClick={() => viewImage(option?.image)}/>
60-
</Col>
61-
<Col xs={24} sm={24} md={24} lg={12} xl={12} order={index % 2 == 0 ? 2 : 1}>
62-
<div className={styles.content}>
63-
<div className={styles.title}>{option?.title}</div>
64-
<div className={styles.line}/>
65-
<p>{option?.description}</p>
50+
<p className={styles.title}>打造现代 Web 应用</p>
51+
<p className={styles.subTitle}>与现代操作系统、浏览器更贴近的设计语言</p>
52+
<Carousel style={style} speed={1000} animation='fade' theme='dark' autoPlay={false} showIndicator={false}>
53+
{
54+
Options.map((option, index) => {
55+
return (
56+
<>
57+
<div key={index} style={{backgroundSize: 'cover', backgroundImage: `url(${option.image})`}}/>
58+
<div>
59+
<div>{option.title}</div>
60+
<div>{option.description}</div>
6661
</div>
67-
</Col>
68-
</Row>
69-
)
70-
})
71-
}
72-
<Popup ref={popupRef}>
73-
{/*// @ts-ignore*/}
74-
<Image src={currentImage} width={1000} height={550} alt=""/>
75-
</Popup>
62+
</>
63+
);
64+
})
65+
}
66+
</Carousel>
7667
</div>
7768
);
7869
};

0 commit comments

Comments
 (0)