index.wxss 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  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. .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. .left {
  57. display: flex;
  58. flex-direction: column;
  59. align-items: center;
  60. .avatar {
  61. width: 106rpx;
  62. height: 106rpx;
  63. border-radius: 50%;
  64. }
  65. .profession {
  66. display: inline-block;
  67. margin-top: 4rpx;
  68. padding: 4rpx 20rpx;
  69. font-size: 24rpx;
  70. color: white;
  71. background-color: #10CA61;
  72. border-radius: 20rpx;
  73. }
  74. }
  75. .right {
  76. margin-left: 46rpx;
  77. flex: 1;
  78. .infoBox {
  79. border-bottom: 1rpx solid #00000020;
  80. .top {
  81. display: flex;
  82. align-items: center;
  83. justify-content: space-between;
  84. .nickName {
  85. font-size: 32rpx;
  86. }
  87. .state {
  88. text-align: center;
  89. .stateText {
  90. width: 160rpx;
  91. padding: 12rpx 0rpx;
  92. border-radius: 50rpx;
  93. font-size: 24rpx;
  94. }
  95. .already {
  96. background-color: #E4EDFB;
  97. }
  98. .yet {
  99. background-color: #1BC665;
  100. color: white;
  101. }
  102. }
  103. }
  104. .number {
  105. padding-bottom: 14rpx;
  106. font-size: 24rpx;
  107. color: #00000060;
  108. }
  109. }
  110. .statistics {
  111. display: flex;
  112. justify-content: space-between;
  113. align-items: center;
  114. padding-top: 12rpx;
  115. font-size: 28rpx;
  116. color: #00000060;
  117. text {
  118. margin-left: 6rpx;
  119. }
  120. }
  121. }
  122. } */
  123. }
  124. .followBox .box .userBox {
  125. display: flex;
  126. align-items: flex-start;
  127. justify-content: space-between;
  128. padding: 16rpx 24rpx 24rpx;
  129. border-radius: 20rpx;
  130. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  131. background-color: white;
  132. }
  133. .followBox .box .userBox .identity {
  134. position: relative;
  135. text-align: center;
  136. }
  137. .followBox .box .userBox .identity .avatar {
  138. width: 106rpx;
  139. height: 106rpx;
  140. border-radius: 50%;
  141. position: relative;
  142. background-color: #e4e1e1;
  143. }
  144. .followBox .box .userBox .identity .identityText {
  145. position: absolute;
  146. top: 86rpx;
  147. left: 0rpx;
  148. right: 0rpx;
  149. margin: auto;
  150. width: 80rpx;
  151. margin-top: 6rpx;
  152. font-size: 24rpx;
  153. color: white;
  154. background-color: #10CA61;
  155. border-radius: 25rpx;
  156. }
  157. .followBox .box .userBox .userRight {
  158. flex: 1;
  159. margin-left: 30rpx;
  160. }
  161. .followBox .box .userBox .userRight .topBox .row {
  162. display: flex;
  163. align-items: center;
  164. justify-content: space-between;
  165. }
  166. .followBox .box .userBox .userRight .topBox .row .nickName {
  167. width: 200rpx;
  168. color: #333;
  169. font-size: 32rpx;
  170. }
  171. .followBox .box .userBox .userRight .topBox .row .gradeText {
  172. margin: 18rpx 0rpx 12rpx;
  173. font-size: 24rpx;
  174. color: rgba(0, 0, 0, 0.6);
  175. }
  176. .followBox .box .userBox .userRight .topBox .row .gradeText .copy {
  177. width: 22rpx;
  178. height: 22rpx;
  179. }
  180. .followBox .box .userBox .userRight .topBox .row .count {
  181. margin-top: 10rpx;
  182. flex: 1;
  183. font-size: 24rpx;
  184. color: rgba(0, 0, 0, 0.6);
  185. text-align: left;
  186. }
  187. .followBox .box .userBox .userRight .topBox .row .count .countNum {
  188. margin-left: 10rpx;
  189. }
  190. .followBox .box .userBox .userRight .topBox .row .countEnd {
  191. text-align: right;
  192. border: none;
  193. }
  194. .followBox .box .userBox .userRight .btmBox {
  195. display: flex;
  196. align-items: center;
  197. justify-content: space-between;
  198. margin-top: 30rpx;
  199. }
  200. .followBox .box .userBox .userRight .btmBox .state {
  201. text-align: center;
  202. }
  203. .followBox .box .userBox .userRight .btmBox .state .character {
  204. width: 24rpx;
  205. height: 24rpx;
  206. margin-right: 6rpx;
  207. }
  208. .followBox .box .userBox .userRight .btmBox .state .stateText {
  209. width: 200rpx;
  210. display: flex;
  211. justify-content: center;
  212. align-items: center;
  213. padding: 12rpx 0rpx;
  214. border-radius: 50rpx;
  215. font-size: 24rpx;
  216. }
  217. .followBox .box .userBox .userRight .btmBox .state .already {
  218. background-color: #E4EDFB;
  219. }
  220. .followBox .box .userBox .userRight .btmBox .state .yet {
  221. background-color: #1BC665;
  222. color: white;
  223. }
  224. .followBox .box .userBox .userRight .btmBox .follow {
  225. display: flex;
  226. align-items: center;
  227. justify-content: center;
  228. width: 200rpx;
  229. height: 52rpx;
  230. font-size: 24rpx;
  231. border-radius: 50rpx;
  232. background-color: #10CA61;
  233. color: white;
  234. }
  235. .followBox .box .userBox .userRight .btmBox .follow .character {
  236. width: 24rpx;
  237. height: 24rpx;
  238. margin-right: 6rpx;
  239. }
  240. .followBox .box .userBox .userRight .btmBox .isFans {
  241. background-color: #E2ECFB;
  242. color: #333;
  243. }
  244. .empty {
  245. margin-top: 200rpx;
  246. }