Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

343 рядки
5.3 KiB

  1. page {
  2. background: #f6f6f6;
  3. }
  4. .head {
  5. height: 227rpx;
  6. width: 681rpx;
  7. margin: -45rpx auto 0;
  8. position: relative;
  9. }
  10. .tab {
  11. display: flex;
  12. justify-content: space-around;
  13. margin: 45rpx 0;
  14. z-index: 999;
  15. height: 60rpx;
  16. }
  17. .tab .tabItem {
  18. width: 120rpx;
  19. text-align: center;
  20. padding-bottom: 15rpx;
  21. transition: all .3s;
  22. }
  23. .tabItem.active {
  24. font-size: 35rpx;
  25. color: #51a0fc;
  26. border-bottom: 5rpx solid #51a0fc;
  27. }
  28. picker {
  29. width: 180rpx;
  30. text-align: center;
  31. height: 45rpx;
  32. font-size: 30rpx;
  33. overflow: hidden;
  34. color: rgba(85, 85, 85, 1);
  35. margin: 0 auto;
  36. }
  37. .head image {
  38. position: absolute;
  39. width: 100%;
  40. height: 100% !important;
  41. left: 0;
  42. right: 0;
  43. top: 0;
  44. bottom: 0;
  45. z-index: 1;
  46. }
  47. .time {
  48. position: relative;
  49. display: flex;
  50. flex: 2.5;
  51. text-align: center;
  52. z-index: 10;
  53. align-items: center;
  54. }
  55. .time>view:nth-of-type(1),
  56. .time>view:nth-of-type(3) {
  57. flex: 1;
  58. }
  59. .time>view:nth-of-type(2) {
  60. flex: 0.5;
  61. }
  62. .time>view text {
  63. display: block;
  64. }
  65. .time>view text:nth-of-type(2n+1) {
  66. margin-top: 69rpx;
  67. }
  68. .time>view text:nth-of-type(2n+1) {
  69. color: #999;
  70. font-size: 26rpx;
  71. margin-bottom: 24rpx;
  72. }
  73. .time>view text:nth-of-type(2n) {
  74. color: rgba(153, 153, 153, 1);
  75. font-size: 32rpx;
  76. margin-top: 34rpx;
  77. }
  78. .btn {
  79. background: #51a0fc;
  80. height: 76rpx;
  81. line-height: 76rpx;
  82. display: block;
  83. width: 681rpx;
  84. margin: 0 auto;
  85. border-top-left-radius: 0 !important;
  86. border-top-right-radius: 0 !important;
  87. border-bottom-left-radius: 16rpx;
  88. border-bottom-right-radius: 16rpx;
  89. color: #fff;
  90. font-size: 30rpx;
  91. box-shadow: 0 9rpx 16rpx 0 rgba(81, 160, 252, 0.57);
  92. }
  93. button::after {
  94. border: none;
  95. }
  96. .active {
  97. opacity: 0.6;
  98. }
  99. .acount {
  100. width: 630rpx;
  101. display: flex;
  102. margin: 30rpx auto 0;
  103. padding: 35rpx 0;
  104. flex: 2;
  105. text-align: center;
  106. border-top: 1px solid #e3f0ff;
  107. }
  108. .acount>view {
  109. flex: 1;
  110. }
  111. .acount>view text {
  112. display: block;
  113. color: #999;
  114. font-size: 26rpx;
  115. }
  116. .acount>view text:nth-of-type(2n) {
  117. color: #333;
  118. font-size: 40rpx;
  119. margin-top: 20rpx;
  120. }
  121. .content {
  122. position: relative;
  123. padding: 0 35rpx;
  124. height: 230rpx;
  125. background: #fff;
  126. border-bottom: 1px solid #eaeaea;
  127. }
  128. .content>view:nth-of-type(2n+1) text {
  129. display: block;
  130. }
  131. .content #refundMark {
  132. display: inline-block;
  133. position: absolute;
  134. width: 55rpx;
  135. height: 55rpx;
  136. line-height: 55rpx;
  137. text-align: center;
  138. top: 20rpx;
  139. right: 150rpx;
  140. border: 5rpx solid #ff0000b7;
  141. color: #ff0000b7;
  142. border-radius: 50% 50%;
  143. }
  144. .content .fr .card {
  145. position: absolute;
  146. top: 40rpx;
  147. right: 230rpx;
  148. border: 3px solid #b6e48c;
  149. color: #b6e48c;
  150. font-size: 35rpx;
  151. padding: 0 15rpx;
  152. border-radius: 15rpx;
  153. transform: rotate(-15deg);
  154. }
  155. .content .fr .Ecard {
  156. position: absolute;
  157. top: 40rpx;
  158. right: 230rpx;
  159. border: 3px solid #ec9ea0;
  160. color: #ec9ea0;
  161. font-size: 35rpx;
  162. padding: 0 15rpx;
  163. border-radius: 15rpx;
  164. transform: rotate(-15deg);
  165. }
  166. .content>view:nth-of-type(2n+1) text:nth-of-type(1) {
  167. margin-top: 27rpx;
  168. display: inline-block;
  169. overflow: hidden;
  170. height: 48rpx;
  171. }
  172. .content>view:nth-of-type(2n+1) text:nth-of-type(2) {
  173. margin-top: 10rpx;
  174. font-size: 26rpx;
  175. font-family: PingFang-SC-Bold;
  176. color: rgba(153, 153, 153, 1);
  177. }
  178. .content>view:nth-of-type(2n+1) {
  179. float: left;
  180. width: 65%;
  181. }
  182. .content>view:nth-of-type(2n) {
  183. width: 30%;
  184. float: right;
  185. text-align: right;
  186. }
  187. .nocontent {
  188. text-align: center;
  189. font-size: 30rpx;
  190. padding: 30rpx 0;
  191. }
  192. .contents {
  193. margin-top: 30rpx;
  194. }
  195. .content .fr text:nth-of-type(1) {
  196. margin-top: 36rpx;
  197. }
  198. .content .fr text:nth-of-type(1),
  199. .content .fr text:nth-of-type(3) {
  200. color: #333;
  201. display: block;
  202. font-size: 28rpx;
  203. }
  204. .content .fr text:nth-of-type(2) {
  205. display: block;
  206. color: red;
  207. font-size: 26rpx;
  208. }
  209. .img {
  210. display: block;
  211. width: 100%;
  212. }
  213. .title {
  214. display: block;
  215. text-align: center;
  216. color: rgba(153, 153, 153, 1);
  217. font-size: 26rpx;
  218. }
  219. .total {
  220. display: block;
  221. text-align: center;
  222. font-size: 70rpx;
  223. margin: 36rpx 0;
  224. font-family: PingFang-SC-Bold;
  225. font-weight: bold;
  226. color: rgba(51, 51, 51, 1);
  227. }
  228. .acounts {
  229. width: 680rpx;
  230. margin: 48rpx auto 48rpx;
  231. border: 1px solid #51a0fc;
  232. border-radius: 16rpx;
  233. padding: 40rpx 0 20rpx 0;
  234. background: #fff;
  235. }
  236. .daishou {
  237. width: 133rpx;
  238. height: 79rpx;
  239. position: absolute;
  240. top: 0;
  241. bottom: 0;
  242. right: 264rpx;
  243. margin: auto;
  244. }
  245. .transaction_msg {
  246. width: 710rpx;
  247. margin: 0 auto 30rpx;
  248. height: 100%;
  249. display: flex;
  250. flex-direction: column;
  251. border-radius: 16rpx;
  252. overflow: hidden;
  253. padding-bottom: 20rpx;
  254. padding-top: 20rpx;
  255. background: #fff;
  256. box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.05);
  257. /* border-bottom: 20rpx solid #f5f5f5;*/
  258. /* margin-bottom: 70rpx; */
  259. }
  260. .transaction_msg view {
  261. width: 100%;
  262. height: 70rpx;
  263. line-height: 70rpx;
  264. background: #fff;
  265. display: flex;
  266. justify-content: space-between;
  267. }
  268. .transaction_msg view text {
  269. padding: 0 4%;
  270. }
  271. .transaction_msg view:nth-child(1) text {
  272. font-size: 30rpx !important;
  273. color: #333 !important;
  274. }
  275. .jiaoyi {
  276. width: 160rpx;
  277. display: block;
  278. margin: 200rpx auto 0;
  279. }
  280. .transaction_msg view text:nth-child(2) {
  281. font-size: 28rpx;
  282. color: #b8b8b8;
  283. }
  284. .transaction_msg view text:nth-child(1) {
  285. font-size: 30rpx;
  286. color: #000;
  287. letter-spacing: 1.16rpx;
  288. }
  289. .transaction_msg view:last-child {
  290. position: relative;
  291. }
  292. .transaction_msg view:last-child text:nth-child(2) {
  293. font-size: 30rpx !important;
  294. }