index.wxss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. .followBox {
  2. padding: 0rpx 20rpx 20rpx;
  3. }
  4. .followBox .screening {
  5. position: fixed;
  6. top: 0px;
  7. left: 0px;
  8. width: 100%;
  9. padding: 0rpx 28rpx 20rpx;
  10. display: flex;
  11. z-index: 9;
  12. align-items: center;
  13. justify-content: space-between;
  14. box-sizing: border-box;
  15. background-color: #F2F6FC;
  16. padding-left: 20rpx;
  17. }
  18. .followBox .screening .type {
  19. padding: 4rpx 0rpx;
  20. color: #666;
  21. font-size: 26rpx;
  22. }
  23. .followBox .screening .currentType {
  24. color: #333;
  25. font-weight: bold;
  26. border-bottom: 6rpx solid #00C657;
  27. }
  28. .followBox .screening .searchFriend {
  29. font-size: 26rpx;
  30. display: flex;
  31. align-items: center;
  32. padding: 10rpx 30rpx;
  33. border-radius: 25rpx;
  34. color: #666666;
  35. background-color: white;
  36. }
  37. .followBox .screening .searchFriend image {
  38. width: 22rpx;
  39. height: 22rpx;
  40. margin-right: 10rpx;
  41. }
  42. .followBox .box {
  43. padding-bottom: 20rpx;
  44. margin-top: 88rpx;
  45. }
  46. .followBox .box .follow {
  47. margin-top: 30rpx;
  48. box-sizing: border-box;
  49. width: 100%;
  50. background-color: white;
  51. border-radius: 20rpx;
  52. padding: 20rpx 34rpx 16rpx;
  53. display: flex;
  54. align-items: center;
  55. box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
  56. }
  57. .followBox .box .follow .left {
  58. display: flex;
  59. flex-direction: column;
  60. align-items: center;
  61. }
  62. .followBox .box .follow .left .avatar {
  63. width: 106rpx;
  64. height: 106rpx;
  65. border-radius: 50%;
  66. }
  67. .followBox .box .follow .left .profession {
  68. display: inline-block;
  69. margin-top: 4rpx;
  70. padding: 4rpx 20rpx;
  71. font-size: 24rpx;
  72. color: white;
  73. background-color: #10CA61;
  74. border-radius: 20rpx;
  75. }
  76. .followBox .box .follow .right {
  77. margin-left: 46rpx;
  78. flex: 1;
  79. }
  80. .followBox .box .follow .right .infoBox {
  81. border-bottom: 1rpx solid #00000020;
  82. }
  83. .followBox .box .follow .right .infoBox .top {
  84. display: flex;
  85. align-items: center;
  86. justify-content: space-between;
  87. }
  88. .followBox .box .follow .right .infoBox .top .nickName {
  89. font-size: 32rpx;
  90. }
  91. .followBox .box .follow .right .infoBox .top .state {
  92. text-align: center;
  93. }
  94. .followBox .box .follow .right .infoBox .top .state .stateText {
  95. width: 160rpx;
  96. padding: 12rpx 0rpx;
  97. border-radius: 50rpx;
  98. font-size: 24rpx;
  99. }
  100. .followBox .box .follow .right .infoBox .top .state .already {
  101. background-color: #E4EDFB;
  102. }
  103. .followBox .box .follow .right .infoBox .top .state .yet {
  104. background-color: #1BC665;
  105. color: white;
  106. }
  107. .followBox .box .follow .right .infoBox .number {
  108. padding-bottom: 14rpx;
  109. font-size: 24rpx;
  110. color: #00000060;
  111. }
  112. .followBox .box .follow .right .statistics {
  113. display: flex;
  114. justify-content: space-between;
  115. align-items: center;
  116. padding-top: 12rpx;
  117. font-size: 28rpx;
  118. color: #00000060;
  119. }
  120. .followBox .box .follow .right .statistics text {
  121. margin-left: 6rpx;
  122. }
  123. .empty {
  124. margin-top: 200rpx;
  125. }