ClassContent/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/22.css

body {
    background: #f2f2f2;
}

.header {
    width: 100%;
    height: 0.88rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 999;
    box-sizing: border-box;
    top: 0
}



.header img {
    width: 0.2rem;
    height: 0.33rem;
    margin-left: 0.3rem;

}

.header div {
    font-family: PingFang-SC-Bold;
    font-size: 0.34rem;
    color: #333333;
    margin-left: 2.58rem;
}



.centent {
    margin-top: 0.88rem;
    margin-bottom: 1rem;
}

.address {
    display: flex;
    width: 100%;
    flex: 1;
    justify-content: space-between;
    background-image: url(../img/22/blue.png);
    background-repeat: no-repeat;
    background-size: contain;
}





.address .left {
    align-items: center;
    margin-left: 0.3rem;
}

.address .left .xinxi {
    margin-top: 0.21rem;

}

.address .left .xinxi .name {
    font-family: PingFang-SC-Bold;
    font-size: 0.3rem;
    color: #333333;
    margin-right: 0.56rem;
}

.address .left .xinxi .number {
    font-family: PingFang-SC-Medium;
    font-size: 0.3rem;
    color: #333333;
}


.address .left .dizhi {
    font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #333333;
    margin-top: 0.17rem;
}

.address img {
    width: 0.14rem;
    height: 0.26rem;
    margin-top: 0.37rem;
    margin-bottom: 0.63rem;
    margin-right: 0.3rem;
}




.centent .pay {
    width: 100%;
    height: 0.84rem;
    background-color: #ffffff;
    border-radius: 0.1rem;
    margin-top: 0.19rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.pay span {
    font-family: PingFang-SC-Medium;
    font-size: 0.28rem;
    color: #333333;
}

.pay .left {
    margin-left: 0.26rem;
}

.pay .right {
    display: flex;
    align-items: center
}

.pay .right img {
    margin-left: 0.07rem;
    width: 0.31rem;
    height: 0.1rem;
    margin-right: 0.44rem;
}


.store {}

.store li {
    background: #ffffff;
}

.store li .shang {
    margin-left: 0.24rem;
}

.store li .xia {
    margin-left: 0.3rem;
}

/* 店铺名 */
.store li .name {
    border-radius: 0.1rem 0.1rem 0rem 0rem;
    padding-top: 0.2rem;
    padding-bottom: 0.17rem;
}

.store li .name .home {
    width: 0.24rem;
    height: 0.22rem;
    margin-right: 0.06rem;
}

.store li .name span {
    font-size: 0.26rem;
    color: #333333;
    margin-right: 0.16rem;

}

.store li .name .more {
    width: 0.1rem;
    height: 0.19rem;
}


/* 商品信息 */
.goods {
    padding-top: 0.29rem;
}

.goods li {
    display: flex;
    margin-bottom: 0.31rem;
}

.goods li img {
    width: 2rem;
    height: 1.65rem;
    margin-right: 0.36rem;
}

.goods .right {}

.goods .right .top {
    font-family: PingFang-SC-Medium;
    font-size: 0.28rem;
    color: #333333;
    margin-right: 1.72rem;
}

.goods .right .middle .color {
    margin-right: 0.36rem;
}


.goods .right .bottom {
    margin-right: 0.76rem;
}

.goods .right .bottom .price {
    margin-right: 2.64rem;
    display: inline
}

.goods .right .bottom .price span {
    font-family: PingFang-SC-Bold;
    font-size: 0.34rem;
    color: #ea4e3d;
}

.goods .right .bottom .price span:first-child {
    font-family: PingFang-SC-Bold;
    font-size: 0.2rem;
}

.goods .right .bottom .price span:last-child {
    font-family: PingFang-SC-Bold;
    font-size: 0.24rem;
}

.goods .right span {
    font-family: PingFang-SC-Medium;
    font-size: 0.2rem;
    color: #999999;
}

/* 订单备注 */
.remarks {
    width: 100%;
    padding-top: 0.3rem;
    padding-bottom: 0.29rem;
}

.remarks span {
    font-family: PingFang-SC-Medium;
    font-size: 0.3rem;
    color: #333333;
    margin-right: 0.31rem;

}

.remarks input {
    width: 4.15rem;
    height: 0.27rem;
    font-family: PingFang-SC-Medium;
    font-size: 0.26rem;
    color: #aaaaaa;
    border: 0;
}


.discount {
    padding-top: 0.22rem;
    padding-bottom: 0.04rem;
}

.discount li {
    display: flex;
    justify-content: space-between;
    flex: 1;
    margin-right: 0.28rem;
    margin-bottom: 0.12rem;
}

.discount li span {
    font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #333333;
}

.discount li .five {
    font-family: PingFang-SC-Medium;
    font-size: 0.24rem;
    color: #f09c48;
}


.xia .price {
    padding-top: 0.3rem;
    padding-bottom: 0.25rem;
}

.xia .price span {
    font-family: PingFang-SC-Medium;
    font-size: 0.3rem;
    color: #333333;
    margin-right: 4.3rem
}

.xia .price span:last-child {
    font-family: PingFang-SC-Bold;
    font-size: 0.34rem;
    color: #ea4e3d;
    margin-right: 0.26rem !important;

}

.footer {
    margin-top: 0.22rem;
    padding-top: 0.16rem;
    padding-bottom: 0.1rem;
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    z-index: 999;
    bottom: 0;
    width: 100%;
}

.footer span {
    font-family: PingFang-SC-Medium;
    font-size: 0.26rem;
    line-height: 0.2rem;
    color: #999999;
}

.footer span:nth-child(2) {
    margin-left: 0.14rem;
}

.footer span:nth-child(3) {
    font-family: PingFang-SC-Bold;
    font-size: 0.24rem;
    line-height: 0.2rem;
    color: #000000;
    margin-left: 0.27rem;
}

.footer span:nth-child(4) {
    font-family: PingFang-SC-Bold;
    font-size: 0.3rem;
    line-height: 0.2rem;
    color: #000000;
    margin-left: 0.06rem;
}

.footer div {
    width: 1.92rem;
    height: 0.66rem;
    background-color: #5697f4;
    border-radius: 0.33rem;
    margin-right: 0.24rem;
    margin-left: 0.42rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.footer div span {
    font-family: PingFang-SC-Bold;
    font-size: 0.28rem;
    line-height: 0.2rem;
    color: #ffffff;
}