cocorobo/components/cocopi/summarized.vue

<template>
    <div class="summarized">
        <h2>产品概括</h2>
        <div class="summarized-content">
            <h3><span class="summarized-ai-icon"></span>人工智能</h3>
            <div class="summarized-ai-content" style="background-color: #fff;">
                <h4>判别式人工智能</h4>
                <div class="summarized-ai-content-flex">
                    <div>
                        <img src="../../assets/img/ai1.png" alt="">
                        <span>机器学习</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai2.png" alt="">
                        <span>计算机视觉</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai3.png" alt="">
                        <span>语音识别</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai4.png" alt="">
                        <span>语音合成</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai5.png" alt="">
                        <span>机器翻译</span>
                    </div>
                </div>
            </div>
            <div class="summarized-ai-content" style="background-color: #E2EEFF;">
                <h4>生成式人工智能</h4>
                <div class="summarized-ai-content-flex">
                    <div>
                        <img src="../../assets/img/ai6.png" alt="">
                        <span>生成文本</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai7.png" alt="">
                        <span>语音对话</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai8.png" alt="">
                        <span>语音生图</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai9.png" alt="">
                        <span>图像描述</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai10.png" alt="">
                        <span>智能体</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="summarized-content">
            <h3><span class="summarized-ai-icon"></span>物联网</h3>
            <div class="summarized-ai-content" style="background-color: #fff;">
                <h4>判别式人工智能</h4>
                <div class="summarized-ai-content-flex">
                    <div>
                        <img src="../../assets/img/ai1.png" alt="">
                        <span>云端平台</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai2.png" alt="">
                        <span>感应系统</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai3.png" alt="">
                        <span>即时图传</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai4.png" alt="">
                        <span>蓝牙通讯</span>
                    </div>
                    <div>
                        <img src="../../assets/img/ai5.png" alt="">
                        <span>Wi-Fi联网</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.summarized {
    background-color: #F3F7FD;
    margin-top: 180px;
    padding: 80px 15%;
    text-align: center;

    .summarized-content {
        text-align: left;
        margin-top: 64px;

        h4 {
            // display: block;
            position: relative;
            padding-left: 30px;
        }

        h4::before {
            position: absolute;
            content: "";
            width: 24px;
            height: 24px;
            background: url("../../assets/img/ai_icon.png");
            top: 3px;
            left: 0;
        }

        .summarized-ai-icon {
            display: inline-block;
            width: 32px;
            height: 32px;
            border: 8px solid #3581FC;
            border-radius: 50%;
            margin-right: 8px;
        }

        .summarized-ai-content {
            padding: 32px 48px;
            border-radius: 24px;
            margin-top: 32px;

            .summarized-ai-content-flex {
                display: flex;
                text-align: center;
                justify-content: space-between;
                margin-top: 24px;

                img {
                    display: block;
                    margin-bottom: 16px;
                    width:100%;
                }

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

    }
}
</style>