index.wxss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  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. border: 4rpx solid #fff;
  27. }
  28. .profile-info .info {
  29. flex: 1;
  30. height: 85rpx;
  31. margin-left: 30rpx;
  32. display: flex;
  33. flex-direction: column;
  34. justify-content: center;
  35. }
  36. .profile-info .name {
  37. height: 45rpx;
  38. line-height: 45rpx;
  39. color: #fff;
  40. font-size: 37.5rpx;
  41. }
  42. .profile-info .level {
  43. height: 30rpx;
  44. line-height: 30rpx;
  45. margin-top: 10rpx;
  46. color: #7f7f7f;
  47. font-size: 30rpx;
  48. }
  49. .profile-info .btn {
  50. width: 50rpx;
  51. height: 50rpx;
  52. margin-left: 10rpx;
  53. border-radius: 50%;
  54. }
  55. .user-menu{
  56. width: 100%;
  57. height: auto;
  58. overflow: hidden;
  59. background: #fff;
  60. }
  61. .user-menu .item{
  62. float: left;
  63. width: 33.33333%;
  64. height: 187.5rpx;
  65. border-right: 1px solid rgba(0,0,0,.15);
  66. border-bottom: 1px solid rgba(0,0,0,.15);
  67. text-align: center;
  68. }
  69. .user-menu .item .a{
  70. display: flex;
  71. width: 100%;
  72. height: 100%;
  73. flex-direction: column;
  74. align-items: center;
  75. justify-content: center;
  76. }
  77. .user-menu .item.no-border {
  78. border-right: 0;
  79. }
  80. .user-menu .item.item-bottom {
  81. border-bottom: none;
  82. }
  83. .user-menu .icon{
  84. margin: 0 auto;
  85. display: block;
  86. height: 52.803rpx;
  87. width: 52.803rpx;
  88. margin-bottom: 16rpx;
  89. }
  90. .user-menu .icon.order{
  91. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -437.5rpx no-repeat;
  92. background-size: 52.803rpx;
  93. }
  94. .user-menu .icon.coupon{
  95. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -62.4997rpx no-repeat;
  96. background-size: 52.803rpx;
  97. }
  98. .user-menu .icon.gift{
  99. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -187.5rpx no-repeat;
  100. background-size: 52.803rpx;
  101. }
  102. .user-menu .icon.address{
  103. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 0 no-repeat;
  104. background-size: 52.803rpx;
  105. }
  106. .user-menu .icon.security{
  107. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -500rpx no-repeat;
  108. background-size: 52.803rpx;
  109. }
  110. .user-menu .icon.kefu{
  111. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -312.5rpx no-repeat;
  112. background-size: 52.803rpx;
  113. }
  114. .user-menu .icon.help{
  115. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -250rpx no-repeat;
  116. background-size: 52.803rpx;
  117. }
  118. .user-menu .icon.feedback{
  119. background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -125rpx no-repeat;
  120. background-size: 52.803rpx;
  121. }
  122. .user-menu .txt{
  123. display: block;
  124. height: 24rpx;
  125. width: 100%;
  126. font-size: 24rpx;
  127. color:#333;
  128. }
  129. .logout{
  130. margin-top: 50rpx;
  131. height: 101rpx;
  132. width: 100%;
  133. line-height: 101rpx;
  134. text-align: center;
  135. background: #fff;
  136. color: #333;
  137. font-size: 30rpx;
  138. }
  139. .dialog-login{
  140. width: 100%;
  141. height: 100%;
  142. position: fixed;
  143. top: 0;
  144. left: 0;
  145. background: rgba(0, 0, 0, 0.5);
  146. display: flex;
  147. justify-content: center;
  148. align-items: center;
  149. }
  150. .dialog-login .dialog-body{
  151. width: 540rpx;
  152. height: auto;
  153. overflow: hidden;
  154. background: #fff;
  155. border-radius: 5px;
  156. padding: 40rpx;
  157. }
  158. .dialog-login .dialog-body .title{
  159. width: 100%;
  160. text-align: center;
  161. line-height: 60rpx;
  162. }
  163. .dialog-login .dialog-body .content{
  164. width: 100%;
  165. }
  166. .dialog-login .dialog-body button{
  167. margin-top: 30rpx;
  168. }