4、底部购物车

1、html

    <div class="container">
        <!-- 页脚部分 -->
        <div class="footer">
             <div class="cart-left">
                 <!-- 车-->
                 <div class="cart-car">
                    <div class="cart-icon">
                        <i class="fa fa-shopping-cart"></i>
                        <div class="txt">
                            4
                        </div>
                    </div>
                 </div>
                 <!-- 文字-->
                 <div class="cart-info">
                     <p class="money1">￥12.88</p>
                    <p class="money2">另需配送费3元</p>
                 </div>
             </div>
             <div class="cart-right">
                <a href="#">去结算</a>
             </div>
        </div>
    </div>

css

<style type="text/css">
    .container{
        width:100vw;
        height: 100vh;
    }
        
    .footer{
        width:100vw;
        height: 14vw;
        background-color: #008CFF;
        position: fixed;
        bottom:0;
        right:0;
        display: flex;
        flex-direction: row;
    }
    .footer .cart-left{
        flex:2;
        background-color: #505051;
        /* step1 */
        display:flex;
    }
    .footer .cart-right{
        flex:1;
        background-color: #38CA73;
    }
    .footer .cart-car{
        box-sizing: border-box;
        width:16vw;
        height:16vw;
        border:1.5vw solid #444;
        background-color: #3190E8;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 50%;
        margin-top:-4vw;
        margin-left:3vw;
    }
    .cart-icon{
        font-size: 7vw;
        color:white;
    }
    .cart-icon .txt{
        width:5vw;
        height:5vw;
        background-color: red;
        position: absolute;
        right:-1.5vw;
        top:-1.5vw;
        font-size:4vw;
        text-align:center;
        border-radius: 50%;
    }
    /* step2 */ 
    .cart-info .money1{
        font-size: 4.5vw;
        font-weight: 800;
        color:white;
    }
    .cart-info .money2{
        font-size: 3vw;
        color:gray;
    }
    /* step3 */
        
    .cart-right{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cart-right a{
        color:white;
        font-size: 4.5vw;
        font-weight: 800;
    }
</style>