CocoClass_home/src/complates/Compare.js

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: 'Coco Pi',
        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: `<p class="compare_p">惊  喜  价</p>
        <a href="#Contact">
                    <Button class="compare_button"><span>联络我们</span></Button>
                </a>`,
        Microbit: "149",
        Raspberry: "359",
    },
];
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;