.searchFriend .searchBox { position: fixed; top: 0px; left: 0px; width: 100%; padding: 0rpx 28rpx 18rpx; box-sizing: border-box; z-index: 9; overflow: hidden; background-color: #F2F6FC; } .searchFriend .searchBox .input { background-color: white; border-radius: 50rpx; padding: 12rpx 30rpx; padding-right: 140rpx; } .searchFriend .searchBox .searchBtn { position: absolute; right: 50rpx; top: 6rpx; padding: 6rpx 40rpx; background: #00C657; border-radius: 40rpx; } .searchFriend .searchBox .searchBtn .img { width: 24rpx; height: 24rpx; } .searchFriend .historyList { padding: 80rpx 30rpx 0rpx; } .searchFriend .historyList .notes { display: flex; align-items: center; justify-content: space-between; padding: 30rpx 0rpx 14rpx; border-bottom: 1rpx solid #DDDDDD; } .searchFriend .historyList .notes .left { display: flex; align-items: center; font-size: 28rpx; } .searchFriend .historyList .notes .left .clock { width: 34rpx; height: 34rpx; margin-right: 16rpx; } .searchFriend .historyList .notes .delete { color: #A4A4A5; font-size: 50rpx; line-height: 40rpx; padding: 0rpx 20rpx; } .searchFriend .historyList .clearHistory { padding: 20rpx 0rpx; text-align: center; font-size: 28rpx; } .searchFriend .box { padding-bottom: 20rpx; margin-top: 100rpx; } .searchFriend .box .follow { margin-top: 30rpx; box-sizing: border-box; width: 100%; background-color: white; border-radius: 20rpx; padding: 20rpx 34rpx 16rpx; display: flex; align-items: center; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px; } .searchFriend .box .follow .left { display: flex; flex-direction: column; align-items: center; } .searchFriend .box .follow .left .avatar { width: 106rpx; height: 106rpx; border-radius: 50%; } .searchFriend .box .follow .left .profession { display: inline-block; margin-top: 4rpx; padding: 4rpx 20rpx; font-size: 24rpx; color: white; background-color: #10CA61; border-radius: 20rpx; } .searchFriend .box .follow .right { margin-left: 46rpx; flex: 1; } .searchFriend .box .follow .right .infoBox { border-bottom: 1rpx solid #00000020; } .searchFriend .box .follow .right .infoBox .top { display: flex; align-items: center; justify-content: space-between; } .searchFriend .box .follow .right .infoBox .top .nickName { font-size: 32rpx; } .searchFriend .box .follow .right .infoBox .top .state { text-align: center; } .searchFriend .box .follow .right .infoBox .top .state .stateText { width: 160rpx; padding: 12rpx 0rpx; border-radius: 50rpx; font-size: 24rpx; } .searchFriend .box .follow .right .infoBox .top .state .already { background-color: #E4EDFB; } .searchFriend .box .follow .right .infoBox .top .state .yet { background-color: #1BC665; color: white; } .searchFriend .box .follow .right .infoBox .number { padding-bottom: 14rpx; font-size: 24rpx; color: #00000060; } .searchFriend .box .follow .right .statistics { display: flex; justify-content: space-between; align-items: center; padding-top: 12rpx; font-size: 28rpx; color: #00000060; } .searchFriend .box .follow .right .statistics text { margin-left: 6rpx; } .searchFriend .empty { margin-top: 200rpx; }