cpdm_pc/src/components/CpmdFooter.vue

<script lang="ts" setup>
</script>
<template>
    <!-- 此处最大宽度是1200px -->
    <div class="home_footer_inner">
        <!-- <div class="home_footer_icon">
            <div class="home_footer_company">
                <img width="200px" src="../assets/home/ding_xiang.png" />
            </div>

            <div class="home_footer_waizhan">
                <img width="30px" style="margin-right:40px" src="../assets/home/dou_yin.png" />
                <img width="40px" src="../assets/home/we_b.png" />
            </div>
        </div> -->

        <!-- <div class="home_footer_mi">
            <div class="home_footer_fo_des">关于我们</div>
            <div class="home_footer_fo_des">我们的服务</div>
            <div class="home_footer_fo_des">免费检测</div>
            <div class="home_footer_fo_des">游戏内容</div>
            <div class="home_footer_fo_des">联系我们</div>
        </div>
        <div class="home_footer_mi">
            <div class="home_footer_fo_des">关于我们</div>
            <div class="home_footer_fo_des">我们的服务</div>
            <div class="home_footer_fo_des">免费检测</div>
            <div class="home_footer_fo_des">游戏内容</div>
            <div class="home_footer_fo_des">联系我们</div>
        </div>
        <div class="home_footer_mi">
            <div class="home_footer_fo_des">关于我们</div>
            <div class="home_footer_fo_des">我们的服务</div>
            <div class="home_footer_fo_des">免费检测</div>
            <div class="home_footer_fo_des">游戏内容</div>
            <div class="home_footer_fo_des">联系我们</div>
        </div> -->
        <div class="icon_list">
            <div class="icon_inner">
                <img class="img_icon" src="../assets/footer/5.png" alt="">
                <span class="icon_font">首都医科大学</span>
                <span class="icon_font">宣武医院</span>
            </div>
            <div class="icon_inner">
                <img class="img_icon" src="../assets/footer/1.png" alt="">
                <!-- <span class="icon_font">中国人民解放军军事科学院军事医学研究院</span> -->
                <span class="icon_font">中国人民解放军军事科学院军事医学研究院</span>
                <!-- <span class="icon_font">中国人民解放军军事科学院军事医学研究院</span> -->
            </div>
            <div class="icon_inner">
                <img class="img_icon" src="../assets/footer/4.png" alt="">
                <span class="icon_font">郑州大学</span>
                <span class="icon_font">&nbsp;</span>
            </div>
            <div class="icon_inner">
                <img class="img_icon" src="../assets/footer/2.png" alt="">
                <span class="icon_font">中国人民解放军空军</span>
                <span class="icon_font">特色医学中心</span>
            </div>
            <div class="icon_inner">
                <img class=" img_icon" src="../assets/footer/3.png" alt="">
                <span class="icon_font">国家超级计算</span>
                <span class="icon_font">郑州中心</span>
            </div>


        </div>
        <div style="width:1200px;height:10px;background-color: #ffffff;">
        </div>
        <div class="home_footer_fo">
            <div class="home_footer_fo_des">隐私</div>
            <div class="home_footer_fo_des">使用条款</div>
            <!-- <div class="home_footer_fo_des">北京丁香科技有限公司</div> -->
        </div>
    </div>
</template>
<style lang="scss">
.home_footer_inner {
    padding: 30px 0px;
    background-color: #000000;
    // position: absolute;
    // left: 0;
    // right: 0;
    margin: auto;
    width: 1200px;

    .home_footer_icon {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .home_footer_company {
            flex: 1;
        }

        .home_footer_waizhan {
            display: flex;
            align-items: center;
        }
    }

    .home_footer_fo {
        margin-top: 20px;
        justify-content: center;
        display: flex;
        color: #ffffff;

        // margin: auto;
        .home_footer_fo_des {
            margin: 0px 20px;
        }
    }

    .home_footer_mi {
        margin-top: 20px;
        justify-content: space-around;
        display: flex;
        color: #ffffff;
        margin-bottom: 20px;

        // margin: auto;
        .home_footer_fo_des {
            margin: 0px 20px;
        }
    }

    .icon_list {
        display: flex;
        justify-content: space-around;

        margin-bottom: 20px;

        .icon_inner {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 200px;

            .img_icon {
                width: 70px;
                margin-bottom: 5px;
            }

            .icon_font {
                color: #ffffff;
                text-align: center;
            }
        }
    }
}
</style>