cocorobo/components/cocopi/CourseList.vue

<script setup>
import { ref,onMounted } from 'vue'
const courseList = ref([])
const courseList1 = ref([
    {
        id: 0,
        title: "人脸追踪向日葵",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "太阳花自动追踪人脸",
        desc: "人脸检测的概念、伺服马达控制、人脸检测程式、人脸追踪太阳花交互。",
        courseNum: 3,
        imgSrc: "./image/chu1.png",
        codeSrc: "./image/chu1code.png",

    },
    {
        id: 1,
        title: "智能夜灯",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "通过光线数值、语音指令控制灯光效果，并呈现当前的环境数值。",
        desc: "语音识别原理、RGB灯的使用、温湿度传感器及光照传感器的使用。",
        courseNum: 3,
        imgSrc: "./image/chu2.png",
        codeSrc: "./image/chu2code.png",

    },
    {
        id: 2,
        title: "重力感应迷宫",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "通过运动传感器检测模组姿态，控制小球运动，穿梭迷宫到达终点。",
        desc: "运动传感器的原理、舵机控制、重力感应迷宫程式设计。",
        courseNum: 3,
        imgSrc: "./image/chu3.png",
        codeSrc: "./image/chu3code.png",

    },
    {
        id: 3,
        title: "着火报警器",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "通过火焰传感器及烟雾传感器对环境进行火情监测。",
        desc: "认识并使用火焰传感器与烟雾传感器、设计实现著火报警器程式。",
        courseNum: 3,
        imgSrc: "./image/chu4.png",
        codeSrc: "./image/chu4code.png",

    },
    {
        id: 4,
        title: "数字识别大转盘",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "识别数字后，指针根据识别到的数字转动到对应位置。",
        desc: "手写数字识别的原理、舵机控制、手写数字大转盘程式设计。",
        courseNum: 3,
        imgSrc: "./image/chu5.png",
        codeSrc: "./image/chu5code.png",

    },
    {
        id: 5,
        title: "猜拳机器人",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "使用手势识别技术辨识包、剪、揼，并与机械人进行包剪揼游戏。",
        desc: "手势识别概念、舵机控制、机器学习原理和手势识别程式设计。",
        courseNum: 3,
        imgSrc: "./image/chu6.png",
        codeSrc: "./image/chu6code.png",

    },
    {
        id: 6,
        title: "智能风扇",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "通过语音指令控制风扇的打开、关闭以及风速的切换。",
        desc: "语音识别的原理、电机控制、智能语音风扇程式。",
        courseNum: 3,
        imgSrc: "./image/chu7.png",
        codeSrc: "./image/chu7code.png",

    },
    {
        id: 7,
        title: "戏剧变脸",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "检测到人脸后，自动切换戏剧人物的脸谱。",
        desc: "人脸检测原理、舵机的使用、齿轮机构。",
        courseNum: 3,
        imgSrc: "./image/chu2.png",
        codeSrc: "./image/chu2code.png",

    }
])
const courseList2 = ref([
    {
        id: 0,
        title: "种子筛选机",
        principle: 4,
        structure: 3,
        programming: 3,
        feature: "通过自定义识别模型，对种子进行筛选，实现科学选种。",
        desc: "智慧农业应用、机器学习原理、自定义模型训练与识别、舵机控制。",
        courseNum: 3,
        imgSrc: "./image/zhong1.png",
        codeSrc: "./image/zhong1code.png",

    },
    {
        id: 1,
        title: "垃圾分类箱",
        principle: 4,
        structure: 3,
        programming: 3,
        feature: "通过自定义识别模型，识别不同的垃圾卡片，实现对应垃圾箱的翻盖与复位。",
        desc: "舵机控制、机器学习原理和自定义模型训练与识别。",
        courseNum: 3,
        imgSrc: "./image/zhong2.png",
        codeSrc: "./image/zhong2code.png",

    },
    {
        id: 2,
        title: "情绪小怪兽",
        principle: 3,
        structure: 2,
        programming: 3,
        feature: "辨识人们不同的情绪，根据情绪显示不同颜色的灯光效果。",
        desc: "情绪识别原理、搭建情绪小怪兽装置、设计并实现情绪小怪兽程式。",
        courseNum: 3,
        imgSrc: "./image/zhong3.png",
        codeSrc: "./image/zhong3code.png",

    },
    {
        id: 3,
        title: "智能气象站",
        principle: 2,
        structure: 2,
        programming: 3,
        feature: "获取实时环境温湿度及光线强度，在物联网云平台绘制可视化图表。",
        desc: "物联网技术概述、温湿度传感器及光照传感器的使用、云平台使用。",
        courseNum: 4,
        imgSrc: "./image/zhong4.png",
        codeSrc: "./image/zhong4code.png",

    },
    {
        id: 4,
        title: "环境感应屋",
        principle: 3,
        structure: 4,
        programming: 3,
        feature: "雨滴落到屋顶，窗户自动关闭；环境光线不足时，灯光自动亮起。",
        desc: "智能家居应用、雨滴传感器使用、舵机控制、光线传感器使用。",
        courseNum: 4,
        imgSrc: "./image/zhong5.png",
        codeSrc: "./image/zhong5code.png",

    },
    {
        id: 5,
        title: "作物浇灌系统",
        principle: 2,
        structure: 2,
        programming: 3,
        feature: "土壤湿度小于某个值时，水泵自动浇水；湿度低于某个值，空气加湿器启动并开始加湿。",
        desc: "了解智慧农业场景、土壤湿度及温湿度传感器使用、水泵控制、作物浇灌系统程式设计。",
        courseNum: 4,
        imgSrc: "./image/zhong6.png",
        codeSrc: "",

    },
    {
        id: 6,
        title: "智能药箱",
        principle: 4,
        structure: 3,
        programming: 3,
        feature: "识别不同类型的药物并归类，按时提醒服用相应类型的药物。",
        desc: "机器学习原理、自定义模型训练与识别、RGB灯带的使用。",
        courseNum: 4,
        imgSrc: "./image/zhong7.png",
        codeSrc: "",

    },
    {
        id: 7,
        title: "无人驾驶车",
        principle: 4,
        structure: 2,
        programming: 3,
        feature: "透过循线识别与路标识别控制小车的行驶。",
        desc: "无人驾驶的概念与原理、TT电机控制、循线运动实现、机器学习原理、自定义模型训练与识别。",
        courseNum: 5,
        imgSrc: "./image/zhong8.png",
        codeSrc: "./image/zhong8code.png",

    }
])
const courseList3 = ref([
{
        id: 0,
        title: "万向麦轮车",
        principle: 3,
        structure: 3,
        programming: 4,
        feature: "使用视觉识别、语音识别等不同方式控制麦轮车进行各方向运动。",
        desc: "认识麦克纳姆轮、小车的运动控制、语音识别、路标识别。",
        courseNum: 5,
        imgSrc: "./image/gao1.png",
        codeSrc: "./image/gao1code.png",

    },
    {
        id: 1,
        title: "自动售货机",
        principle: 3,
        structure: 4,
        programming: 4,
        feature: "识别特定人脸后，透过按键选择商品，实现扣款和商品掉落。",
        desc: "人脸识别的原理、按键选择控制、萤幕UI设计、舵机控制。",
        courseNum: 5,
        imgSrc: "./image/gao2.png",
        codeSrc: "./image/gao2code.png",

    },
    {
        id: 2,
        title: "马戏团机械人",
        principle: 4,
        structure: 4,
        programming: 4,
        feature: "透过动作卡牌与路标控制机械人行驶与表演，如前进、左转、右转、摆手、转圈等。",
        desc: "TT电机控制、舵机控制、机器学习原理、自定义模型训练与识别。",
        courseNum: 5,
        imgSrc: "./image/gao3.png",
        codeSrc: "./image/gao3code.png",

    },
    {
        id: 3,
        title: "智慧物流车",
        principle: 4,
        structure: 4,
        programming: 4,
        feature: "透过循线识别与路标识别控制小车的行驶，并实现小车的装卸货。",
        desc: "智慧物流概念、TT电机控制、舵机控制、循线运动、机器学习原理、自定义模型训练与识别。",
        courseNum: 6,
        imgSrc: "./image/gao4.png",
        codeSrc: "./image/gao4code.png",

    },
    {
        id: 4,
        title: "流浪猫救助屋",
        principle: 3,
        structure: 3,
        programming: 5,
        feature: "透过猫隻辨识及照片记录猫隻出现的时间与样貌，实现自动喂食、邮件提醒等功能。",
        desc: "迷你照相机、Wi-Fi连接、获取网络时间、IFTTT应用、物体识别技术、舵机控制。",
        courseNum: 6,
        imgSrc: "./image/gao5.png",
        codeSrc: "./image/gao5code.png",

    },
    {
        id: 5,
        title: "语音交互机械鸟",
        principle: 4,
        structure: 1,
        programming: 5,
        feature: "透过语音识别、机器翻译与语音合成技术，实现即时传译。",
        desc: "语音识别、机器翻译、语音合成的原理与程式设计，语音交互机械鸟完整程式设计。",
        courseNum: 6,
        imgSrc: "./image/gao6.png",
        codeSrc: "./image/gao6code.png",

    },
    {
        id: 6,
        title: "共用体育用品柜",
        principle: 4,
        structure: 4,
        programming: 4,
        feature: "使用人脸识别确定借用者身份，语音识别借取体育用品，自定义模型识别确认所归还的物品。",
        desc: "人脸识别、语音识别、机器学习原理、自定义模型识别、舵机控制。",
        courseNum: 6,
        imgSrc: "./image/gao7.png",
        codeSrc: "./image/gao7code.png",

    },
    {
        id: 7,
        title: "可可助手",
        principle: 4,
        structure: 2,
        programming: 5,
        feature: "实现文本、图片及语音的自动生成，识别图像内容自动生成文本与语音。",
        desc: "认识语音交互、连接网络、语音/图片/文本自动生成、识别图像内容自动生成文本和语音。",
        courseNum: 6,
        imgSrc: "./image/zhong2.png",
        codeSrc: "./image/gao2code.png",

    }
])
const active = ref(0)

onMounted(() => {
    courseList.value = courseList1.value
})

const courseListSwitch = (list,ind) => {
    courseList.value = list
    active.value = ind
}
</script>
<template>
    <div class="course-list">
        <h2 style="text-align: center;margin-bottom: 80px;">课程列表</h2>
        <div class="course-list-tab">
            <div class="content course-list-tab-div">
                <div @click="courseListSwitch(courseList1,0)">
                    <span :class="active === 0 ? 'active' : ''">
                        初级
                    </span>
                </div>
                <div @click="courseListSwitch(courseList2,1)">
                    <span :class="active === 1 ? 'active' : ''">
                        中级
                    </span>
                </div>
                <div @click="courseListSwitch(courseList3,2)">
                    <span :class="active === 2 ? 'active' : ''">
                        高级
                    </span>
                </div>
            </div>
        </div>
        <div class="course-list-content content">
            <div class="course-list-content-div active">
                <div class="course-list-content-div-item" v-for="(item, index) in courseList" :key="index">
                    <span class="course-list-content-div-item-title">{{ item.title }}</span>
                    <span class="course-list-content-div-item-num"><i>{{ item.courseNum }}</i>节</span>
                    <div class="course-list-content-div-item-star">
                        <span>
                            原理：<img v-for="i in item.principle" src="../../assets/img/star.png" alt="">
                        </span>
                        <span>
                            结构：<img v-for="i in item.structure" src="../../assets/img/star.png" alt="">
                        </span>
                        <span>
                            编程：<img v-for="i in item.programming" src="../../assets/img/star.png" alt="">
                        </span>
                    </div>
                    <div class="course-list-content-div-item-img">
                        <img class="img" :src="item.imgSrc" alt="">
                        <span class="code-img">
                            <img class="code" :src="item.codeSrc" alt=""><br />
                            演示视频
                        </span>
                    </div>
                    <div class="course-list-content-div-item-desc">
                        <span>功能：</span>
                        <p style="margin-bottom: 10px;">{{ item.feature }}</p>
                        <span>原理：</span>
                        <p>{{ item.desc }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.course-list {
    margin-top: 80px;
    background-color: #F3F7FD;
    padding: 80px 0;

    .course-list-tab{
        border-bottom: 1px solid #E2EEFF;

        .course-list-tab-div {
            display: flex;
            justify-content: space-between;

            div {
                width: 30%;
                text-align: center;
                span{
                    display: inline-block;
                    padding: 0 10px 20px;
                    border-bottom: 1px solid #AECCFE;
                    cursor: pointer;
                    color: #86B3FD;
                    font-weight: 700;
                    font-size: 32px;
                }
                .active{
                    border-bottom: 1px solid #3681FC;
                    color: #000;
                }
            }
        }
    }

    .course-list-content-div {
        margin-top: 48px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .course-list-content-div-item {
            margin-top: 60px;
            width: 22%;
            background-color: #fff;
            border: 1px solid #FFFFFFE5;
            border-radius: 24px;
            box-shadow: 0px 4px 4px #1D398314;
            position: relative;
            padding: 20px;

            .course-list-content-div-item-title {
                width: 142px;
                display: inline-block;
                background-color: #E2EEFF;
                padding: 8px 0 8px;
                font-size: 18px;
                color: #3681FC;
                position: absolute;
                top: -22px;
                left: 0;
            }

            .course-list-content-div-item-title::after {
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                top: 0;
                right: -40px;
                border-width: 20px;
                border-style: solid;
                border-color: transparent transparent transparent #E2EEFF;
            }

            .course-list-content-div-item-num {
                display: inline-block;
                position: absolute;
                right: -30px;
                top: -32px;
                padding: 8px 12px;
                border: 1px solid #AECCFE;
                border-radius: 50%;
                font-weight: 700;
                font-size: 10px;
                background-color: #fff;
                box-shadow: 0px 4px 4px #1D398314;

                i {
                    font-style: normal;
                    font-size: 32px;
                }
            }

            .course-list-content-div-item-star {
                padding: 8px 0;
                text-align: left;
                display: flex;
                justify-content: space-between;

                span {
                    color: #3681FC;
                    font-size: 12px;
                }
            }

            .course-list-content-div-item-img {
                position: relative;
                padding: 10px;

                .img {
                    width: 100%;
                }

                .code-img {
                    cursor: pointer;
                    position: absolute;
                    bottom: 13px;
                    left: 10px;
                    display: inline-block;
                    vertical-align: bottom;
                    font-size: 8px;
                    padding: 3px;
                    background-color: #fff;

                    .code {
                        width: 50px;
                    }
                }

                .code-img:hover {
                    .code {
                        width: 100%;
                    }
                }

            }

            .course-list-content-div-item-desc {
                text-align: left;

                span {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;

                }

                p {
                    margin-top: 5px;
                    font-size: 14px;
                    line-height: 20px;
                    color: #00000099;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    line-clamp: 2;
                    /* 这里是超出几行省略 */
                    overflow: hidden;
                    min-height: 40px;
                }
            }
        }
    }
}
</style>