index.wxss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /* 用户信息 */
  2. .user {
  3. position: relative;
  4. background: #fff;
  5. margin-bottom: 145rpx;
  6. }
  7. .user-header {
  8. display: flex;
  9. padding-top: 1px;
  10. width: 100%;
  11. height: 310rpx;
  12. align-content: center;
  13. background-color: #fd0;
  14. background-repeat: no-repeat;
  15. background-position: center right;
  16. background-size: auto 100%;
  17. }
  18. .user-header .user-header-cont {
  19. display: flex;
  20. margin: auto;
  21. margin-bottom: 135rpx;
  22. width: 79%;
  23. align-items: center;
  24. }
  25. .user-header .user-header-cont .user-header-avatar {
  26. display: block;
  27. margin-right: 30rpx;
  28. width: 120rpx;
  29. height: 120rpx;
  30. border-radius: 50%;
  31. border: 5rpx solid #fff;
  32. overflow: hidden;
  33. }
  34. .user-header .user-header-cont .user-header-avatar image {
  35. width: 120rpx;
  36. height: 120rpx;
  37. border-radius: 50%;
  38. }
  39. .user-header .user-header-cont .user-header-cont-name {
  40. font-size: 32rpx;
  41. padding: 20rpx 0;
  42. }
  43. /* 会员等级 */
  44. .user-header-grade {
  45. background: #fff199;
  46. margin-top: 12rpx;
  47. height: 38rpx;
  48. line-height: 38rpx;
  49. border-radius: 10rpx;
  50. padding: 0 14rpx;
  51. }
  52. /* .user-header-grade .user-grade_icon {
  53. margin-top: -5rpx;
  54. } */
  55. .user-header-grade .user-grade_icon image {
  56. display: block;
  57. width: 32rpx;
  58. height: 30rpx;
  59. }
  60. .user-header-grade .user-grade_name {
  61. margin-left: 8rpx;
  62. font-size: 24rpx;
  63. }
  64. /* 订单导航栏 */
  65. .order-navbar {
  66. position: absolute;
  67. left: 19rpx;
  68. bottom: -125rpx;
  69. margin: auto;
  70. padding: 15rpx 0;
  71. width: 95%;
  72. box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  73. font-size: 30rpx;
  74. border-top: 1rpx solid #eee;
  75. border-radius: 5rpx;
  76. background: #fff;
  77. }
  78. .order-navbar-header {
  79. margin: auto;
  80. padding-bottom: 10rpx;
  81. width: 91%;
  82. height: 70rpx;
  83. border-bottom: 1px solid #eee;
  84. justify-content: space-between;
  85. align-items: center;
  86. }
  87. .order-navbar-footer {
  88. width: 100%;
  89. padding: 10rpx 0px;
  90. }
  91. .order-navbar-footer .order-navbar-item .order-navbar__icon {
  92. text-align: center;
  93. margin: 0 auto;
  94. display: block;
  95. padding: 10rpx 0;
  96. color: #000;
  97. font-size: 36rpx;
  98. }
  99. .order-navbar-footer .order-navbar-item .order-navbar__name {
  100. display: block;
  101. font-size: 24rpx;
  102. color: #666;
  103. text-align: center;
  104. margin-right: 10rpx;
  105. }
  106. .order-navbar-footer .order-navbar-item .order-badge {
  107. position: absolute;
  108. top: 0;
  109. right: 55rpx;
  110. font-size: 22rpx;
  111. background: #ff495e;
  112. text-align: center;
  113. line-height: 28rpx;
  114. color: #fff;
  115. border-radius: 100%;
  116. min-height: 30rpx;
  117. min-width: 30rpx;
  118. padding: 1rpx;
  119. }
  120. /* 菜单列表 */
  121. .menus-list {
  122. margin-top: 20rpx;
  123. }
  124. .menus-list .menus-item {
  125. position: relative;
  126. padding: 28rpx 28rpx;
  127. border-bottom: 1rpx solid #eee;
  128. }
  129. .menus-list .menus-item .menus-item__name {
  130. color: #444;
  131. margin-left: 20rpx;
  132. }
  133. /* 我的钱包 */
  134. .my-asset {
  135. background: #fff;
  136. /* height: 70rpx; */
  137. padding: 26rpx 0;
  138. }
  139. .my-asset .asset-right {
  140. width: 210rpx;
  141. border-left: 1rpx solid #eee;
  142. }
  143. .asset-right_item {
  144. text-align: center;
  145. color: #666;
  146. }
  147. .asset-right_item .item-icon text {
  148. font-size: 36rpx;
  149. }
  150. .asset-right_item .item-name {
  151. margin-top: 10rpx;
  152. }
  153. .asset-right_item .item-name text {
  154. font-size: 25rpx;
  155. }
  156. .asset-left_item {
  157. text-align: center;
  158. color: #666;
  159. padding: 0 60rpx;
  160. }
  161. .asset-left_item .item-value text {
  162. font-size: 32rpx;
  163. color: red;
  164. }
  165. .asset-left_item .item-name {
  166. margin-top: 6rpx;
  167. }
  168. .asset-left_item .item-name text {
  169. font-size: 25rpx;
  170. }