简单的订单详情页面样式 有时候我们网站的后台会需要展示某些数据的详情,但又不想整的过于复杂,今天推荐一个简单的订单详情样式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>