cocorobo/components/home/Product.vue

<script setup>
import { ref } from 'vue';
import ProductCocoPi from '../ProductCocoPi.vue';
const active = ref(0);

const productionSwitch = (index) => {
    active.value = index;
}

</script>
<template>
    <div class="product">
        <div class="product-top">
            <div class="product-top-line">
                <div :class="active === 0 ? 'product-active' : ''" @click="productionSwitch(0)">
                    <a href="#Product">
                        <img src="../../assets/img/product.png" alt="">
                        <br />
                        <span>产品</span>
                    </a>
                </div>
                <div :class="active === 1 ? 'product-active' : ''" @click="productionSwitch(1)">
                    <a href="#Course">
                        <img src="../../assets/img/course.png" alt="">
                        <br />
                        <span>课程</span>
                    </a>
                </div>
                <div :class="active === 2 ? 'product-active' : ''" @click="productionSwitch(2)">
                    <a href="#Server">
                        <img src="../../assets/img/server.png" alt="">
                        <br />
                        <span>服务</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="product-bottom">
            <div id="Product" class="cocopi1">
                <h3>人工智能教育硬件產品cocopi</h3>
                <nuxt-link to="/CocoPi">点击了解更多</nuxt-link>
                <ProductCocoPi />
            </div>
            <div id="Course" class="cocopi1">
                <h3>人工智能课程</h3>
                <nuxt-link to="/CocoPi">点击了解更多</nuxt-link>
                <div class="Course-content">
                    <div>
                        <h4>课程体系完善</h4>
                        <span>面向小学、中学、高中全年段</span>
                    </div>
                    <div>
                        <h4>课程主题丰富</h4>
                        <span>未来农业、智慧生活、人文关<br />怀、传统文化、游戏竞技等主题</span>
                    </div>
                    <div>
                        <h4>课程内容</h4>
                        <span>遵循人工智能教育国际标准，内容专业<br />细致资源与指引,轻松授课<br />趣味活动，深化理解</span>
                    </div>
                </div>
            </div>
            <div id="Server">
                <div class="server_div">
                    <div class="server_div_div server_div_0">
                        <span>服务</span>
                    </div>
                    <div class="server_div_1 server_div_div">
                        <img src="../../assets/img/01.png" alt="">
                        <ul style="display: flex;justify-content:space-around">
                            <li>整体解决方案方案</li>
                            <li>人工智能教育解决方案</li>
                            <li>赛事服务方案</li>
                        </ul>
                    </div>
                </div>
                <div class="server_div">
                    <div class="server_div_2 server_div_div">
                        <img src="../../assets/img/02.png" alt="">
                        <ul>
                            <li>教师培训方案</li>
                            <li>科学专业的培训体系</li>
                            <li>8年深耕积累丰富教育经验</li>
                            <li>培训效果显著</li>
                        </ul>
                    </div>
                    <div class="server_div_3 server_div_div">
                        <img src="../../assets/img/03.png" alt="">
                        <ul>
                            <li>賽事活动解决方案</li>
                            <li>丰富的资源支持全方位赛事筹备</li>
                            <li>软硬件技术支持全环节赛事执行</li>
                            <li>基于赛事管理平台的数字化运营与管理</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.product {
    margin-top: 100px;
    text-align: center;

    .product-top {
        border-bottom: 1px solid #E2EEFF;
        width: 100%;

        .product-top-line {
            width: 1280px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            font-size: 18px;
            text-align: center;
            color: rgba($color: #000000, $alpha: 0.6);

            div {
                width: 70px;
                display: inline-block;
                line-height: 32.4px;
                cursor: pointer;

                img {
                    margin: 0 auto;
                }
            }

            .product-active {
                border-bottom: 2px solid #3681fc;
            }
        }
    }

    .product-bottom {

        .cocopi1 {
            width: 70%;
            margin: 72px auto 0;
            font-size: 18px;

            h3 {
                font-size: 48px;
                font-weight: 700;
            }

            a {
                font-weight: 400;
                color: #3681fc;
            }


            .Course-content {
                display: flex;
                justify-content: space-between;
                margin-top: 80px;

                div {
                    width: 30%;
                    // height: 280px;
                    // background-repeat: no-repeat;
                    // background-position: 100% 100%;
                    padding: 60px 40px;
                    border-radius: 32px;

                    h4 {
                        font-size: 32px;
                        font-weight: 500;
                    }

                    span {
                        font-size: 18px;
                        font-weight: 400;
                    }
                }

                div:nth-child(1) {
                    background-image: url("../../assets/img/content1.png");
                }

                div:nth-child(2) {
                    background-image: url("../../assets/img/content2.png");
                }

                div:nth-child(3) {
                    background-image: url("../../assets/img/content3.png");
                }
            }
        }

        #Server {
            width: 100%;
            background-color: rgba(243, 247, 253, 1);
            margin-top: 200px;
            padding: 150px 0 200px;

            .server_div {
                width: 70%;
                margin: 24px auto;
                display: flex;

                .server_div_div {
                    width: 100%;
                    background-color: #fff;
                    border-radius: 32px;
                    text-align: left;
                    padding: 40px 64px;

                    ul {
                        margin-top: 10px;
                        padding-left: 20px;

                        li {
                            width: 100%;
                            list-style-type: disc;
                            font-size: 24px;
                            color: #000;
                            padding: 10px 0;
                        }
                    }
                }

                .server_div_div:nth-child(2) {
                    margin-left: 2%;
                }

                .server_div_0 {
                    width: 140px;
                    padding: 20px 30px;
                    background-color: rgba(54, 129, 252, 1);
                    border-radius: 32px;
                    font-size: 64px;
                    color: #FFF;
                }
            }
        }
    }
}
</style>