.followBox { padding: 0rpx 20rpx 20rpx; .screening { display: flex; align-items: center; // justify-content: space-between; justify-content: space-around; box-sizing: border-box; padding-left: 20rpx; .type { padding: 4rpx 0rpx; color: #666; font-size: 26rpx; } .currentType { color: #333; font-size: 32rpx; font-weight: bold; border-bottom: 6rpx solid #00C657; } .searchFriend { font-size: 26rpx; display: flex; align-items: center; padding: 10rpx 26rpx; border-radius: 25rpx; color: #666666; background-color: white; image { width: 22rpx; height: 22rpx; margin-right: 10rpx; } } } .follow { margin-top: 20rpx; box-sizing: border-box; width: 100%; background-color: white; border-radius: 10rpx; margin-bottom: 20rpx; padding: 20rpx; display: flex; align-items: center; justify-content: space-between; .userInfo { flex: 1; display: flex; .avatar { position: relative; .avatar-image { width: 96rpx; height: 96rpx; background-color: wheat; border-radius: 50%; border: 4rpx solid #61CA54; } .user-profession { position: absolute; bottom: -4rpx; left: 17rpx; width: 68rpx; height: 24rpx; background: rgba(97, 202, 84, 1); border-radius: 50rpx; border: 2rpx solid rgba(255, 255, 255, 1); font-size: 16rpx; color: rgba(255, 255, 255, 1); line-height: 24rpx; text-align: center; } } .infoBox { display: flex; flex-direction: column; justify-content: space-around; margin-left: 14rpx; margin-top: 2rpx; .gmtCreated { font-size: 26rpx; color: #888; } } } .state { text-align: center; .stateText { width: 160rpx; padding: 16rpx 0rpx; border-radius: 50rpx; font-size: 24rpx; } .already { background-color: #E4EDFB; } .yet { background-color: #1BC665; color: white; } } } .empty { margin-top: 200rpx; } }