diff --git a/components/footer/index.tsx b/components/footer/index.tsx index 383c292..10b44f1 100644 --- a/components/footer/index.tsx +++ b/components/footer/index.tsx @@ -4,7 +4,9 @@ import publicLogo from "@/public/public_logo.png"; import styles from "./styles.module.scss"; import cName from "classnames"; import {isEmpty} from "lodash"; +import logoText from "@/public/logo-text.svg"; import QRCode from "@/public/code.jpg"; +import logoIcon from "@/public/logo-icon.svg"; interface ILink { label: string; link?: string; @@ -26,7 +28,7 @@ const Footer: FC = ({}) => { const data = { "title": "IoTSharp", "qr_code": "", - "copy_right": "Copyright © 2023 The IoTSharp Authors", + "copy_right": "© 2018 - 2023 The IoTSharp Authors. All rights reserved.", "site_number": "", "public_number": "冀ICP备18039206号", "qr_code_image": { @@ -120,7 +122,10 @@ const Footer: FC = ({}) => { return (
-

{title}

+

+ + +

{footerData?.linkList?.map((item, index) => { return ( diff --git a/components/footer/styles.module.scss b/components/footer/styles.module.scss index d273488..fdc7f07 100644 --- a/components/footer/styles.module.scss +++ b/components/footer/styles.module.scss @@ -11,11 +11,12 @@ flex-wrap: wrap; .footerTitle { - font-weight: 500; - font-size: 2.25rem; - line-height: 2.25rem; - color: #ffffff; margin: 0; + display: flex; + + img:nth-of-type(1) { + margin-right: 10px; + } } .linkListArea { diff --git a/pages/_document.tsx b/pages/_document.tsx index 6fec7c3..a4fb78f 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -7,13 +7,13 @@ export default function Document() { -
- - + ); diff --git a/pages/components/banner/index.tsx b/pages/components/banner/index.tsx index 8eb9e43..a8d413e 100644 --- a/pages/components/banner/index.tsx +++ b/pages/components/banner/index.tsx @@ -4,7 +4,8 @@ import {Col, Row} from '@douyinfe/semi-ui'; import cName from "classnames"; import {ThemeContext} from "@/stores/theme"; -export interface IBannerProps {} +export interface IBannerProps { +} const Banner: FC = ({}) => { const mainRef = useRef(null); @@ -34,7 +35,7 @@ const Banner: FC = ({}) => {
-
+
diff --git a/pages/components/banner/styles.module.scss b/pages/components/banner/styles.module.scss index 369127b..d543aa9 100644 --- a/pages/components/banner/styles.module.scss +++ b/pages/components/banner/styles.module.scss @@ -127,20 +127,23 @@ padding: 10rem 8rem; overflow: hidden; border-bottom: 1px solid var(--semi-color-border); + :global { .semi-row-flex { height: 100%; } } + .icon { width: 920px; position: relative; border-radius: 8px; - height: 32.5rem!important; + height: 32.5rem !important; border-bottom: 1px solid var(--semi-color-border); background-image: var(--banner-icon); background-size: 100% 100%; } + .container { display: flex; flex-direction: column; @@ -179,12 +182,14 @@ margin-top: 4rem; } } + .bannerImage { position: relative; width: 100%; padding-top: 20px; padding-left: 50px; } + .background { position: absolute; width: 640px; @@ -194,6 +199,7 @@ -webkit-filter: blur(120px); filter: blur(120px); opacity: .6; + &:before { content: ""; position: absolute; @@ -203,6 +209,7 @@ top: 132px; background-color: rgb(var(--semi-purple-5)); } + &:after { content: ""; position: absolute; diff --git a/pages/components/contributors/index.tsx b/pages/components/contributors/index.tsx index 2db83ca..3989617 100644 --- a/pages/components/contributors/index.tsx +++ b/pages/components/contributors/index.tsx @@ -1,187 +1,80 @@ import {FC} from "react"; -import {Row, Col, Descriptions, Card, Avatar, Space, Button, Typography} from '@douyinfe/semi-ui'; +import {Avatar, Card, Col, Descriptions, Row, Space} from '@douyinfe/semi-ui'; import styles from "./styles.module.scss"; export interface IContributorsProps { } const Contributors: FC = ({}) => { - const { Meta } = Card; - const { Text } = Typography; + const {Meta} = Card; + const Comments = [{ + avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg', + name: 'Mengzhou', + content: '接入简单易上手；API 丰富全面。' + }, { + avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg', + name: 'Mengzhou', + content: '有很多公司内的其他业务使用，有比较多的样例参考，参考其他业务平台的设计方案，统一平台的交付标准。', + }, { + avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg', + name: 'Mengzhou', + content: '接入简单易上手；API 丰富全面。' + }, { + avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg', + name: 'Mengzhou', + content: '接入简单易上手；API 丰富全面。' + }, { + avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg', + name: 'Mengzhou', + content: 'API 丰富全面。', + style: { marginTop: '40px'}, + }, { + avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg', + name: 'Mengzhou', + content: '接入简单易上手；API 丰富全面。' + }] return (

与用户共同成长

IoTSharp 重视我们的用户，加入并助力我们不断完善

- 795+ - 1100+ - 1000+ - 30+ + 1800++ + 600+ + 3400+ + 15+
- - - } - /> - } - footerStyle={{ display: 'flex', justifyContent: 'flex-end' }} - footer={ - -
@Mengzhou
- - } - > - 接入简单易上手；API 丰富全面。 - - - - - } - /> - } - footerStyle={{ display: 'flex', justifyContent: 'flex-end' }} - footer={ - -
@Mengzhou
- - } - > - 有很多公司内的其他业务使用，有比较多的样例参考，参考其他业务平台的设计方案，统一平台的交付标准。 - - - - - } - /> - } - footerStyle={{ display: 'flex', justifyContent: 'flex-end' }} - footer={ - -
@Mengzhou
- - } - > - 接入简单易上手；API 丰富全面。 - - - - - } - /> - } - footerStyle={{ display: 'flex', justifyContent: 'flex-end' }} - footer={ - -
@Mengzhou
- - } - > - 接入简单易上手；API 丰富全面。 - - - - - } - /> - } - footerStyle={{ display: 'flex', justifyContent: 'flex-end' }} - footer={ - -
@Mengzhou
- - } - > - 接入简单易上手。 - - - - - } - /> - } - footerStyle={{ display: 'flex', justifyContent: 'flex-end' }} - footer={ - -
@Mengzhou
- - } - > - 接入简单易上手；API 丰富全面。 - - + { + Comments?.map((comment, index) => { + return ( + + + } + /> + } + footerStyle={{display: 'flex', justifyContent: 'flex-end'}} + footer={ + +
{comment?.name}
+ + } + > + {comment?.content} + + + ) + })
diff --git a/pages/components/contributors/styles.module.scss b/pages/components/contributors/styles.module.scss index a87d3b4..769012c 100644 --- a/pages/components/contributors/styles.module.scss +++ b/pages/components/contributors/styles.module.scss @@ -9,9 +9,9 @@ width: 100%; margin-top: 3rem; } + .title { font-size: 2rem; - color: var(--semi-color-text-0); font-weight: 600; margin-top: 0; text-align: center; @@ -19,13 +19,13 @@ } .subTitle { font-size: 1.125rem; - color: var(--semi-color-text-0); text-align: left; vertical-align: top; font-weight: 400; margin-bottom: 3rem; margin-top: 0; } + img { width: 100%; height: 25rem; diff --git a/pages/components/features/styles.module.scss b/pages/components/features/styles.module.scss index 33f995f..6c8d43a 100644 --- a/pages/components/features/styles.module.scss +++ b/pages/components/features/styles.module.scss @@ -2,6 +2,7 @@ width: 100%; background: #1f1f1f; padding: 2rem 8rem; + .titleContainer { display: flex; flex-direction: column; @@ -29,13 +30,16 @@ line-height: .5rem; } } + .list { margin-top: 3rem; + .item { display: flex; align-items: center; flex-direction: column; margin-bottom: 3rem; + .title { margin-top: 1rem; font-weight: 700; diff --git a/pages/components/platform/index.tsx b/pages/components/platform/index.tsx index 66abd82..bb2a993 100644 --- a/pages/components/platform/index.tsx +++ b/pages/components/platform/index.tsx @@ -1,78 +1,75 @@ -import {FC, useContext, useRef, useState} from "react"; -import {Col, Row} from '@douyinfe/semi-ui'; +import {FC, useContext} from "react"; import Image from "next/image"; -import {IPopupRef, Popup} from "@/components/popup"; +import {Carousel} from '@douyinfe/semi-ui'; import TenantImage from '@/public/img_9.png'; -import TenantImageDark from '@/public/img_10.png'; import RuleImage from '@/public/img_6.png'; -import RuleImageDark from '@/public/img_12.png'; import ResourceImage from '@/public/img_8.png'; -import ResourceImageDark from '@/public/img_13.png'; import DeviceImage from '@/public/img_5.png'; -import DeviceImageDark from '@/public/img_11.png'; import ProductImage from '@/public/img_7.png'; -import ProductImageDark from '@/public/img_14.png'; import styles from "./styles.module.scss"; import {ThemeContext} from "@/stores/theme"; -import {Themes} from "@/constants/enum"; export interface IPlatformProps { } const Platform: FC = ({}) => { - const {setTheme, theme} = useContext(ThemeContext); - const popupRef = useRef(null); - const [currentImage, setCurrentImage] = useState(null) + const {theme} = useContext(ThemeContext); const Options = [{ - image: theme === Themes.light ? TenantImage : TenantImageDark, + image: TenantImage, + background: 'rgb(230, 232, 234)', title: '多租户', description: '通过多租户，充分的利用系统资源为多个客户提供服务并确保数据彻底隔离。' }, { - image: theme === Themes.light ? DeviceImage : DeviceImageDark, + image: DeviceImage, + background: 'rgb(239, 202, 240)', title: '数字孪生', description: '通过数字孪生使得设备的属性数据、遥测数据、数据清洗、告警更容易管理和使用' }, { - image: theme === Themes.light ? RuleImage : RuleImageDark, + image: RuleImage, + background: 'rgb(226, 209, 244)', title: '规则链引擎', description: '通过规则链引擎利用多种语言脚本来扩展你对数据的分析和处理。' }, { - image: theme === Themes.light ? ResourceImage : ResourceImageDark, + image: ResourceImage, + background: 'rgb(209, 216, 240)', title: '资产管理', description: '使用多个设备及其属性和遥测可抽象为资产更利于管理设备和数据分析。' }, - { - image: theme === Themes.light ? ProductImage : ProductImageDark, - title: '产品管理', - description: '为设备或者网关提供简洁有效的数据模板、字典、认证、素材组织能力。' - }] - const viewImage = (image: any): void => { - setCurrentImage(image) - popupRef.current?.open(); - } + { + image: ProductImage, + title: '产品管理', + background: 'rgb(203, 231, 254)', + description: '为设备或者网关提供简洁有效的数据模板、字典、认证、素材组织能力。' + }] + const style = { + width: '100%', + height: '916px', + }; return (
- { - Options?.map((option, index) => { - return ( - - - viewImage(option?.image)}/> - - -
-
{option?.title}
-
-

{option?.description}

+

打造现代 Web 应用

+

与现代操作系统、浏览器更贴近的设计语言

+ + { + Options.map((option, index) => { + return ( +
+
+
- - - ) - }) - } - - {/*// @ts-ignore*/} - - +
+
{option.title}
+
{option.description}
+
+
+ ); + }) + } +
); }; diff --git a/pages/components/platform/styles.module.scss b/pages/components/platform/styles.module.scss index 17dc1e7..cad8326 100644 --- a/pages/components/platform/styles.module.scss +++ b/pages/components/platform/styles.module.scss @@ -1,6 +1,81 @@ .platformContainer { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; width: 100%; - padding: 1rem 8rem 5rem; + padding: 10rem 8rem 0; + :global { + .semi-carousel-arrow-next { + width: 50px; + height: 50px; + background-color: var(--primary-color); + color: var(--primary-background-color); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + } + .semi-carousel-arrow-prev { + width: 50px; + height: 50px; + background-color: var(--primary-color); + color: var(--primary-background-color); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + } + } + .imgWrapper { + height: 50rem; + width: 90%; + margin: 0 auto; + border-radius: 1.5rem; + position: relative; + background-color: rgba(var(--semi-grey-1)); + img { + width: 94%!important; + left: 0; + right:0; + margin: 2.5rem auto 0; + border-radius: .75rem; + } + } + .imgInfo { + width: 90%; + display: flex; + align-items: center; + justify-content: center; + margin: 5rem auto 0; + .logo { + margin-right: 4rem; + font-size: 1.8rem; + font-weight: 500; + } + .imgInfoText { + font-weight: 400; + font-size: 1.2rem; + line-height: 2rem; + } + } + .title { + font-size: 2rem; + font-weight: 600; + margin-top: 0; + text-align: center; + vertical-align: middle; + } + + .subTitle { + font-size: 1.125rem; + text-align: left; + vertical-align: top; + font-weight: 400; + margin-bottom: 3rem; + margin-top: 0; + } + .row { img { width: 100%; @@ -15,13 +90,16 @@ transition: .5s; } } + .content { margin-top: 4rem; + .title { font-size: 1.5rem; font-weight: 700; line-height: 2.125rem; } + .line { height: 5px; width: 20rem; @@ -29,6 +107,7 @@ background-color: var(--yellow-color); margin: 1.25rem 0; } + p { font-size: 1.25rem; letter-spacing: 0; diff --git a/pages/components/technology/styles.module.scss b/pages/components/technology/styles.module.scss index e9c3c15..46b9c17 100644 --- a/pages/components/technology/styles.module.scss +++ b/pages/components/technology/styles.module.scss @@ -1,15 +1,18 @@ .technologyContainer { width: 100%; padding: 4rem 8rem 2rem; + .titleContainer { display: flex; flex-direction: column; margin-bottom: 3rem; + h2 { font-size: 2rem; letter-spacing: .0125rem; line-height: 1rem; } + .line { height: 5px; width: 20rem; @@ -17,6 +20,7 @@ background-color: var(--yellow-color); margin: 1.25rem 0; } + h3 { color: var(--secondary-font-color-1); font-size: 1.5rem; @@ -24,6 +28,7 @@ line-height: .5rem; } } + .item { height: 31.25rem; color: #fdfeff; @@ -56,16 +61,19 @@ letter-spacing: .15px; } } + .item1 { background-image: url("/img_1.png"); background-repeat: no-repeat; background-size: 100% 100%; } + .item2 { background-image: url("/img_2.png"); background-repeat: no-repeat; background-size: 100% 100%; } + .item3 { background-image: url("/img_3.png"); background-repeat: no-repeat; diff --git a/pages/index.tsx b/pages/index.tsx index 12b2d02..8964a3f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,16 +1,18 @@ import React, {useContext, useEffect, useRef} from 'react'; import type {NextPage} from 'next'; +import dynamic from 'next/dynamic'; import styles from './index.module.scss'; import Banner from "@/pages/components/banner"; import Technology from "@/pages/components/technology"; import Features from "@/pages/components/features"; -import Platform from "@/pages/components/platform"; + import Contributors from "@/pages/components/contributors"; import cName from 'classnames'; import {ThemeContext} from '@/stores/theme'; import {IComponentProps} from './_app'; import NavBar from "@/components/navbar"; import Footer from "@/components/footer"; +const Platform = dynamic(() => import("@/pages/components/platform"), { ssr: false }); interface IProps { } @@ -28,17 +30,17 @@ const Home: NextPage = ({}) => { return (
- +
- - - - - + + + + +
-
); }; diff --git a/public/contributor_1.png b/public/contributor_1.png new file mode 100644 index 0000000..90968c2 Binary files /dev/null and b/public/contributor_1.png differ diff --git a/public/contributor_2.png b/public/contributor_2.png new file mode 100644 index 0000000..451efc6 Binary files /dev/null and b/public/contributor_2.png differ