From 89cee56d74ef6b4432a254a39eab4a6ca723f6ba Mon Sep 17 00:00:00 2001
From: SL <No8blackball@163.com>
Date: Thu, 15 Jun 2023 19:26:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E6=A1=A3=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E6=89=8B=E6=9C=BA=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .dumi/pages/index.tsx  | 126 +++++++++++++++++++++++++++++------------
 .dumi/pages/style.scss |   1 +
 2 files changed, 91 insertions(+), 36 deletions(-)

diff --git a/.dumi/pages/index.tsx b/.dumi/pages/index.tsx
index 23a1e17..d653fcc 100644
--- a/.dumi/pages/index.tsx
+++ b/.dumi/pages/index.tsx
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import './style.scss';
+
 import { usePrefersColor } from 'dumi/dist/client/theme-api/usePrefersColor';
 
 const Home: any = () => {
@@ -17,6 +18,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: '同时无差别支持 tcp，websocket'
+    }
+    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 (
         <section className="home-page">
@@ -38,42 +96,38 @@ const Home: any = () => {
                     <div className={`card ${color}`}>
                         <div className='bg'>
                             <label className="big-font">特性</label>
-                            <div style={{ marginTop: '37px'}}>
-                                <div style={{ display: 'flex' }}>
-                                    <div className='card-item'>
-                                        <img className="img" src='./././imgs/ic_no_dependency.png' />
-                                        <label className="characteristic-title">零依赖</label>
-                                        <label className="characteristic-content">没有依赖任何第三方组件，部署简单，一条命令即可启动</label>
-                                    </div>
-                                    <div className='card-item'>
-                                        <img className="img" src="./././imgs/ic_self_developed.png" />
-                                        <label className="characteristic-title">完全自研</label>
-                                        <label className="characteristic-content">自研消息数据库，消息分区永久存储，自研二进制协议，支持自定义协议</label>
-                                    </div>
-                                    <div className='card-item'>
-                                        <img className="img" src="./././imgs/ic_secure.png" />
-                                        <label className="characteristic-title">安全</label>
-                                        <label className="characteristic-content">消息通道和消息内容全程加密，防中间人攻击和串改消息内容。</label>
-                                    </div>
-                                </div>
-                                <div style={{ display: 'flex', marginTop: '30px', paddingBottom: '30px' }}>
-                                    <div className='card-item'>
-                                        <img className="img" src="./././imgs/ic_function.png" />
-                                        <label className="characteristic-title">功能强劲</label>
-                                        <label className="characteristic-content">MAC 笔记本单机测试 16w 多/秒的消息(包含存储)吞吐量，频道支持万人同时订阅。</label>
-                                    </div>
-                                    <div className='card-item'>
-                                        <img className="img" src="./././imgs/ic_extend.png" />
-                                        <label className="characteristic-title">扩展性强</label>
-                                        <label
-                                            className="characteristic-content">采用频道设计理念，目前支持群组频道，点对点频道，后续可以根据自己业务自定义频道可实现机器人频道，客服频道等等。</label>
-                                    </div>
-                                    <div className='card-item'>
-                                        <img className="img" src="./././imgs/ic_compatibility.png" />
-                                        <label className="characteristic-title">兼容性强</label>
-                                        <label className="characteristic-content">同时无差别支持 tcp，websocket</label>
-                                    </div>
-                                </div>
+                            <div style={{ marginTop: '37px', display: 'flex' }}>
+                                {
+                                    list1.map((item: any) =>
+                                        <div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
+                                            <img className="img" src={item.icon} />
+                                            <label className="characteristic-title">{item.title}</label>
+                                            <label className="characteristic-content">{item.desc}</label>
+                                        </div>
+                                    )
+                                }
+                            </div>
+                            <div style={{ display: 'flex' }}>
+                                {
+                                    list2.map((item: any) =>
+                                        <div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
+                                            <img className="img" src={item.icon} />
+                                            <label className="characteristic-title">{item.title}</label>
+                                            <label className="characteristic-content">{item.desc}</label>
+                                        </div>
+                                    )
+                                }
+                            </div>
+                            <div style={{ display: 'flex' }} >
+                                {
+                                    list3.map((item: any) =>
+                                        <div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
+                                            <img className="img" src={item.icon} />
+                                            <label className="characteristic-title">{item.title}</label>
+                                            <label className="characteristic-content">{item.desc}</label>
+                                        </div>
+                                    )
+                                }
                             </div>
                         </div>
                     </div>
diff --git a/.dumi/pages/style.scss b/.dumi/pages/style.scss
index ffa3154..53b21f5 100644
--- a/.dumi/pages/style.scss
+++ b/.dumi/pages/style.scss
@@ -135,6 +135,7 @@
       text-align: center;
       width: 33.33%;
       margin-right: 1rem;
+      margin-bottom: 1rem;
       margin-left: 1rem;
     }