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