cocorobo/pages/joinEvent.vue

<script setup>
import { ref } from 'vue';
import Back from '~/components/home/back.vue';
import EventReview from '~/components/EventReview.vue';
const content =ref("活动内容多样<br />服务体系完善<br />赛事经验丰富")
const content1 =ref("专注于为中小学及教育机构提供赛事策划、组<br >织、执行和评估等全方位服务，确保活动顺利<br />进行，提升学生参与体验和教育价值。")
</script>
<template>
    <div class="join-event">
        <Back :content="content" :content2="content1" />
        <div class="join-event-content content">
            <h2>赛事解决方案</h2>
            <p>科创赛事活动分为两类，分别为承办各级行政单位级的重要赛事活动以及联合其他教育单位及教育机构举办的赛事活动，主要工作内容包括赛前规划、赛事执行和赛事运营等，旨在为广大学生提供展示自我、提高技能的平台，同时也为推动大湾区文化交流做出了积极的贡献。
            </p>
            <div class="join-event-content-div">
                <div>
                    <img src="../assets/img/event1.png" alt="">
                    <h4>赛事规划</h4>
                    <p>前期事务筹备<br />赛事规则制定<br />活动流程设计</p>
                </div>
                <div>
                    <img src="../assets/img/event2.png" alt="">
                    <h4>赛事执行</h4>
                    <p>参赛人员培训<br />赛事组织开展<br />软硬件技术支持</p>
                </div>
                <div>
                    <img src="../assets/img/event3.png" alt="">
                    <h4>赛事运营</h4>
                    <p>数字化赛事运营管理<br />赛事分析报告<br />赛后活动宣传</p>
                </div>
            </div>
        </div>
        <div class="join-event-introduced">
            <div class="content">
                <h2>支持国家官方赛事</h2>
                <div class="join-event-introduced-content-div">
                    <div>
                        <img src="../assets/img/event4.png" alt=""><br />
                        <p>30+</p><br />
                        <span>承办赛事活动</span>
                    </div>
                    <div>
                        <img src="../assets/img/event5.png" alt=""><br />
                        <p>4500+</p><br />
                        <span>参与学校</span>
                    </div>
                    <div>
                        <img src="../assets/img/event6.png" alt=""><br />
                        <p>100000+</p><br />
                        <span>参与人次</span>
                    </div>
                </div>
                <h2 style="margin-top: 80px;">公司联合其他教育单位举办赛事活动</h2>
                <div class="join-event-introduced-content-div">
                    <div>
                        <img src="../assets/img/event4.png" alt=""><br />
                        <p>20+</p><br />
                        <span>承办赛事活动</span>
                    </div>
                    <div>
                        <img src="../assets/img/event5.png" alt=""><br />
                        <p>500+</p><br />
                        <span>参与学校</span>
                    </div>
                    <div>
                        <img src="../assets/img/event6.png" alt=""><br />
                        <p>6000+</p><br />
                        <span>参与人次</span>
                    </div>
                </div>
            </div>
        </div>
        <EventReview />
    </div>
</template>
<style scoped lang="scss">
.join-event {
    .join-event-content {
        margin-top: 80px;

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

        .join-event-content-div {
            display: flex;
            justify-content: space-between;
            margin-top: 80px;

            div {
                position: relative;
                width: 30%;
                background-color: #fff;
                border: 1px solid #EEEEEE;
                border-radius: 32px;
                padding: 80px 40px;
                transform-style: preserve-3d;

                h4 {
                    margin-top: 24px;
                }

                p {
                    margin-top: 32px;
                }
            }

            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);
            }

            div:hover::before {
                transform: translateZ(-1px);
                opacity: 1;
            }
        }
    }

    .join-event-introduced {
        background-color: #011330;
        padding: 80px 0;
        color: #fff;
        margin-top: 80px;
        .join-event-introduced-content-div {
            display: flex;
            margin-top: 20px;

            div {
                width: 33%;
                border-right: 2px solid #FFFFFF38;

                p {
                    font-weight: bold;
                    display: inline-block;
                    background: linear-gradient(to right, #3673E8, #AD88FD);
                    background-clip: text;
                    /*将设置的背景颜色限制在文字中*/
                    -webkit-text-fill-color: transparent;
                    /*给文字设置成透明*/
                    font-size: 48px;
                    margin: 12px 0;
                    line-height: normal;
                }

                span {
                    font-size: 20px;
                }
            }
        }
    }
}
</style>