订单状态

用法

示例：

HTML：

<!-- 订单状态 -->
<div class="baie-orderstatus baie-orderstatus-waitpay">
    <h5 class="baie-orderstatus__hd">确认发货</h5>
    <p class="baie-orderstatus__bd">
        <span class="count">共<em id="J_counts">2</em>件商品</span>
    </p>
</div>

CSS：

/* 订单状态 START */
.baie-orderstatus{
    position: relative;
    padding: .6rem;
    height: 2rem;
    color: #fff;
    overflow: hidden;
    background-color: #5d6b85;
}
.baie-orderstatus:after{
    content: '';
    position: absolute;
    right: .4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.baie-orderstatus-waitpay:after{
    top: .2rem;
    width: 2.1rem;
    height: 1.6rem;
    background-image: url("/node/assets/images/common/order_status_waitpay.png");
}
.baie-orderstatus-waitship:after{
    top: .23rem;
    width: 2.13rem;
    height: 1.54rem;
    background-image: url("/node/assets/images/common/order_status_waitship.png");
}
.baie-orderstatus-waitreceive:after{
    top: .56rem;
    width: 2.17rem;
    height: .88rem;
    background-image: url("/node/assets/images/common/order_status_waitreceive.png");
}
.baie-orderstatus-waitreplenish:after{
    top: .19rem;
    width: 1.72rem;
    height: 1.63rem;
    background-image: url("/node/assets/images/common/order_status_waitreplenish.png");
}
.baie-orderstatus-cancel:after{
    top: .28rem;
    width: 1.79rem;
    height: 1.45rem;
    background-image: url("/node/assets/images/common/order_status_cancel.png");
}
.baie-orderstatus-settle:after{
    top: .25rem;
    width: 2.07rem;
    height: 1.51rem;
    background-image: url("/node/assets/images/common/order_status_settle.png");
}

.baie-orderstatus__hd{
    margin-bottom: .1rem;
    font-size: .32rem;
}
.baie-orderstatus__bd .summary{
    margin-left: .16rem;
}
/* 订单状态 END */