cocorobo/components/cocopi/CourseTraits.vue

<template>
    <div class="course-traits">
        <h2>课程特点</h2>
        <p class="course-traits-intro">我 们 基 于 长 期 以 来 以 学 习 者 为 中 心 的 项 目 式 学 习 实 践 探 索，以 欧 盟 发 布 的《Digital Competence
            Framework for Educators》、CSTA 发布的《K‒12 Computer Science
            Framework》和项目式教育实践对于教师的要求为指引，建立了一套框架完整、能力进阶、实操性强的教师培训内容体系。</p>
        <div class="course-traits-step">
            <div class="course-traits-step-div">
                <img src="../../assets/img/01.png" alt="">
                <h4>遵循人工智能教育国际标准内容专业</h4>
                <p>基于<span>AI4K12</span>人工智能教育框架设计系列课程，具备循序渐进、跨学科整合、实践导向和注重伦理的特点，旨在培养学生的AI基础知识和综合应用能力。</p>
            </div>
            <div class="course-traits-step-div">
                <img src="../../assets/img/02.png" alt="">
                <h4>细致资源与指引<br />轻松授课</h4>
                <p>提供全面的教学材料和明确的操作步骤，让教师能够毫不费力地进行高效、高质量的教学。</p>
            </div>
            <div class="course-traits-step-div">
                <img src="../../assets/img/03.png" alt="">
                <h4>趣味活动<br />深化理解</h4>
                <p>使用趣味的、互动的、游戏化的、项目式的课程形式，促进学生的理解。</p>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.course-traits {
    margin-top: 120px;
    width: 100%;
    padding: 80px 15%;
    text-align: center;
    background-color: #F3F7FD;

    .course-traits-intro {
        width: 100%;
        margin-top: 20px;
        font-size: 18px;
        color: #5a5a5a;
        line-height: 32.4px;
    }

    .course-traits-step {
        position: relative;
        margin-top: 50px;
        display: flex;
        justify-content: space-between;

        .course-traits-step-div {
            position: relative;
            width: 32%;
            border-radius: 32px;
            background-color: #fff;
            padding: 80px 40px 64px;
            transform: scale(0.97);
            transform-style: preserve-3d;

            h4 {
                margin: 24px 0 32px;
                line-height: 36px;
            }

            p {
                font-size: 18px;
                line-height: 32px;

                span {
                    color: rgba(54, 129, 252, 1);
                }
            }

        }

        .course-traits-step-div::before {
            content: "";
            position: absolute;
            background: linear-gradient(to right, #3681FC, #AD88FD);
            width: 99%;
            height: 100%;
            border-radius: 32px;
            bottom: -10px;
            left: 0.5%;
            z-index: -1;
            opacity: 0;
            transform: scale(1.05);
        }

        .course-traits-step-div:hover{
            transform: scale(1);
        }
       .course-traits-step-div:hover::before {
            transform: translateZ(-1px);
            opacity: 1;

        }

    }

}
</style>