.container { padding: 0 20rpx; .statistics { width: 100%; padding: 40rpx; display: flex; align-items: center; box-sizing: border-box; background: #FFFFFF; border-radius: 20rpx; .col { flex: 1; .row { margin-bottom: 60rpx; .label { margin-bottom: 20rpx; font-size: 30rpx; color: #666666; } .money { font-size: 32rpx; font-weight: 500; color: #000000; } } .row:last-child { margin: 0; } } .col2 { padding-left: 80rpx; } } .detailsBox { margin-top: 40rpx; .title { font-size: 25rpx; color: #7B7B7B; } .categoryBox { margin-top: 24rpx; margin-bottom: 38rpx; 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: #FEAC57; font-weight: bold; } } .detailsList { padding-bottom: 60rpx; .group { margin-bottom: 20rpx; border-radius: 20rpx; overflow: hidden; background: #FFFFFF; .header { display: flex; align-items: center; justify-content: space-between; padding: 12rpx 24rpx; font-size: 26rpx; background-color: #FFFAEA; } .body { padding: 0 35rpx; .row { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 0; color: #7B7B7B; font-size: 26rpx; text-align: center; border-bottom: 1rpx solid #eee; .col { display: flex; flex-direction: column; .num { margin-bottom: 8rpx; } .add{ color: #BA5858; } .reduce{ color: #38B358; } } } .row:last-child { border: none } } } } } }