super-fusion-platform/src/views/integrateOptimization/page/homePage/bottomInfo.vue

<template>
    <div class="home-page-bottom-style">
        <div class="bottom-part-style">
            <span class="title-span">长春市基础教育集优化发展管理服务平台</span>
        </div>
        <div class="bottom-part-style">
            <div class="part-row-style">地址：吉林省长春市自由大路696号</div>
            <div class="part-row-style">电话：0431-85616988</div>
            <div class="part-row-style">邮编：130000</div>
        </div>
        <div class="bottom-part-style">
            <div class="part-row-style">Email：XXXXXX@168.com</div>
            <div class="part-row-style">技术支持：东北师大理想软件股份有限公司</div>
            <div class="part-row-style">版权所有 Copright @ XXXX-XXXX</div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {}
        }
    }
</script>

<style scoped lang="scss">
    .home-page-bottom-style{
        width: 100%;
        height: 8rem;
        position: absolute;
        bottom: 0;
        background-color: #98acf8;
        display: flex;
        .bottom-part-style{
            width: 33%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            .title-span{
                font-size: 1rem;
                font-weight: bolder;
                position: relative;
                top: -10px;
            }
            .part-row-style{
                width: 100%;
            }
        }
    }
    .home-page-bottom-style:hover{
        background-color: #394af8;
    }
</style>