person.wxss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. .person_info {
  2. position: relative;
  3. padding: 30rpx 40rpx;
  4. background: #fff;
  5. /* margin-top: 22rpx; */
  6. font-size: 30rpx;
  7. }
  8. .person_info::after,.order_list::after {
  9. content: "";
  10. position: absolute;
  11. bottom: 0;
  12. left: 0;
  13. right: 0;
  14. height: 2rpx;
  15. background: #d9d9d9;
  16. -webkit-transform: scaleY(0.5);
  17. transform: scaleY(0.5);
  18. }
  19. .person_info .person_avatar_image {
  20. width: 122rpx;
  21. height: 118rpx;
  22. margin-right: 32rpx;
  23. border-radius: 10rpx;
  24. vertical-align: middle;
  25. border-radius: 50%;
  26. }
  27. .order_list {
  28. position: relative;
  29. margin-top: 22rpx;
  30. font-size: 30rpx;
  31. background: #ffffff;
  32. }
  33. .order_list .order_title {
  34. position: relative;
  35. display: flex;
  36. height: 104rpx;
  37. box-sizing: border-box;
  38. line-height: 104rpx;
  39. padding: 0 40rpx;
  40. }
  41. .order_list .order_title text {
  42. color: #666;
  43. flex: 1;
  44. }
  45. .order_list .order_title .look_all_order {
  46. font-size: 24rpx;
  47. text-align: right;
  48. color: #999;
  49. }
  50. .order_list .order_info {
  51. display: flex;
  52. padding: 40rpx;
  53. }
  54. .order_list .order_info>view {
  55. flex: 1;
  56. text-align: center;
  57. font-size: 20rpx;
  58. color: #999;
  59. }
  60. .order_list .order_info image {
  61. vertical-align: middle;
  62. }
  63. .order_list .order_info text {
  64. display: inline-block;
  65. height: 30rpx;
  66. margin-top: 10rpx;
  67. }
  68. .person_info_cell {
  69. margin-top: 22rpx;
  70. background: #ffffff;
  71. position: relative;
  72. }
  73. .person_info_cell::after {
  74. content: "";
  75. position: absolute;
  76. bottom: 0;
  77. left: 0;
  78. right: 0;
  79. height: 2rpx;
  80. background: #d9d9d9;
  81. -webkit-transform: scaleY(0.5);
  82. transform: scaleY(0.5);
  83. }
  84. .person_info_cell .item {
  85. padding: 40rpx;
  86. font-size: 30rpx;
  87. }
  88. .person_info_cell .item image {
  89. margin-right: 25rpx;
  90. }
  91. .person_info_cell .item text {
  92. display: inline-block;
  93. width: 615rpx;
  94. /* width: 615rpx; */
  95. }
  96. .bonus_item {
  97. font-size: 30rpx;
  98. padding: 10rpx 40rpx;
  99. }
  100. .bonus_item text {
  101. display: inline-block;
  102. width: 50%;
  103. }
  104. .bonus_item text.total {
  105. color: #eb4e4f;
  106. text-align: right;
  107. }
  108. .bonus_list {
  109. overflow: hidden;
  110. }
  111. .show {
  112. max-height: 999rpx;
  113. -webkit-transition: max-height .5s;
  114. transition: max-height .5s;
  115. }
  116. .hide {
  117. max-height: 0;
  118. -webkit-transition: max-height .5s;
  119. transition: max-height .5s;
  120. }
  121. .arrow_down {
  122. -webkit-transform: rotate(45deg);
  123. transform: rotate(45deg);
  124. }
  125. /* 新增 card */
  126. .person_header {
  127. position: relative;
  128. height: 406rpx;
  129. background-image: linear-gradient(-180deg, #FFE4A6 13%, rgba(255,238,213,0.00) 100%);
  130. }
  131. .card {
  132. position: absolute;
  133. left: 0;
  134. right: 0;
  135. top: 40rpx;
  136. margin: auto;
  137. width: 600rpx;
  138. height: 320rpx;
  139. text-align: center;
  140. }
  141. .card_bg, .card_content {
  142. position: absolute;
  143. left: 0;
  144. top: 0;
  145. width: 100%;
  146. height: 100%;
  147. }
  148. .card_content {
  149. z-index: 1;
  150. }
  151. .card_title {
  152. padding: 40rpx 0 18rpx;
  153. font-size: 30rpx;
  154. color: #FFFFFF;
  155. line-height: 44rpx;
  156. }
  157. .bonus_balance {
  158. font-size: 70rpx;
  159. color: #FFEEA6;
  160. height: 80rpx;
  161. line-height: 80rpx;
  162. }
  163. .bonus_balance_detail {
  164. position: relative;
  165. padding: 8rpx 34rpx;
  166. font-size: 24rpx;
  167. color: #FFEEA6;
  168. line-height: 44rpx;
  169. }
  170. .bonus_balance_detail::after {
  171. content: '';
  172. position: absolute;
  173. top: 0;
  174. left: 0;
  175. width: 200%;
  176. height: 200%;
  177. transform: scale(.5);
  178. transform-origin: 0 0;
  179. pointer-events: none;
  180. box-sizing: border-box;
  181. border: 0 solid #FFEEA6;
  182. border-radius: 100rpx;
  183. border-width: 1px;
  184. box-shadow: 0 4rpx 20rpx 0 rgba(77,17,17,0.10);
  185. }
  186. .use_bonus_rules {
  187. margin-right: 20rpx;
  188. margin-top: 60rpx;
  189. font-size: 22rpx;
  190. color: #FFFFFF;
  191. text-align: right;
  192. line-height: 44rpx;
  193. text-decoration: underline;
  194. }
  195. .sub_count {
  196. position: absolute;
  197. z-index: 1;
  198. /* padding: 5rpx 10rpx; */
  199. width: 36rpx;
  200. height: 36rpx;
  201. line-height: 40rpx;
  202. left: 50%;
  203. top: -18rpx;
  204. background: #2b2b2b;
  205. color: #fff;
  206. font-size: 20rpx;
  207. border-radius: 50%;
  208. transform: scale(.8);
  209. }