<script setup lang="ts">

</script>

<template>
    <!-- 公共页脚 -->
    <div class="footer-container">
        <div class="wapper">
            <ul class="icon-info">
                <li>
                    <span>正</span>
                    <span>
                        <i>正品行货</i>
                        <i>品类齐全</i>
                    </span>
                </li>
                <li>
                    <span>透</span>
                    <span>
                        <i>阳光采购</i>
                        <i>一站服务</i>
                    </span>
                </li>
                <li>
                    <span>快</span>
                    <span>
                        <i>轻松畅选</i>
                        <i>租赁快捷</i>
                    </span>
                </li>
                <li>
                    <span>好</span>
                    <span>
                        <i>售后无忧</i>
                        <i>精致服务</i>
                    </span>
                </li>
            </ul>

            <ul class="mobile-info">
                <li>商城热线</li>
                <li>供应商入驻、开店、续费资讯：010-2345-1234</li>
                <li>供应商咨询：010-2345-1234</li>
                <li>采购商咨询：010-2345-1234</li>
                <li>互联网公司投诉意见：010-2345-1234</li>
                <li>工作时间：周一至周五 8:30-12：00 &nbsp;&nbsp;&nbsp;&nbsp; 14：00-17：30</li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss">
.footer-container {
    margin-top: 40px;
    height: 650px;
    border-top: 1px solid #979797;
    background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;
    background-size: cover;

    .icon-info {
        height: 100px;
        margin-top: 30px;
        display: flex;
        justify-content: space-around;

        li {
            height: 100px;
            display: flex;
            align-items: center;

            span:first-child {
                display: block;
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                border-radius: 50%;
                border: 3px solid #2283FF;
                color: #2283FF;
                font-weight: bold;
                font-size: 22px;
            }

            span:last-child {
                display: block;
                height: 50px;
                margin-left: 15px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;

                i {
                    color: #8C8C8C;

                }

                i:first-child {
                    font-weight: bold;
                    font-size: 18px;
                    color: #333;
                }
            }
        }
    }

    .mobile-info {
        margin-top: 30px;
        text-align: center;

        li {
            padding: 20px 0;
        }

        li:first-child {
            padding: 30px 0;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 1px;
        }

        li:last-child {
            font-weight: bold;
        }
    }

}
</style>