cocorobo/components/cocopi/CocoPiTop.vue

<script setup>
</script>
<template>
    <div class="cocopi-top">
        <img class="backimg" src="../../assets/img/cocopiBack1.png" alt="">
        <img class="backimg" src="../../assets/img/cocopiBack2.png" alt="">
        <img class="backimg" src="../../assets/img/cocopiBack3.png" alt="">
        <div class="cocopi-top-content">
            <div>
                <h2>CocoPi</h2>
                <p>用於AIoT教學、運行<br />Linux系統的<span>掌上計算機</span></p>
                <p>All-in-One Product in <br />Technology Innovation Education</p>
            </div>
            <div>
                <img src="../../assets/img/cocopiImg.png" alt="">
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.cocopi-top{
    width: 100%;
    position: relative;
    // height: 500px;
    .backimg{
        position: absolute;
    }
    .backimg:nth-child(1){
        top: -10px;
        left: 0;
    }
    .backimg:nth-child(2){
        top: 180px;
        right: 470px;
        width: 600px;
    }
    .backimg:nth-child(3){
        top: -50px;
        right: 10px;
        width: 600px;
        z-index: -1;
    }
    .cocopi-top-content{
        width: 70%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding: 0 0;
        div{
            position: relative;
            // width: 50%;
            font-size: 64px;
            h2{
                font-weight: 700;
                letter-spacing: 4%;
                color: #000;
                position: relative;
                margin-top: 125px;
            }
            h2::after{
                position: absolute;
                content: '';
                width: 450px;
                height: 24px;
                bottom: -5px;
                left: 0;
                background: linear-gradient(90deg, #3681FC 0%, rgba(54, 129, 252, 0) 100%);
            }
            p{
                color: #000;
                span{
                    color: #3681FC;
                    
                }
            }
            p:nth-child(2){
                margin-top: 120px;
                font-weight: 500;
                line-height: 100px;
            }
            p:nth-child(3){
                font-style: italic;
                color: #3681FC;
                font-size: 32px;
                margin-top: 18px;
                line-height: 48px;
                letter-spacing: 10%;
            }
            img{
                position: relative;
                z-index: 2;
            }
        }
    }
}
// .cocopi-top::before{
//     content: '';
//     width: 380px;
//     height: 380px;
//     position: absolute;
//     top: 0;
//     left: 15%;
//     background: #E67F36;
//     opacity: 0.1;
//     border-radius: 50%;

// }
</style>