简单的订单详情页面样式

有时候我们网站的后台会需要展示某些数据的详情,但又不想整的过于复杂,今天推荐一个简单的订单详情样式
style代码:

.aui-flex-box h1 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.aui-flex-box h2 {
    color: #ef8015;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.aui-flex-box h3 {
    color: #333;
    font-size: 1rem;
    margin-bottom: 0.2rem;
    font-weight: 500;
}

.aui-flex-box p {
    color: #8c8c8c;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
    font-weight: normal;
}

.aui-flex-box span em {
    background: #f3f4f8;
    border-radius: 3px;
    font-size: 0.75rem;
    font-style: normal;
    color: #666666;
    padding: 0.2rem 0.3rem;
}
.aui-six-item {
overflow: hidden;
}

.aui-six-item span {
    width: 50%;
    display: block;
    float: left;
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 0.85rem;
}

.aui-six-item span em {
    background: none;
    color: #999999;
    font-size: 0.85rem;
    padding-right: 2rem;
}

body代码:

<div class="aui-flex">
<div class="aui-flex-box">
    <div class="aui-six-item">
        <span><em>订&nbsp;单&nbsp;号&nbsp;:</em>{{$info['order_number']}}</span>
        <span><em>商&nbsp;品&nbsp;名&nbsp;:</em>{{$info['goods_name']}}</span>
        <span><em>规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</em>{{$info['details']}}</span>
        <span><em>规格数量:</em>{{$info['mark_num']}} </span>
        <span><em>购买数量:</em>{{$info['number']}}</span>
        <span><em>商品单价:</em>{{$info['price']}}</span>
        <span><em>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</em>{{$info['name']}}</span>
        <span><em>手&nbsp;机&nbsp;号&nbsp;&nbsp;:</em>{{$info['phone']}}</span>
        <span><em>收货地址:</em>{{$info['address']}}</span>
        <span><em>订单总金额:</em>{{$info['total_money']}}</span>
        <span><em>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述:</em>{{$info['des']}}</span>
    </div>
</div>

</div>