my.wxss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. .mine-container{
  2. width: 750rpx;
  3. height: 1136rpx;
  4. position: relative;
  5. background: #F0F1F5;
  6. display: flex;
  7. flex-direction: column;
  8. align-items: center;
  9. justify-content: space-between;
  10. box-sizing: border-box;
  11. }
  12. page{
  13. background: #F0F1F5;
  14. }
  15. .follow-details{
  16. width: 750rpx;
  17. box-sizing: border-box;
  18. padding: 0 15rpx;
  19. }
  20. .follow-info{
  21. margin-top: 20rpx;
  22. width: 100%;
  23. height: 382rpx;
  24. border-radius: 20rpx;
  25. background: #FFFFFF;
  26. display: flex;
  27. }
  28. .set-msg{
  29. width: 100%;
  30. height: 248rpx;
  31. display: flex;
  32. align-items: flex-start;
  33. justify-content: center;
  34. }
  35. .avatar-bg{
  36. margin-left: 20rpx;
  37. margin-top: 50rpx;
  38. width: 152rpx;
  39. height: 152rpx;
  40. background: #61CA54;
  41. border-radius: 50%;
  42. position: relative;
  43. }
  44. .avatar-box{
  45. width: 138rpx;
  46. height: 138rpx;
  47. border-radius: 50%;
  48. z-index: 300;
  49. position: absolute;
  50. top: 7rpx;
  51. left: 7rpx;
  52. }
  53. .avatar-image{
  54. width: 100%;
  55. height: 100%;
  56. border-radius: 50%;
  57. }
  58. .avatar-nickname{
  59. width: 500rpx;
  60. display: flex;
  61. }
  62. .avatar-address{
  63. width: 500rpx;
  64. }
  65. .flowers-box{
  66. width: 26rpx;
  67. height: 26rpx;
  68. margin-left: 10rpx;
  69. }
  70. .flowers-box>image{
  71. width: 100%;
  72. height: 100%;
  73. }
  74. .occupation-title{
  75. position: absolute;
  76. left: 100rpx;
  77. top: 46rpx;
  78. width: 68rpx;
  79. background: #61CA54;
  80. border-radius: 180rpx;
  81. z-index: 600;
  82. line-height: 26rpx;
  83. text-align: center;
  84. color: #FFFFFF;
  85. font-size: 18rpx;
  86. }
  87. .avatar-msg{
  88. margin-left: 40rpx;
  89. margin-top: 50rpx;
  90. width: 500rpx;
  91. height: 150rpx;
  92. color: #444444;
  93. font-size: 32rpx;
  94. }
  95. .avatar-nickname,.avatar-birthday,.avatar-address{
  96. line-height: 50rpx;
  97. }
  98. .gender-size{
  99. margin-left: 10rpx;
  100. font-size: 28rpx;
  101. align-self: center;
  102. }
  103. .mine-category{
  104. box-sizing: border-box;
  105. width: 674rpx;
  106. padding-top: 40rpx;
  107. padding-bottom: 32rpx;
  108. border-top: 4rpx solid #F0F1F5;
  109. font-size: 28rpx;
  110. font-weight: 600;
  111. z-index: 900;
  112. display: flex;
  113. position: absolute;
  114. top: 268rpx;
  115. left: 38rpx;
  116. }
  117. .border-right{
  118. display: flex;
  119. justify-content: center;
  120. align-items: center;
  121. font-size: 24rpx;
  122. font-weight: lighter;
  123. height: 22rpx;
  124. border-right: 2rpx solid #D6D6D6;
  125. }
  126. .flower-count .border-right{
  127. border: none;
  128. }
  129. .play-count,.point-count,.follow-count,.flower-count{
  130. width: 25%;
  131. text-align: center;
  132. }
  133. .play-img{
  134. width: 28rpx;
  135. height: 26rpx;
  136. margin-right: 6rpx;
  137. margin-bottom: 6rpx;
  138. }
  139. .red-heart{
  140. width: 26rpx;
  141. height: 22rpx;
  142. margin-right: 6rpx;
  143. margin-bottom: 6rpx;
  144. }
  145. .point-img{
  146. width: 28rpx;
  147. height: 24rpx;
  148. margin-right: 6rpx;
  149. margin-bottom: 6rpx;
  150. }
  151. image{
  152. width: 100%;
  153. height: 100%;
  154. }
  155. .play-count{
  156. color: #92D626;
  157. }
  158. .point-count{
  159. color: #FFA700;
  160. }
  161. .follow-count{
  162. color: #FF0000;
  163. }
  164. .flower-count{
  165. color: #EE5750;
  166. }
  167. .mine-edit{
  168. position: absolute;
  169. top: 72rpx;
  170. right: 36rpx;
  171. width: 138rpx;
  172. height: 52rpx;
  173. border-radius: 26rpx;
  174. background: #FF9209;
  175. box-sizing: border-box;
  176. padding-top: 3rpx;
  177. display: flex;
  178. }
  179. .edit-image{
  180. width: 24rpx;
  181. height: 34rpx;
  182. margin-left: 24rpx;
  183. margin-right: 10rpx;
  184. }
  185. .edit-img{
  186. width: 24rpx;
  187. height: 34rpx;
  188. }
  189. .edit-text{
  190. width: 150rpx;
  191. height: 32rpx;
  192. color: #FFFFFF;
  193. font-size: 32rpx;
  194. }
  195. .wallet-module{
  196. margin-top: 30rpx;
  197. width:716rpx;
  198. height: 88rpx;
  199. font-size: 34rpx;
  200. color: #5E5E5E;
  201. background: #FFFFFF;
  202. border-radius: 14rpx;
  203. }
  204. .wallet-center{
  205. width: 680rpx;
  206. height: 88rpx;
  207. margin: 0 auto;
  208. display: flex;
  209. justify-content: space-between;
  210. align-items: center;
  211. }
  212. .icon-box{
  213. width: 60rpx;
  214. height: 60rpx;
  215. margin-right: 16rpx;
  216. }
  217. .wallet-left{
  218. display: flex;
  219. align-items: center;
  220. }
  221. .wallet-right{
  222. margin-bottom: 20rpx;
  223. width: 16rpx;
  224. height: 28rpx;
  225. }
  226. .course-module,.group-module,.reading-module,.keep-module,.myfollow-module{
  227. margin-top: 20rpx;
  228. width:716rpx;
  229. height: 88rpx;
  230. font-size: 34rpx;
  231. color: #5E5E5E;
  232. background: #FFFFFF;
  233. border-radius: 14rpx;
  234. }