.container { padding: 0 20rpx; } .container .categoryBox { margin-top: 24rpx; margin-bottom: 38rpx; display: flex; align-items: center; justify-content: space-between; } .container .categoryBox .category { width: 126rpx; padding: 8rpx 0; font-size: 30rpx; text-align: center; color: #7A7A7A; background: #FFFFFF; border-radius: 29rpx; } .container .categoryBox .currentClass { color: #FE9221; font-weight: bold; } .container .orderList .order { width: 100%; padding: 18rpx 26rpx; box-sizing: border-box; margin-bottom: 20rpx; background: #FFFFFF; border-radius: 20rpx; } .container .orderList .order .above { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 18rpx; border-bottom: 1rpx solid #eee; } .container .orderList .order .above .userInfo { display: flex; align-items: center; } .container .orderList .order .above .userInfo .avatar { margin-right: 18rpx; width: 64rpx; height: 64rpx; background: #D8D8D8; border-radius: 50%; } .container .orderList .order .above .userInfo .nickName { margin-bottom: 6rpx; font-size: 30rpx; } .container .orderList .order .above .userInfo .addTime { font-size: 26rpx; color: #7B7B7B; } .container .orderList .order .above .state { font-size: 26rpx; color: #FE9221; } .container .orderList .order .below { color: #7B7B7B; } .container .orderList .order .below .row { padding: 20rpx 0; display: flex; align-items: center; justify-content: space-between; font-size: 26rpx; } .container .orderList .order .below .row .money { color: black; font-weight: bold; }