import { Flex } from "antd";
import "../asstes/css/CheckeredQuery.css"
import ExperienceImg3 from '../asstes/img/3.png'
import ExperienceImg6 from '../asstes/img/6.png'
import ExperienceImg4 from '../asstes/img/4.png'
import ExperienceImg5 from '../asstes/img/5.png'

function CheckeredQuery() {
    return (
        <div className="CheckeredQuery">
            <h1>配套资源</h1>
            <Flex className="CheckeredQuery_content">
                <div className="Introduction_bottom_left Introduction_bottom_div">
                    <h2><i>Pi Blockly </i>编程平台</h2>
                    <p>
                        Pi Blockly图形化编程平台基于 Google Blockly 开发的AIoT技术应用平台，可以直接通过浏览器设计程式对人工智能及物联网技术进行相关体验。
                    </p>
                    <div className='experience'>
                        <a href="https://pi.cocorobo.cn/">
                            <span className="img2">
                                <span className="img1">
                                    <img src={ExperienceImg5} alt=""></img>
                                </span>
                            </span>
                            <span className="span1">开始体验</span>
                        </a>
                        <img className='experience_img' src={ExperienceImg6} alt="" />
                    </div>
                </div>
                <div className="Introduction_bottom_right Introduction_bottom_div">
                    <div className='Introduction_bottom_right_div'>
                        <h2>CocoClass <i>课程平台</i></h2>
                        <p>
                            Cococlass 集成各种互动学习工具、采集进展性数据并进行可视化分析，以支援在学科与跨学科教学、学校数码化管理、竞赛活动组织等不同场景下使用。
                        </p>
                        <div className='experience'>
                            <a href="https://cloud.cocorobo.cn/">
                                <span className="img3">
                                    <span className="img4">
                                        <img src={ExperienceImg4} alt=""></img>
                                    </span>
                                </span>
                                <span className="span2">开始体验</span>
                            </a>
                            <img className='experience_img' src={ExperienceImg3} alt="" />
                        </div>
                    </div>
                </div>
                <div className="Introduction_bottom_right Introduction_bottom_div">
                    <div className='Introduction_bottom_right_div'>
                        <h2>CocoCloud <i>云端平台</i></h2>
                        <p>
                            CocoCloud 是 CocoRobo 推出的云端物联网平台,用户可以在改平台上进行物联网事件的管理,以及时间状态的查看。CocoCloud 支持数据可视化功能,用户可以控制面板中的创建,并查看各类的数据。
                        </p>
                        <div className='experience'>
                            <a href="https://cocorobo.cn/cloud/login">
                                <span className="img3">
                                    <span className="img4">
                                        <img src={ExperienceImg4} alt=""></img>
                                    </span>
                                </span>
                                <span className="span2">开始体验</span>
                            </a>
                            <img className='experience_img' src={ExperienceImg3} alt="" />
                        </div>
                    </div>
                </div>
                <div className="Introduction_bottom_left Introduction_bottom_div">
                    <h2><i>AI模型 </i>训练平台</h2>
                    <p>
                        使用CocoRobo训练平台可以帮助您进行数据标注完成数据集的第一步处理，引导您一步步的开始模型训练，并将训练过程可视化地呈现出来。
                    </p>
                    <div className='experience'>
                        <a href="https://xunlian.cocorobo.cn/">
                            <span className="img2">
                                <span className="img1">
                                    <img src={ExperienceImg5} alt=""></img>
                                </span>
                            </span>
                            <span className="span1">开始体验</span>
                        </a>
                        <img className='experience_img' src={ExperienceImg6} alt="" />
                    </div>
                </div>
                <div className="Introduction_bottom_left Introduction_bottom_div">
                    <h2><i>AI Hub </i>体验平台</h2>
                    <p>
                        AI Hub是CocoRobo的人工智慧体验平台，无需安装任何挿件，使用浏览器便可直接体验最前沿的人工智慧研究、科技和应用，实现与机器的高效互动。
                    </p>
                    <div className='experience'>
                        <a href="https://aihub.cocorobo.cn/">
                            <span className="img2">
                                <span className="img1">
                                    <img src={ExperienceImg5} alt=""></img>
                                </span>
                            </span>
                            <span className="span1">开始体验</span>
                        </a>
                        <img className='experience_img' src={ExperienceImg6} alt="" />
                    </div>
                </div>
                <div className="Introduction_bottom_right Introduction_bottom_div">
                    <div className='Introduction_bottom_right_div'>
                        <h2>Coco CAD <i>建模平台</i></h2>
                        <p>
                            Coco-CAD 同样是使用积木的方式让学生体验到通过渐进式方法来进行 3D 建模。
                        </p>
                        <div className='experience'>
                            <a href="https://cocorobo.cn/cococad/">
                                <span className="img3">
                                    <span className="img4">
                                        <img src={ExperienceImg4} alt=""></img>
                                    </span>
                                </span>
                                <span className="span2">开始体验</span>
                            </a>
                            <img className='experience_img' src={ExperienceImg3} alt="" />
                        </div>
                    </div>
                </div>
            </Flex>
        </div>
    )
}
export default CheckeredQuery;