cocorobo/pages/platform.vue

<script setup>
import { ref } from 'vue';
import Platform from '~/components/Platform.vue';
import aiHub from '../assets/img/aihub.png';
import aiScratch from '../assets/img/aiScratch.png';
import blockly from '../assets/img/blockly.png';
import blockly2 from '../assets/img/blockly-2.png';
import aiBlockly from '../assets/img/AIBlockly-icon.png';
import blocklyCocoPi from '../assets/img/blocklyCocoPi.png';
import pythonBlockly from '../assets/img/pythonBlockly.png';
import Cloud from '../assets/img/cloud.png'
import CocoCad from '../assets/img/cococad.png'
import TrainImg from '../assets/img/trainicon.png'

const lang = ref("zh");
const PlatformList = ref([
    {
        title: '人工智能体验平台',
        content: '人工智能体验平台无需安装任何插件，使用浏览器便可直接体验最前沿的人工智能研究、技术和应用，实现与机器的高效互动。',
        img: aiHub,
        link: (lang === 'zh-cn' || lang === 'zh') ? '//aihub.cocorobo.cn' : '//aihub.cocorobo.hk'
    }, 
    {
        title: 'AI Scratch',
        content: '基于 Scratch 3.0 的人工智能积木式编程开发环境',
        img: aiScratch,
        link: (lang === 'zh-cn' || lang === 'zh') ? '//ai-scratch.cocorobo.cn' : '//ai-scratch.cocorobo.hk'
    }, {
        title: '百变智造图形化编程平台',
        content: '使用百变智造图形化编程平台(Arduino)为我们百变智造电子套件进行编程',
        img: blockly,
        link: (lang === 'zh-cn' || lang === 'zh') ? '//https://cocorobo.cn/cocoblockly/dev/' : "https://cocorobo.hk/cocoblockly/dev/"
    }, {
        title: 'AIoT 图形化编程平台',
        content: '使用 AIoT 图形化编程平台为我们的AIoT电子套件进行编程',
        img: blockly2,
        link: '//x.cocorobo.cn'
    }, {
        title: 'AI 图形化编程平台',
        content: 'AI图形化编程平台基于 Google Blockly 开发的人工智能平台，可以直接通过浏览器对人工智能进行相关体验',
        img: aiBlockly,
        link: '//ai-blockly.cocorobo.cn'
    }, {
        title: 'CocoPi <br />图形化编程平台',
        content: 'CocoPi图形化编程平台基于 Google Blockly 开发的人工智能平台，可以直接通过浏览器对人工智能进行相关体验',
        img: blocklyCocoPi,
        link: '//pi.cocorobo.cn'
    }, {
        title: 'Python<br />图形化编程平台',
        content: '使用 Python 图形化编程平台可以通过积木生成代码然后输出结果',
        img: pythonBlockly,
        link: '//python-blokly.cocorobo.cn'
    }, {
        title: '物联网平台',
        content: '用户可以在该平台上进行物联网事件的管理,以及时间状态的查看，支持数据可视化功能，用户可以控制面板中的创建，并查看各类的数据',
        img: Cloud,
        link: '//cocorobo.cn/cloud'
    }, {
        title: 'Coco CAD',
        content: '与 CocoBlockly 原理相似，这款 Coco-CAD 同样是使用积木的方式让学生体验到通过渐进式方法来进行 3D 建模',
        img: CocoCad,
        link: '//cocorobo.cn/cococad/'
    },
    {
        title: '训练平台',
        content: '使用可可乐博训练平台可以帮助您处理数据集，引导您一步步的开始模型训练。',
        img: TrainImg,
        link: '//xunlian.cocorobo.cn'
    },
]);
</script>
<template>
    <div class="platform content">
        <div class="platform-div" v-for="item in PlatformList">
            <Platform :title="item.title" :link="item.link" :content="item.content" :img="item.img" />
        </div>
    </div>
</template>
<style scoped lang="scss">
.platform {
    margin: 0 auto 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px 0;

    .platform-div {
        width: 18%;
    }
}
</style>