.pkBox { height: 100vh; display: flex; flex-direction: column; } .pkBox .pkRecord { flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-top: 20rpx; } .pkBox .pkRecord .title { position: relative; padding: 0px 60rpx; font-size: 32rpx; } .pkBox .pkRecord .title::before { position: absolute; left: 30rpx; top: 4rpx; width: 10rpx; height: 90%; background-color: #4CC4FF; content: ''; border-radius: 50rpx; } .pkBox .pkRecord .scrollBox { height: 100%; margin-top: 20rpx; padding: 0rpx 26rpx 60rpx; box-sizing: border-box; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; background-color: white; } .pkBox .pkRecord .scrollBox .record { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 0rpx; border-bottom: 2rpx solid #DDDDDD; } .pkBox .pkRecord .scrollBox .record .record-left { display: flex; align-items: center; justify-content: space-between; } .pkBox .pkRecord .scrollBox .record .record-left .rl-avatar .avatar { width: 64rpx; height: 64rpx; border-radius: 50%; background-color: #e4e1e1; } .pkBox .pkRecord .scrollBox .record .record-left .rl-info { margin-left: 20rpx; } .pkBox .pkRecord .scrollBox .record .record-left .rl-info .nickName { font-size: 30rpx; } .pkBox .pkRecord .scrollBox .record .record-left .rl-info .time { margin-top: 6rpx; font-size: 20rpx; } .pkBox .pkRecord .scrollBox .record .record-right { display: flex; align-items: center; justify-content: space-between; } .pkBox .pkRecord .scrollBox .record .record-right .score { font-size: 34rpx; color: #30C866; } .pkBox .pkRecord .scrollBox .record .record-right .play { margin: 0rpx 10rpx 0rpx 26rpx; width: 40rpx; height: 36rpx; }