hongze_yb_pc/src/layout/component/Footer.vue

<template>
    <div class="footer-wrap">
        <div class="flex top-box">
            <div class="left-con">
                <div class="about-text">关于弘则</div>
                <div class="about-text-en">ABOUT US</div>
                <div class="info-item">公司名称：弘则弥道（上海）投资咨询有限公司</div>
                <div class="info-item">地址：上海市世纪大道210号 21世纪大厦12层1206室</div>
                <div class="info-item">电话：86-21-61645300</div>
                <a class="info-item" href="https://www.hzinsights.com" target="blank">官网：https://www.hzinsights.com</a>
                <div class="info-item">邮箱：service@hzinsights.com</div>
            </div>
            <div class="right-con">
                <img class="gzh-img" src="@/assets/gzh-img2.jpg" alt="">
                <div style="font-size:16px;margin:14px 0 10px 0">扫码关注弘则研究公众号</div>
                <div style="font-size:14px;color:#666">弘则研究：专注为全球投资<br/>者提供中立客观的研究服务</div>
            </div>
        </div>
        <a class="copy-right-box" href="https://beian.miit.gov.cn/#/Integrated/index" target="blank">Copyright ©2020 弘则弥道（上海）投资咨询有限公司 沪ICP备15035458号-1</a>
    </div>
</template>

<style lang="scss" scoped>
.footer-wrap{
    .top-box{
        padding-left: 180px;
        padding-right: 260px;
        padding-top: 30px;
        padding-bottom: 20px;
        justify-content: space-between;
        .left-con{
            .about-text{
                font-size: 26px;
                font-weight: bold;
                &::after{
                    display: block;
                    content:'';
                    width:61px;
                    height: 6px;
                    background-color: #F3A52F;
                    margin-top: 5px;
                }
            }
            .about-text-en{
                font-size: 20px;
                font-weight: 300;
                margin-top: 7px;
                margin-bottom: 20px;
            }
            .info-item{
                font-weight: 300;
                font-size: 14px;
                margin-bottom: 6px;
                display: block;
                color: #333;
            }
        }
        .right-con{
            .gzh-img{
                border: 1px solid #F3A52F;
                border-radius: 4px;
                width: 103px;
                height: 103px;
                padding: 7px;
                display: block;
                margin: 0 auto;
            }
        }
    }
    .copy-right-box{
        border-top: 1px solid #f2f2f2;
        padding: 20px 0;
        text-align: center;
        font-size: 14px;
        color: #666;
        display: block;
    }
}
</style>