.

src/asstes/css/Compare.css

@@ -0,0 +1,24 @@
+h1 {
+    position: relative;
+    top: 0;
+    display: inline-block;
+    font-size: 64px;
+    font-weight: 500;
+    line-height: 92.67px;
+    padding-left: 100px;
+    margin-bottom: 90px;
+    /* background: linear-gradient(to right,#3681FC,#fff); */
+    z-index: 10;
+
+}
+
+h1::after {
+    content: '';
+    width: 100%;
+    padding: 12px 0;
+    background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
+    position: absolute;
+    top: 72px;
+    left: 0;
+    z-index: -1;
+}

src/complates/Compare.js

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { Table } from 'antd';
+import '../asstes/css/Compare.css'
+import CocoPiImg from '../asstes/img/CocoPi.png';
+import MicrobitImg from '../asstes/img/Microbit.png';
+import RaspberryImg from '../asstes/img/Raspberry.png';
+const columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        align: 'center',
+    },
+    {
+        title: 'CocoPi',
+        dataIndex: 'CocoPi',
+        key: 'CocoPi',
+        align: 'center',
+        render: (type, data) => {
+            if (data.name === '外观') {
+                return <img src={data.CocoPi} alt=""></img>
+            } else {
+                return <div dangerouslySetInnerHTML={{ __html: data.CocoPi }}></div>
+            }
+        }
+    },
+    {
+        title: 'Microbit V2',
+        dataIndex: 'Microbit',
+        key: 'Microbit',
+        align: 'center',
+        render: (type, data) => {
+            if (data.name === '外观') {
+                return <img src={data.Microbit} alt=""></img>
+            } else {
+                return <div dangerouslySetInnerHTML={{ __html: data.Microbit }}></div>
+            }
+        }
+    },
+    {
+        title: '树莓派 Pi 4 （1GB）',
+        dataIndex: 'Raspberry',
+        key: 'Raspberry',
+        align: 'center',
+        render: (type, data) => {
+            console.log(data)
+            if (data.name === '外观') {
+                return <img src={data.Raspberry} alt=""></img>
+            } else {
+                return <div dangerouslySetInnerHTML={{ __html: data.Raspberry }}></div>
+            }
+        }
+    },
+];
+const data = [
+    {
+        key: '1',
+        name: '外观',
+        CocoPi: CocoPiImg,
+        Microbit: MicrobitImg,
+        Raspberry: RaspberryImg,
+    },
+    {
+        key: '2',
+        name: '处理器',
+        CocoPi: "Allwinner V831",
+        Microbit: "Nordic nRF52833",
+        Raspberry: "Broadcom BCM2711",
+    },
+    {
+        key: '3',
+        name: '内存',
+        CocoPi: "1GB",
+        Microbit: "512KB",
+        Raspberry: "1GB",
+    },
+    {
+        key: '4',
+        name: '连接',
+        CocoPi: "<div>802.11n 无线 2.4GHz<br/>Type-C *1<br/>USB 2.0*1</div>",
+        Microbit: "<div>蓝牙 5.1 with BLE <br/>2.4GHz 无线</div>",
+        Raspberry: "<div>2.4 GHz 和 5.0 GHz IEEE 802.11b/g/n/ac 无线<br/>蓝牙 5.0, BLE<br/>LAN，千兆以太网<br/>2 × USB 3.0 ports<br/>2 × USB 2.0 ports.</div>",
+    },
+    {
+        key: '5',
+        name: 'GPIO引脚',
+        CocoPi: "<div>标准 IIC/SPI/UART 接口<br/>标准舵机接口 *2<br/>标准电机接口 *2</div>",
+        Microbit: "<div>5 环鳄鱼夹<br/>19 板载针脚</div>",
+        Raspberry: "<div>标准40针GPIO头<br/>micro-HDM 端口*2 <br/>2通道MIPI DSI显示端口<br/>2通道MIPI CSI摄像头端口</div>",
+    },
+    {
+        key: '6',
+        name: '板载传感器',
+        CocoPi: "<div>温湿度传感器*1<br/>三轴陀螺仪和三轴加速度计*1<br/>麦克风*1<br/>光敏传感器*1<br/>200W 像素MIPI摄像头*1</div>",
+        Microbit: "<div>三轴加速度计和磁力计 *1<br/>温度传感器*1<br/>麦克风*1</div>",
+        Raspberry: "无",
+    },
+    {
+        key: '7',
+        name: '板载执行器',
+        CocoPi: "<div>扬声器*1<br/>RGB LED*1<br/>2.8 英寸 显示屏*1<br/>模拟伺服 *2<br/>模拟电机*2</div>",
+        Microbit: "Speaker*1",
+        Raspberry: "无",
+    },
+    {
+        key: '8',
+        name: '软件',
+        CocoPi: "Linux/C++/Python/Blockly/Scratch",
+        Microbit: "C++/Python/Makecode/Scratch",
+        Raspberry: "Linux/Raspbian/Windows",
+    },
+    {
+        key: '9',
+        name: '视频',
+        CocoPi: "<div>H.264，最高支持 1080P@30fps<br/>H.265，最高支持 1080P@30fps<br/>JPEG，最高支持 1080P@30fps</div>",
+        Microbit: "无",
+        Raspberry: "<div>H.265 (4Kp60 解码);<br/>H.264 (1080p60 解码, 1080p30 编码);<br/>OpenGL ES, 3.0 图形</div>",
+    },
+    {
+        key: '10',
+        name: '摄像头',
+        CocoPi: "200W 像素MIPI摄像头*1",
+        Microbit: "无",
+        Raspberry: "无",
+    },
+    {
+        key: '11',
+        name: '显示屏',
+        CocoPi: "2.8 英寸 显示屏*1",
+        Microbit: "5x5点阵灯屏",
+        Raspberry: "无",
+    },
+    {
+        key: '12',
+        name: 'SD 卡支持',
+        CocoPi: "微型 SD 卡槽",
+        Microbit: "无",
+        Raspberry: "微型 SD 卡槽",
+    },
+    {
+        key: '13',
+        name: '输入电源',
+        CocoPi: "<div>PH2.0端子<br/>Type-C<br/>USB 2.0</div>",
+        Microbit: "<div>Micro USB<br/>带鳄鱼夹的边缘连接器</div>",
+        Raspberry: "<div>5V直流输入（通过 USB-C口）<br/>5V直流输入（通过 GPIO头）<br/>以太网供电（PoE）</div>",
+    },
+    {
+        key: '14',
+        name: '大小',
+        CocoPi: "85.6*54*12mm",
+        Microbit: "51.6*42*11.7mm",
+        Raspberry: "85.6*56.5*11mm",
+    },
+    // {
+    //     key: '15',
+    //     name: '官方价格（RMB）',
+    //     CocoPi: "",
+    //     Microbit: "149",
+    //     Raspberry: "360",
+    // },
+];
+const CompareStyle = {
+    padding: '0 100px',
+    textAlign: 'center',
+}
+const Compare = () => {
+    return (
+        <div>
+            <h1>产品对比</h1>
+            <div style={CompareStyle}>
+                <Table
+                    columns={columns}
+                    pagination={false}
+                    dataSource={data}
+                    showSizeChanger={false}
+                />
+            </div>
+        </div>
+    );
+};
+export default Compare;

src/complates/HeaderRight.js

@@ -37,6 +37,12 @@ function Header() {
                         {value === 3 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                     </a>
                 </li>
+                <li onClick={() => clickSwitchValue(4)}>
+                    <a href='#Compare'>
+                        <span>產品對比</span>
+                        {value === 4 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
+                    </a>
+                </li>
                 <li onClick={() => clickSwitchValue(4)}>
                     <a href='https://pi.cocorobo.hk' Target='_blank'>
                     {/* <img src={require('../asstes/img/userLogin.png')} alt="" /> */}

src/view/home.js

@@ -8,6 +8,7 @@ import Example from '../complates/Examples'
 import CheckeredQuery from '../complates/CheckeredQuery'
 import Contact from '../complates/Contact'
 import Sidebar from '../complates/Sidebar'
+import Compare from '../complates/Compare';
 
 const { Header, Footer, Content } = Layout;
 const headerStyle = {
@@ -24,7 +25,7 @@ const headerStyle = {
 };
 
 const contentStyle = {
-    marginTop:64,
+    marginTop: 64,
     backgroundColor: '#fff',
 };
 const footerStyle = {
@@ -57,6 +58,9 @@ function Home() {
                     <div id="CheckeredQuery">
                         <CheckeredQuery />
                     </div>
+                    <div id="Compare">
+                        <Compare />
+                    </div>
                     <Sidebar />
                 </Content>
                 <Footer style={footerStyle}>