.personalBox { padding: 12rpx 20rpx; .userBox { display: flex; align-items: center; justify-content: space-between; background-color: white; padding: 20rpx 12rpx 0rpx; border-radius: 20rpx; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; .identity { display: flex; flex-direction: column; align-items: center; text-align: center; .avatar { width: 106rpx; height: 106rpx; border-radius: 50%; position: relative; } .identityText { width: 80rpx; margin-top: 6rpx; font-size: 24rpx; color: white; background-color: #10CA61; border-radius: 25rpx; } } .userRight { flex: 1; margin-left: 30rpx; padding: 0px 10rpx; .uRtop { display: flex; justify-content: space-between; align-items: center; .uRtopleft { .nickName { max-width: 340rpx; color: #333; font-size: 32rpx; } .gradeText { margin: 18rpx 0rpx 12rpx; font-size: 24rpx; color: #989A9C; } } .follow { display: flex; align-items: center; justify-content: center; width: 140rpx; height: 52rpx; font-size: 24rpx; border-radius: 50rpx; border: 1rpx solid #1BC665; color: #1BC665; .character { width: 22rpx; height: 22rpx; margin-right: 6rpx; } } .isFans { border: 1rpx solid #969696; color: #969696; } } .uRBtm { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 18rpx 0rpx; .count { width: 33%; font-size: 28rpx; color: rgba(0, 0, 0, 0.6); text-align: center; .countNum { margin-left: 10rpx; } } .countFirst { text-align: left; } .countEnd { text-align: right; border: none; } } } } }