<view class="order">
<view class="order-nav">
<scroll-view scroll-x='true' class="order-scroll">
<view class="order-nav__wrap">
<view class="order-nav__item">全部</view>
<view class="order-nav__item">待付款</view>
<view class="order-nav__item">待发货</view>
<view class="order-nav__item">待收货</view>
<view class="order-nav__item">待评价</view>
</view>
</scroll-view>
</view>
<view class="order-content"></view>
</view>
/* pages/order/order.wxss */
.order {
width: 750rpx;
}
.order-nav {
width: 100%;
}
.order-scroll {
width: 100%;
height: 88rpx;
white-space: nowrap;
border-top: 1rpx solid #f1f1f1;
border-bottom: 1rpx solid #f1f1f1;
}
.order-nav__wrap {
width: 100%;
height: 88rpx;
line-height: 88rpx;
}
.order-nav__item {
float: left;
margin: 0 30rpx;
font-size: 30rpx;
font-family: PingFangSC;
font-weight: 400;
color: rgba(34, 34, 34, 1);
border-bottom: 4rpx solid #F45D49;
box-sizing: border-box;
height: 88rpx;
}