cocorobo/pages/solutions.vue

<script setup>
import Back from '../components/home/back.vue'
</script>

<template>
    <div class="solutions">
        <Back />
        <h1 style="margin-top: 80px;">STEAM 人工智能
        </h1>
        <div class="solutions-content content">
            <p>
                基础版：专门为中小学进行人工智能基础教育所设计的初阶解决方案，该方案包含提供全面的软硬件支持和课程资源，助力学校实现人工智能教育的基础设施建设。
            </p>
            <p>
                进阶版：结合基础服务，通过引入CocoClass智慧课堂平台（无AI功能），我们为学校提供了实现人工智能基础教育目标的进阶解决方案。CocoClass在任务式学习设计和数字化教务教学管理方面可以提供显著支持，包括记录教学全过程中的各种行为数据，生成多维度的可视化数据看板，帮助教师和管理者全面掌握学生、课堂、教师及学校的教育教学情况，实现全方位的数据管理。
            </p>
            <p>
                高阶版：CocoClass高阶版通过集成强大的AI功能，进一步助力学校实现人工智能教育的目标。该平台充分利用AIGC技术，全面支持教学设计、教学实施和教学评价的全过程，显著提升教学效率和质量。此外，平台还提供专门的项目管理模块，用于科创项目的记录与管理，为学校的创新教育提供强有力的支持。
            </p>
            <table class="solutions-table">
                <thead>
                    <tr>
                        <th></th>
                        <th><span>基础版</span></th>
                        <th><span>进阶版</span></th>
                        <th><span>高级版</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span>硬件产品</span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                        <td><span><img src="../assets/img/error.png" alt=""></span></td>
                        <td><span><img src="../assets/img/correct.png" alt=""></span></td>
                    </tr>
                    <tr>
                        <td><span>教师培训</span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                        <td><span><img src="../assets/img/error.png" alt=""></span></td>
                        <td><span><img src="../assets/img/correct.png" alt=""></span></td>
                    </tr>
                    <tr>
                        <td><span>课程内容</span></td>
                        <td>
                            <span>24门课程任意组合</span>
                        </td>
                        <td><span>24门课程任意组合</span></td>
                        <td>
                            <span>
                                <div style="line-height: 1;">24门课程任意组合<br />创意智造系列课程<br />(自学材料和视频)</div>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td><span>学生创意作品</span></td>
                        <td>
                            <span><img src="../assets/img/error.png" alt=""></span>
                        </td>
                        <td><span><img src="../assets/img/error.png" alt=""></span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                    </tr>
                    <tr>
                        <td><span>EDU教学平台</span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                        <td><span><img src="../assets/img/correct.png" alt=""></span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                    </tr>
                    <tr>
                        <td><span>CocoClass教学平台</span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                        <td><span>CocoClass 基础版</span></td>
                        <td>
                            <span>CocoClass AI版</span>
                        </td>
                    </tr>
                    <tr>
                        <td><span>项目平台</span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                        <td><span><img src="../assets/img/correct.png" alt=""></span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                    </tr>
                    <tr>
                        <td><span>入校服务</span></td>
                        <td>
                            <span>可选</span>
                        </td>
                        <td><span>可选</span></td>
                        <td>
                            <span>可选</span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span style="background-color: #00B0F0;color: #fff;">联系咨询</span>
                        </td>
                        <td><span style="background-color: #00B0F0;color: #fff;">联系咨询</span></td>
                        <td>
                            <span style="background-color: #00B0F0;color: #fff;">联系咨询</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h1>
            人工智能竞赛
        </h1>
        <div class="solutions-content content">
            <p>
                基础版：专为赛事参与单位设计，旨在为他们提供一站式的赛事支持服务。基础版涵盖了从赛事相关的软硬件支持到全程的技术培训，确保参与单位能够顺利准备和参加活动。我们不仅提供高效的设备和软件工具，还通过培训帮助参赛者熟练掌握使用方法，确保他们在赛事中的表现达到最佳水平。
            </p>
            <p>
                进阶版：进阶版服务专为赛事联合举办方量身定制，提供全方位的定制化服务，涵盖赛事的各个环节。我们在赛事的规划阶段就介入，为您提供全面的战略咨询和设计支持；在运营阶段，我们负责协调各方资源，确保赛事流程的顺畅执行；在执行阶段，我们全程跟踪并提供技术和管理支持，确保赛事的每个细节都得到妥善处理，最终助力赛事圆满成功举办。进阶版服务旨在为联合举办方提供无缝的赛事体验，最大程度上减轻客户方的运营负担。
            </p>
            <table class="solutions-table">
                <thead>
                    <tr>
                        <th></th>
                        <th><span>基础版</span></th>
                        <th><span>进阶版</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span>硬件产品</span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                        <td><span><img src="../assets/img/correct.png" alt=""></span></td>
                    </tr>
                    <tr>
                        <td><span>赛事辅导</span></td>
                        <td>
                            <span><img src="../assets/img/correct.png" alt=""></span>
                        </td>
                        <td><span><img src="../assets/img/correct.png" alt=""></span></td>
                    </tr>
                    <tr>
                        <td><span>赛事筹划</span></td>
                        <td>
                            <span><img src="../assets/img/error.png" alt=""></span>
                        </td>
                        <td>
                            <span>
                                <div style="line-height: 1;">赛事物料<br />裁判培训</div>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span style="background-color: #00B0F0;color: #fff;">联系咨询</span>
                        </td>
                        <td>
                            <span style="background-color: #00B0F0;color: #fff;">联系咨询</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.solutions {
    h1 {
        text-align: center;
    }

    .solutions-content {
        text-align: left;
        padding: 20px 0;

        p {
            margin-top: 30px;
            font-size: 18px;
            line-height: 32px;
            color: #5a5a5a;
        }

        table.solutions-table {
            background-color: #DEEBF7;
            width: 100%;
            text-align: center;
            border-radius: 15px;
            margin: 30px 0 50px;

            thead {
                padding: 20px;

                tr {
                    th {
                        padding: 30px 20px;
                        
                        span {
                            width: 100%;
                            display: inline-block;
                            padding: 20px;
                            color: #000;
                            border-radius: 10px;
                            font-weight: 800;
                            font-size: 20px;
                        }
                    }

                    th:nth-child(2) span {
                        background-color: #A9D18E;
                    }

                    th:nth-child(3) span {
                        background-color: #FFD966;
                    }

                    th:nth-child(4) span {
                        background-color: #F4B183;
                    }
                }

            }

            tbody {
                padding-bottom: 20px;
                tr {
                    td {
                        padding: 0px 20px 25px;

                        span {
                            width: 100%;
                            display: inline-block;
                            height: 80px;
                            line-height: 80px;
                            color: #000;
                            border-radius: 10px;
                            font-weight: 800;
                            font-size: 20px;
                            background-color: #fff;
                            position: relative;
                            top: 50%;
                            img{
                                width: 35px;
                                position: absolute;
                                top: 50%;
                                transform: translate(-50%, -50%);
                            }
                            div{
                                width: 100%;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }
                        }
                    }
                    td:nth-child(1) span{
                        background-color: #9DC3E6;
                    }
                }
            }
        }
    }
}
</style>