index.wxss 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. page{
  2. height: 100%;
  3. width: 100%;
  4. background: #f4f4f4;
  5. }
  6. .container{
  7. background: #f4f4f4;
  8. height: auto;
  9. overflow: hidden;
  10. width: 100%;
  11. }
  12. .profile-info{
  13. width: 100%;
  14. height: 280rpx;
  15. display: flex;
  16. flex-wrap: wrap;
  17. align-items: center;
  18. justify-content: flex-start;
  19. padding: 0 30.25rpx;
  20. background: #333;
  21. }
  22. .profile-info .avatar{
  23. height: 148rpx;
  24. width: 148rpx;
  25. border-radius: 50%;
  26. }
  27. .profile-info .info{
  28. flex: 1;
  29. height: 85rpx;
  30. padding-left: 31.25rpx;
  31. }
  32. .profile-info .name{
  33. display: block;
  34. height: 45rpx;
  35. line-height: 45rpx;
  36. color: #fff;
  37. font-size: 37.5rpx;
  38. margin-bottom: 10rpx;
  39. }
  40. .profile-info .level{
  41. display: block;
  42. height: 30rpx;
  43. line-height: 30rpx;
  44. margin-bottom: 10rpx;
  45. color: #7f7f7f;
  46. font-size: 30rpx;
  47. }
  48. .user-menu{
  49. width: 100%;
  50. height: auto;
  51. overflow: hidden;
  52. background: #fff;
  53. }
  54. .user-menu .item{
  55. float: left;
  56. width: 33.33333%;
  57. height: 187.5rpx;
  58. border-right: 1px solid rgba(0,0,0,.15);
  59. border-bottom: 1px solid rgba(0,0,0,.15);
  60. text-align: center;
  61. }
  62. .user-menu .item .a{
  63. display: flex;
  64. width: 100%;
  65. height: 100%;
  66. flex-direction: column;
  67. align-items: center;
  68. justify-content: center;
  69. }
  70. .user-menu .item.no-border {
  71. border-right: 0;
  72. }
  73. .user-menu .item.item-bottom {
  74. border-bottom: none;
  75. }
  76. .user-menu .icon{
  77. margin: 0 auto;
  78. display: block;
  79. height: 52.803rpx;
  80. width: 52.803rpx;
  81. margin-bottom: 16rpx;
  82. }
  83. .user-menu .icon.order{
  84. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -437.5rpx no-repeat;
  85. background-size: 52.803rpx;
  86. }
  87. .user-menu .icon.coupon{
  88. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -62.4997rpx no-repeat;
  89. background-size: 52.803rpx;
  90. }
  91. .user-menu .icon.gift{
  92. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -187.5rpx no-repeat;
  93. background-size: 52.803rpx;
  94. }
  95. .user-menu .icon.address{
  96. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 0 no-repeat;
  97. background-size: 52.803rpx;
  98. }
  99. .user-menu .icon.security{
  100. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -500rpx no-repeat;
  101. background-size: 52.803rpx;
  102. }
  103. .user-menu .icon.kefu{
  104. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -312.5rpx no-repeat;
  105. background-size: 52.803rpx;
  106. }
  107. .user-menu .icon.help{
  108. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -250rpx no-repeat;
  109. background-size: 52.803rpx;
  110. }
  111. .user-menu .icon.feedback{
  112. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -125rpx no-repeat;
  113. background-size: 52.803rpx;
  114. }
  115. .user-menu .icon.coin{
  116. background: url(https://i.postimg.cc/7hwNXXzv/coin.png);
  117. background-size: 52.803rpx;
  118. }
  119. .user-menu .icon.publish{
  120. background: url(https://i.postimg.cc/ncd1Y4c5/demostration.png);
  121. background-size: 52.803rpx;
  122. }
  123. .user-menu .icon.download{
  124. background: url(https://i.postimg.cc/qBxwgVfp/download.png);
  125. background-size: 52.803rpx;
  126. }
  127. .user-menu .icon.upload{
  128. background: url(https://i.postimg.cc/J0x5FJ3s/outbox.png);
  129. background-size: 52.803rpx;
  130. }
  131. .user-menu .icon.star{
  132. background: url(https://i.postimg.cc/Sxt225vJ/star.png);
  133. background-size: 52.803rpx;
  134. }
  135. .user-menu .icon.map{
  136. background: url(https://i.postimg.cc/rpYmfptq/maps-and-flags.png);
  137. background-size: 52.803rpx;
  138. }
  139. .user-menu .icon.embarrass{
  140. background: url(https://i.postimg.cc/8PBzq4rK/embarrass.png);
  141. background-size: 52.803rpx;
  142. }
  143. .user-menu .icon.question{
  144. background: url(https://i.postimg.cc/SxSxq96y/question.png);
  145. background-size: 52.803rpx;
  146. }
  147. .user-menu .txt{
  148. display: block;
  149. height: 24rpx;
  150. width: 100%;
  151. font-size: 24rpx;
  152. color:#000;
  153. }
  154. /* #333 */
  155. .logout{
  156. margin-top: 50rpx;
  157. height: 101rpx;
  158. width: 100%;
  159. line-height: 101rpx;
  160. text-align: center;
  161. background: #fff;
  162. color: #000;
  163. font-size: 30rpx;
  164. }