cocorobo/components/ProductCocoPi.vue

<script setup>
import { ref } from "vue";
const CocoPiIndex = ref(0);

const CocoPiSwitch = (index) => {
    CocoPiIndex.value = index;
}
</script>
<template>
    <div class="cocopi">
        <div class="cocopi-content">
            <div class="cocopi-content-left">
                <div @click="CocoPiSwitch(0)">
                    <img v-if="CocoPiIndex === 0" src="../assets/img/icon4.png" alt="">
                    <span>高集成度</span>
                </div>
                <div @click="CocoPiSwitch(1)">
                    <img v-if="CocoPiIndex === 1" src="../assets/img/icon4.png" alt="">
                    <span>易用性</span>
                </div>
                <div @click="CocoPiSwitch(2)">
                    <img v-if="CocoPiIndex === 2" src="../assets/img/icon4.png" alt="">
                    <span>开放性</span>
                </div>
            </div>
            <div class="cocopi-content-right">
                <div v-if="CocoPiIndex === 0" class="cocopi-content-right-div">
                    <div>
                        <h4>多合一</h4>
                        <p>
                            <b>硬件：</b>
                            <span>传感器、屏幕、镜头、电机</span>
                        </p>
                        <p>
                            <b>功能：</b>
                            <span>人工智能功能</span>
                        </p>
                    </div>
                    <div>
                        <img src="../assets/img/high.png" alt="">
                    </div>

                </div>
                <div v-else-if="CocoPiIndex === 1" class="cocopi-content-right-div">
                    <div>
                        <img src="../assets/img/usability1.png" alt="">
                        <h6>多终端编程</h6>
                        <span>电脑、平板、移动电话</span>
                    </div>
                    <div>
                        <img src="../assets/img/usability2.png" alt="">
                        <h6>多方式上传</h6>
                        <span>传输线、WI-FI、蓝牙</span>
                    </div>

                </div>
                <div v-else class="cocopi-content-right-div">
                    <div>
                        <h4>多合一</h4>
                        <p>
                            <b>硬件：</b>
                            <span>传感器、屏幕、镜头、电机</span>
                        </p>
                        <p>
                            <b>功能：</b>
                            <span>人工智能功能</span>
                        </p>
                    </div>
                    <div>
                        <img style="width: 85%;" src="../assets/img/open.png" alt="">
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.cocopi {
    width: 100%;
    margin: 72px auto 0;
    font-size: 18px;
    text-align: center;

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

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

    .cocopi-content {
        display: flex;
        margin-top: 48px;

        .cocopi-content-left {
            position: relative;
            width: 30%;
            // height: 450px;
            text-align: center;
            padding: 84px 48px;
            border-top-left-radius: 48px;
            border-bottom-left-radius: 48px;
            background-color: rgba(15, 84, 196, 0.95);
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;

            div {
                width: 100%;
                font-size: 24px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 30px;
                padding: 0 50px;
                position: relative;

                img {
                    position: absolute;
                    left: 0px;
                    top: 50%;
                    transform: translate(0, -50%);
                }

                span {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }

            }


        }

        .cocopi-content-left::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            border-top-left-radius: 48px;
            border-bottom-left-radius: 48px;
            background-image: url("../assets/img/productImg.png");
            opacity: 0.15;
        }

        .cocopi-content-right {
            border-top-right-radius: 48px;
            border-bottom-right-radius: 48px;
            background-color: #F3F7FD;
            width: 100%;
            // height: 450px;

            .cocopi-content-right-div {
                display: flex;

                div {
                    width: 50%;
                    text-align: center;
                    padding: 48px;

                    h4 {
                        font-size: 64px;
                        font-weight: 500;
                        text-align: left;
                        line-height: 100px;
                    }

                    p {
                        text-align: left;
                        font-size: 18px;
                        font-weight: 400;
                        line-height: 28px;
                        color: #00000099;

                        b {
                            color: #000;
                        }
                    }

                    img {
                        display: inline-block;
                        width: 100%;
                    }

                    h6 {
                        font-size: 24px;
                        font-weight: 540;
                        line-height: 36px;
                    }

                    span {
                        font-size: 18px;
                        color: #00000099;

                    }
                }
            }
        }
    }

    .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");
        }
    }
}
</style>