Skip to content

Commit 2edda04

Browse files
OweQianOweQian
committed
refactor: 平台模块
1 parent 6d83741 commit 2edda04

File tree

4 files changed

+83
-27
lines changed

4 files changed

+83
-27
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313

1414
.title {
1515
font-size: 2rem;
16-
color: var(--semi-color-text-0);
1716
font-weight: 600;
1817
margin-top: 0;
1918
text-align: center;
@@ -22,7 +21,6 @@
2221

2322
.subTitle {
2423
font-size: 1.125rem;
25-
color: var(--semi-color-text-0);
2624
text-align: left;
2725
vertical-align: top;
2826
font-weight: 400;

‎pages/components/platform/index.tsx‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,71 @@
11
import {FC, useContext} from "react";
2+
import Image from "next/image";
23
import {Carousel} from '@douyinfe/semi-ui';
34
import TenantImage from '@/public/img_9.png';
4-
import TenantImageDark from '@/public/img_10.png';
55
import RuleImage from '@/public/img_6.png';
6-
import RuleImageDark from '@/public/img_12.png';
76
import ResourceImage from '@/public/img_8.png';
8-
import ResourceImageDark from '@/public/img_13.png';
97
import DeviceImage from '@/public/img_5.png';
10-
import DeviceImageDark from '@/public/img_11.png';
118
import ProductImage from '@/public/img_7.png';
12-
import ProductImageDark from '@/public/img_14.png';
139
import styles from "./styles.module.scss";
1410
import {ThemeContext} from "@/stores/theme";
15-
import {Themes} from "@/constants/enum";
1611

1712
export interface IPlatformProps {
1813
}
1914

2015
const Platform: FC<IPlatformProps> = ({}) => {
2116
const {theme} = useContext(ThemeContext);
2217
const Options = [{
23-
image: theme === Themes.light ? TenantImage : TenantImageDark,
18+
image: TenantImage,
19+
background: 'rgb(230, 232, 234)',
2420
title: '多租户',
2521
description: '通过多租户，充分的利用系统资源为多个客户提供服务并确保数据彻底隔离。'
2622
}, {
27-
image: theme === Themes.light ? DeviceImage : DeviceImageDark,
23+
image: DeviceImage,
24+
background: 'rgb(239, 202, 240)',
2825
title: '数字孪生',
2926
description: '通过数字孪生使得设备的属性数据、遥测数据、数据清洗、告警更容易管理和使用'
3027
}, {
31-
image: theme === Themes.light ? RuleImage : RuleImageDark,
28+
image: RuleImage,
29+
background: 'rgb(226, 209, 244)',
3230
title: '规则链引擎',
3331
description: '通过规则链引擎利用多种语言脚本来扩展你对数据的分析和处理。'
3432
}, {
35-
image: theme === Themes.light ? ResourceImage : ResourceImageDark,
33+
image: ResourceImage,
34+
background: 'rgb(209, 216, 240)',
3635
title: '资产管理',
3736
description: '使用多个设备及其属性和遥测可抽象为资产更利于管理设备和数据分析。'
3837
},
3938
{
40-
image: theme === Themes.light ? ProductImage : ProductImageDark,
39+
image: ProductImage,
4140
title: '产品管理',
41+
background: 'rgb(203, 231, 254)',
4242
description: '为设备或者网关提供简洁有效的数据模板、字典、认证、素材组织能力。'
4343
}]
4444
const style = {
4545
width: '100%',
46-
height: '400px',
46+
height: '916px',
4747
};
4848
return (
4949
<div className={styles.platformContainer}>
5050
<p className={styles.title}>打造现代 Web 应用</p>
5151
<p className={styles.subTitle}>与现代操作系统、浏览器更贴近的设计语言</p>
52-
<Carousel style={style} speed={1000} animation='fade' theme='dark' autoPlay={false} showIndicator={false}>
52+
<Carousel showIndicator={false} style={style} speed={1000} animation='fade' theme='dark'>
5353
{
5454
Options.map((option, index) => {
5555
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>
56+
<div>
57+
<div className={styles.imgWrapper} style={{backgroundColor: option.background}}>
58+
<Image src={option.image as unknown as string} unoptimized={true}
59+
priority={true}
60+
layout="fill"
61+
quality={100}
62+
alt="" />
6163
</div>
62-
</>
64+
<div className={styles.imgInfo}>
65+
<div className={styles.logo}>{option.title}</div>
66+
<div className={styles.imgInfoText}>{option.description}</div>
67+
</div>
68+
</div>
6369
);
6470
})
6571
}

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

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,63 @@
44
align-items: center;
55
flex-direction: column;
66
width: 100%;
7-
padding: 10rem 8rem;
8-
7+
padding: 10rem 8rem 0;
8+
:global {
9+
.semi-carousel-arrow-next {
10+
width: 50px;
11+
height: 50px;
12+
background-color: var(--primary-color);
13+
color: var(--primary-background-color);
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
border-radius: 50%;
18+
}
19+
.semi-carousel-arrow-prev {
20+
width: 50px;
21+
height: 50px;
22+
background-color: var(--primary-color);
23+
color: var(--primary-background-color);
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
border-radius: 50%;
28+
}
29+
}
30+
.imgWrapper {
31+
height: 50rem;
32+
width: 90%;
33+
margin: 0 auto;
34+
border-radius: 1.5rem;
35+
position: relative;
36+
background-color: rgba(var(--semi-grey-1));
37+
img {
38+
width: 94%!important;
39+
left: 0;
40+
right:0;
41+
margin: 2.5rem auto 0;
42+
border-radius: .75rem;
43+
}
44+
}
45+
.imgInfo {
46+
width: 90%;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
margin: 5rem auto 0;
51+
.logo {
52+
margin-right: 4rem;
53+
font-size: 1.8rem;
54+
font-weight: 500;
55+
}
56+
.imgInfoText {
57+
font-weight: 400;
58+
font-size: 1.2rem;
59+
line-height: 2rem;
60+
}
61+
}
962
.title {
1063
font-size: 2rem;
11-
color: var(--semi-color-text-0);
1264
font-weight: 600;
1365
margin-top: 0;
1466
text-align: center;
@@ -17,7 +69,6 @@
1769

1870
.subTitle {
1971
font-size: 1.125rem;
20-
color: var(--semi-color-text-0);
2172
text-align: left;
2273
vertical-align: top;
2374
font-weight: 400;

‎pages/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React, {useContext, useEffect, useRef} from 'react';
22
import type {NextPage} from 'next';
3+
import dynamic from 'next/dynamic';
34
import styles from './index.module.scss';
45
import Banner from "@/pages/components/banner";
56
import Technology from "@/pages/components/technology";
67
import Features from "@/pages/components/features";
7-
import Platform from "@/pages/components/platform";
8+
89
import Contributors from "@/pages/components/contributors";
910
import cName from 'classnames';
1011
import {ThemeContext} from '@/stores/theme';
1112
import {IComponentProps} from './_app';
1213
import NavBar from "@/components/navbar";
1314
import Footer from "@/components/footer";
14-
15+
const Platform = dynamic(() => import("@/pages/components/platform"), { ssr: false });
1516
interface IProps {
1617
}
1718

0 commit comments

Comments
 (0)