cocorobo/components/AppFooter.vue

<template>
    <div id="footer">
        <div class="footer-top">
            <div class="footer-left">
                <ul>
                    <li>
                        <span><router-link to="/">产品</router-link></span>
                        <div>
                            <p><router-link to="/cocopi">产品介绍</router-link></p>
                            <p><router-link to="/platform">配套工具</router-link></p>
                            <p><router-link to="/download">下载中心</router-link></p>
                        </div>
                    </li>
                    <li>
                        <span><a href="//edu.cocorobo.cn" class="active-a" target="_blank">课程</a></span>
                    </li>
                    <li>
                        <span>服务</span>
                        <div>
                            <p><router-link to="/solutions">整体服务方案</router-link></p>
                            <p><router-link to="/teacherTrain">教师培训</router-link></p>
                            <p><router-link to="/joinEvent">赛事活动</router-link></p>
                        </div>
                    </li>
                    <li>
                        <span>活动</span>
                        <div>
                            <p><router-link to="/teacherTrain">教师培训</router-link></p>
                            <p><router-link to="/joinEvent">赛事活动</router-link></p>
                        </div>
                    </li>
                    <li>
                        <span>关于我们</span>
                        <div>
                            <p><router-link to="/about">公司简介</router-link></p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="footer-right">
                <img class="footer_img1" src="../assets/img/footer1.png" alt="">
                <img class="footer_img2" src="../assets/img/footer2.png" alt="">
                <img class="footer_img3" src="../assets/img/footer3.png" alt="">
                <div class="code">
                    <img src="../assets/img/qrCode.png" alt="">
                    <p>
                        邮箱：support@cocorobo.cc
                    </p>
                    <p>
                        电话：0755-86525412
                    </p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div>
                <p>© 可可乐博（深圳）科技有限公司 2024 版权所有. 
                    <a href="https://beian.miit.gov.cn/">粤ICP备18071116号</a>
                </p>
                <p>地址：广东省深圳市宝安区新安街道兴东社区72区留仙三路38号创兴达商务中心2010 | 广东省深圳市南山区高新区粤兴二道10号香港中文大学深圳研究院 3 楼 310
                </p>
            </div>
        </div>
    </div>
</template>
<style>
#footer {
    width: 100%;
    background-color: #011330;
    text-align: center;
    position: relative;
    color: #fff;

    a {
        color: #fff;
    }

    .footer-top {
        display: flex;
        padding-left: 15%;
        height: 500px;

        .footer-left {
            padding-top: 75px;
            width: 100%;

            ul {
                display: flex;

                li {
                    font-size: 20px;
                    margin-right: 30px;
                    color: #fff;
                    font-size: 30px;
                    font-weight: 700;

                    span {
                        padding: 0 15px 10px;
                        border-bottom: 2px solid rgba(255, 255, 255, 0.6);
                    }

                    div {
                        margin-top: 30px;

                        p {
                            font-size: 16px;
                            font-weight: 400;
                            margin-top: 15px;


                        }
                    }
                }
            }
        }

        .footer-right {
            width: 100%;
            position: relative;
            right: 0;

            img {
                position: absolute;
            }
            
            .code{
                position: relative;
                top: 40%;
                transform: translate(0, -50%);
                img{
                    position: relative;
                    margin: 0 auto;
                }
                p{
                    margin-top: 20px;
                }
            }

            .footer_img3 {
                top: 0;
                left: 30%;
            }

            .footer_img2 {
                bottom: 0;
                right: 0;
            }

            .footer_img1 {
                bottom: 0;
                left: 20%;
            }
        }
    }

    .footer-bottom {
        width: 100%;
        line-height: 30px;
        bottom: 10px;
        font-size: 14px;
    }

}
</style>