cocorobo/components/teacherTrain/EventReview.vue

<script setup>
import { ref } from 'vue';
import activeImg1 from '../../assets/img/active1.png'
import activeImg2 from '../../assets/img/active2.png'
import activeImg3 from '../../assets/img/active3.png'
const eventReviewData = ref([
    {
        id: 0,
        title: "省级活动",
        imgList: [
            {
                imgSrc: activeImg1,
                content: "广东省人工智能科创教育领航教师培训"
            }
        ]

    },
    {
        id: 1,
        title: "市级活动",
        imgList: [
            {
                imgSrc: activeImg2,
                content: "2023深圳市首批未来教育基地学校骨干教师培训"
            }
        ]

    },
    {
        id: 2,
        title: "区级活动",
        imgList: [
            {
                imgSrc: activeImg3,
                content: "成都市成华区2023年中小学教师数字素养和人工智能教育素养提升培训"
            }
        ]

    },
]);
</script>
<template>
    <div class="event-review">
        <div class="content">
            <h2>教师培训活动回顾</h2>
            <div class="event-review-content" v-for="item in eventReviewData">
                <span>{{ item.title }}</span>
                <div v-for="i in item.imgList">
                    <img :src="i.imgSrc" alt="">
                    <p>{{ i.content }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.event-review {
    background-color: #F3F7FD;
    padding: 72px 0;

    .event-review-content {
        span {
            display: inline-block;
            margin-top: 80px;
            position: relative;
            font-size: 24px;
            color: #000;
            font-weight: 500;
        }

        span:before {
            content: "";
            position: absolute;
            width: 24px;
            height: 24px;
            background: url("../../assets/img/activeLeft.png");
            left: -30px;
            top: 5px;
        }

        span:after {
            content: "";
            position: absolute;
            width: 24px;
            height: 24px;
            background: url("../../assets/img/activeRight.png");
            right: -30px;
            top: 5px;
        }

        div {
            padding: 24px 0;

            p {
                margin-top: 24px;
            }

            img {
                width: 100%;
            }
        }
    }
}
</style>