cocorobo/components/EventReview.vue

<script setup>

</script>

<template>
    <div class="event-review">
        <div class="content">
            <h2>赛事活动回顾</h2>
            <div class="event-review-content">
                <img src="../assets/img/activeImg1.png" alt="">
                <div class="event-review-content-text">
                    <div class="title">第二届粤港澳大湾区STEM/AI挑战赛</div>
                    <div class="time">2022年12月</div>
                    <div class="game-content">
                        <span>联合举办单位：</span>
                        <p>港澳大湾区 STEM 教育联盟、国际青年文化交流中心、香港科创协会</p>
                    </div>
                    <div class="game-content">
                        <span>参赛队伍：</span>
                        <p>香港与内地共150余支中小学队伍 STEM 教育联盟、国际青年文化交流中心、香港科创协会</p>
                    </div>
                    <div class="game-content">
                        <span>比赛内容：</span>
                        <p>本次比赛以迷宫寻宝为切入点，通过机器人对抗赛深学生对人工智能，物联网通信，程序设计和工程学的了解，加强学生对 STEM 及信息技术的了解及创新。</p>
                    </div>
                </div>
            </div>
            <div class="event-review-content">
                <div class="event-review-content-text">
                    <div class="title">大湾区智慧交通校际挑战赛/AI挑战赛</div>
                    <div class="time">2023年4月</div>
                    <div class="game-content">
                        <span>联合举办单位：</span>
                        <p>大湾区香港中心</p>
                    </div>
                    <div class="game-content">
                        <span>参赛队伍：</span>
                        <p>内地(在 线、线下)和香港(线下)的78支代表 队参赛</p>
                    </div>
                    <div class="game-content">
                        <span>比赛内容：</span>
                        <p>本次比赛以具有代表性 的“香港科技大学(广州)-庆盛站”地 图为基础，设置了包括直线循线、标 志 识 别 、扫 码 上 车 、红 绿 灯 感 应 、弯 道循线和斑马线礼让行人等丰富多 样的挑战任务，选手们需在规定时 间内完成多个闯关任务以获分数。</p>
                    </div>
                </div>
                <img src="../assets/img/activeImg2.png" alt="">
            </div>
            <div class="event-review-content">
                <img src="../assets/img/activeImg3.png" alt="">
                <div class="event-review-content-text">
                    <div class="title">第一届粤港澳大湾区STEM/AI挑战赛:陆空协同</div>
                    <div class="time">2023年5月</div>
                    <div class="game-content">
                        <span>联合举办单位：</span>
                        <p>香港广州创新协会、香港科创协会</p>
                    </div>
                    <div class="game-content">
                        <span>参赛队伍：</span>
                        <p>来自香港、内地两赛区 24 支队伍参与其中</p>
                    </div>
                    <div class="game-content">
                        <span>比赛内容：</span>
                        <p>本次比赛以陆空协同为切入点， 通过无人车、无人机相互协作完成各自任务， 深入学生对人工智能、物联网通讯、工程学 等了解。</p>
                    </div>
                </div>
            </div>
            <div class="event-review-content">
                <div class="event-review-content-text">
                    <div class="title">第一届机械人对抗赛</div>
                    <div class="time">2019年2月</div>
                    <div class="game-content">
                        <span>联合举办单位：</span>
                        <p>中华基督教会香港区会小学校长会、现代出版社</p>
                    </div>
                    <div class="game-content">
                        <span>参赛队伍：</span>
                        <p>来自 23 家中华基督教会香港区会44 支小学四到六年级的队伍参加比赛</p>
                    </div>
                    <div class="game-content">
                        <span>比赛内容：</span>
                        <p>主要包括巡线竞速赛、避障竞速赛、拾物 竞速赛三大环节，帮助学生学习动力及机械方面程序 设计及 App Inventor 的初体验。</p>
                    </div>
                </div>
                <img src="../assets/img/activeImg4.png" alt="">
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.event-review{
    background-color: #F3F7FD;
    padding: 80px 0 160px;
    .event-review-content{
        display: flex;
        justify-content: space-between;
        margin-top: 80px;
        img{
            width: 55%;
        }
        .event-review-content-text{
            width: 40%;
            text-align: left;
            font-size: 16px;
            .title{
                font-size: 24px;
                font-weight: bold;
                line-height: 36px;
            }
            .time{
                margin-top: 8px;
                font-size: 16px;
                border-bottom: 2px solid #D8D8D880;
                padding-bottom: 16px;
            }
            .game-content{
                margin-top: 16px;
                line-height: 22px;
                span{
                    font-weight: bold;
                }
            }
        }
    }
}
</style>