This commit is contained in:
tangtaoit 2023-06-18 14:27:23 +08:00
commit 339f1dc80d
2 changed files with 91 additions and 36 deletions

View File

@ -1,5 +1,6 @@
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import './style.scss'; import './style.scss';
import { usePrefersColor } from 'dumi/dist/client/theme-api/usePrefersColor'; import { usePrefersColor } from 'dumi/dist/client/theme-api/usePrefersColor';
const Home: any = () => { const Home: any = () => {
@ -22,6 +23,63 @@ const Home: any = () => {
}; };
}, []); }, []);
var isPhone = true
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
isPhone = true
} else {
isPhone = false
}
var item1 = {
icon: './././imgs/ic_no_dependency.png',
title: '零依赖',
desc: '没有依赖任何第三方组件,部署简单,一条命令即可启动'
}
var item2 = {
icon: './././imgs/ic_self_developed.png',
title: '完全自研',
desc: '自研消息数据库,消息分区永久存储,自研二进制协议,支持自定义协议'
}
var item3 = {
icon: './././imgs/ic_secure.png',
title: '安全',
desc: '消息通道和消息内容全程加密,防中间人攻击和串改消息内容'
}
var item4 = {
icon: './././imgs/ic_function.png',
title: '功能强劲',
desc: 'MAC 笔记本单机测试 16w 多/秒的消息(包含存储)吞吐量,频道支持万人同时订阅'
}
var item5 = {
icon: './././imgs/ic_extend.png',
title: '扩展性强',
desc: '采用频道设计理念,目前支持群组频道,点对点频道,后续可以根据自己业务自定义频道可实现机器人频道,客服频道等等'
}
var item6 = {
icon: './././imgs/ic_compatibility.png',
title: '兼容性强',
desc: '同时无差别支持 tcpwebsocket'
}
var list1 = []
var list2 = []
var list3 = []
list1.push(item1)
list1.push(item2)
if (!isPhone) {
list1.push(item3)
list2.push(item4)
list2.push(item5)
list2.push(item6)
} else {
list2.push(item3)
list2.push(item4)
list3.push(item5)
list3.push(item6)
}
return ( return (
<section className="home-page"> <section className="home-page">
@ -43,42 +101,38 @@ const Home: any = () => {
<div className={`card ${color}`}> <div className={`card ${color}`}>
<div className='bg'> <div className='bg'>
<label className="big-font"></label> <label className="big-font"></label>
<div style={{ marginTop: '37px'}}> <div style={{ marginTop: '37px', display: 'flex' }}>
<div style={{ display: 'flex' }}> {
<div className='card-item'> list1.map((item: any) =>
<img className="img" src='./././imgs/ic_no_dependency.png' /> <div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
<label className="characteristic-title"></label> <img className="img" src={item.icon} />
<label className="characteristic-content"></label> <label className="characteristic-title">{item.title}</label>
</div> <label className="characteristic-content">{item.desc}</label>
<div className='card-item'> </div>
<img className="img" src="./././imgs/ic_self_developed.png" /> )
<label className="characteristic-title"></label> }
<label className="characteristic-content"></label> </div>
</div> <div style={{ display: 'flex' }}>
<div className='card-item'> {
<img className="img" src="./././imgs/ic_secure.png" /> list2.map((item: any) =>
<label className="characteristic-title"></label> <div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
<label className="characteristic-content"></label> <img className="img" src={item.icon} />
</div> <label className="characteristic-title">{item.title}</label>
</div> <label className="characteristic-content">{item.desc}</label>
<div style={{ display: 'flex', marginTop: '30px', paddingBottom: '30px' }}> </div>
<div className='card-item'> )
<img className="img" src="./././imgs/ic_function.png" /> }
<label className="characteristic-title"></label> </div>
<label className="characteristic-content">MAC 16w /()</label> <div style={{ display: 'flex' }} >
</div> {
<div className='card-item'> list3.map((item: any) =>
<img className="img" src="./././imgs/ic_extend.png" /> <div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
<label className="characteristic-title"></label> <img className="img" src={item.icon} />
<label <label className="characteristic-title">{item.title}</label>
className="characteristic-content"></label> <label className="characteristic-content">{item.desc}</label>
</div> </div>
<div className='card-item'> )
<img className="img" src="./././imgs/ic_compatibility.png" /> }
<label className="characteristic-title"></label>
<label className="characteristic-content"> tcpwebsocket</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -151,6 +151,7 @@
text-align: center; text-align: center;
width: 33.33%; width: 33.33%;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 1rem;
margin-left: 1rem; margin-left: 1rem;
} }