user.wxss 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. page {
  12. height: 100%;
  13. background-color: #f8f8f8;
  14. }
  15. .tj-sction .tj-item, .item-box .order-section .order-item {
  16. display: flex;
  17. flex-direction: column;
  18. justify-content: center;
  19. align-items: center;
  20. }
  21. .tj-sction, .item-box .order-section {
  22. display: flex;
  23. justify-content: space-around;
  24. align-content: center;
  25. background: #fff;
  26. border-radius: 10rpx;
  27. }
  28. .container {
  29. height: 100%;
  30. background-color: #fff;
  31. }
  32. .content-box {
  33. height: 100%;
  34. }
  35. .user-section {
  36. height: 420rpx;
  37. padding: 50rpx 0rpx 0 30rpx;
  38. position: relative;
  39. }
  40. .user-section .bg {
  41. position: absolute;
  42. left: 0;
  43. top: 0;
  44. width: 100%;
  45. height: 100%;
  46. background: linear-gradient(180deg, #08c4e6, #50ead2);
  47. }
  48. .user-section .bg image {
  49. width: 100%;
  50. height: 100%;
  51. }
  52. .user-info-box {
  53. height: 180rpx;
  54. color: white;
  55. display: flex;
  56. align-items: center;
  57. justify-content: space-between;
  58. position: relative;
  59. z-index: 1;
  60. }
  61. .user-info-box .detail {
  62. height: 130rpx;
  63. }
  64. .user-info-box .detail .portrait-box {
  65. height: 100%;
  66. }
  67. .user-info-box .detail .portrait-box .portrait {
  68. width: 130rpx;
  69. height: 100%;
  70. border: 5rpx solid #fff;
  71. border-radius: 50%;
  72. }
  73. .user-info-box .detail .info-box {
  74. margin-left: 20rpx;
  75. line-height: 1.5;
  76. }
  77. .user-info-box .detail .info-box .username {
  78. font-size: 34rpx;
  79. height: 100%;
  80. max-width: 200rpx;
  81. }
  82. .user-info-box .detail .info-box .vip {
  83. position: relative;
  84. margin-left: 12rpx;
  85. width: 120rpx;
  86. height: 40rpx;
  87. }
  88. .user-info-box .detail .info-box .vip .vip-bg {
  89. position: absolute;
  90. top: 0;
  91. left: 0;
  92. right: 0;
  93. width: 100%;
  94. height: 100%;
  95. }
  96. .user-info-box .detail .info-box .vip .vip-title {
  97. position: relative;
  98. z-index: 10;
  99. font-size: 20rpx;
  100. font-family: PingFang SC;
  101. font-weight: 500;
  102. color: #93794b;
  103. padding-left: 36rpx;
  104. line-height: 40rpx;
  105. }
  106. .user-info-box .detail .info-box .username-t {
  107. font-size: 38rpx;
  108. display: flex;
  109. align-items: center;
  110. }
  111. .user-info-box .detail .info-box .username-t image {
  112. display: inline-block;
  113. margin-left: 10rpx;
  114. width: 147rpx;
  115. height: 32rpx;
  116. }
  117. .user-info-box .detail .info-box .user-get {
  118. font-size: 32rpx;
  119. }
  120. .user-info-box .detail .info-box .user-get text {
  121. font-size: 38rpx;
  122. }
  123. .user-info-box .config {
  124. font-size: 48rpx;
  125. height: 130rpx;
  126. }
  127. .user-info-box .config .setting {
  128. margin-right: 51rpx;
  129. }
  130. .user-info-box .my-info {
  131. margin-right: 30rpx;
  132. width: 130rpx;
  133. height: 50rpx;
  134. border: 1px solid #ffffff;
  135. border-radius: 26rpx;
  136. justify-content: center;
  137. }
  138. .user-info-box .my-info image {
  139. width: 30rpx;
  140. height: 30rpx;
  141. }
  142. .user-info-box .my-info .title {
  143. padding-left: 9rpx;
  144. font-size: 24rpx;
  145. font-family: PingFang SC;
  146. font-weight: 500;
  147. color: #ffffff;
  148. }
  149. .vip-card-box {
  150. display: flex;
  151. flex-direction: column;
  152. color: #f7d680;
  153. height: 240rpx;
  154. background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
  155. border-radius: 16rpx 16rpx 0 0;
  156. overflow: hidden;
  157. position: relative;
  158. padding: 20rpx 24rpx;
  159. }
  160. .vip-card-box .card-bg {
  161. position: absolute;
  162. top: 20rpx;
  163. right: 0;
  164. width: 380rpx;
  165. height: 260rpx;
  166. }
  167. .vip-card-box .b-btn {
  168. position: absolute;
  169. right: 20rpx;
  170. top: 16rpx;
  171. width: 132rpx;
  172. height: 40rpx;
  173. text-align: center;
  174. line-height: 40rpx;
  175. font-size: 22rpx;
  176. color: #36343c;
  177. border-radius: 20px;
  178. background: linear-gradient(left, #f9e6af, #ffd465);
  179. z-index: 1;
  180. }
  181. .vip-card-box .tit {
  182. font-size: 30rpx;
  183. color: #f7d680;
  184. margin-bottom: 28rpx;
  185. }
  186. .vip-card-box .tit .iconfont {
  187. color: #f6e5a3;
  188. margin-right: 16rpx;
  189. }
  190. .vip-card-box .e-b {
  191. font-size: 24rpx;
  192. color: #d8cba9;
  193. margin-top: 10rpx;
  194. }
  195. .cover-container {
  196. background: #f8f8f8;
  197. margin-top: -150rpx;
  198. padding: 0 30rpx;
  199. position: relative;
  200. background: #f5f5f5;
  201. padding-bottom: 20rpx;
  202. }
  203. .cover-container .arc {
  204. position: absolute;
  205. left: 0;
  206. top: -34rpx;
  207. width: 100%;
  208. height: 36rpx;
  209. }
  210. .tj-sction .tj-item {
  211. flex-direction: column;
  212. height: 140rpx;
  213. font-size: 24rpx;
  214. color: #75787d;
  215. }
  216. .tj-sction .num {
  217. font-size: 32rpx;
  218. color: #303133;
  219. margin-bottom: 8rpx;
  220. }
  221. .item-box {
  222. margin: 20rpx 0;
  223. }
  224. .item-box .box-title {
  225. background-color: #fff;
  226. line-height: 1;
  227. padding: 0 36rpx 0 35rpx;
  228. height: 73rpx;
  229. border-radius: 20rpx 20rpx 0 0;
  230. }
  231. .item-box .box-title .title {
  232. font-weight: bold;
  233. font-size: 30rpx;
  234. font-family: PingFang SC;
  235. font-weight: bold;
  236. color: #333333;
  237. }
  238. .item-box .box-title .link {
  239. font-size: 26rpx;
  240. color: #909399;
  241. }
  242. .item-box .order-section {
  243. height: 146rpx;
  244. }
  245. .item-box .order-section .order-item {
  246. width: 120rpx;
  247. height: 146rpx;
  248. border-radius: 10rpx;
  249. font-size: 24rpx;
  250. color: #303133;
  251. }
  252. .item-box .order-section .iconfont {
  253. font-size: 48rpx;
  254. margin-bottom: 18rpx;
  255. color: #fa436a;
  256. }
  257. .item-box .order-section .icon-shouhoutuikuan {
  258. font-size: 44rpx;
  259. }
  260. .item-box .order-section .icon {
  261. height: 50rpx;
  262. width: 48rpx;
  263. margin-bottom: 18rpx;
  264. background-size: 100%;
  265. background-repeat: no-repeat;
  266. background-position: center;
  267. }
  268. .item-box .order-section .icon .icon-img {
  269. width: 100%;
  270. height: 100%;
  271. }
  272. .item-box .order-section .icon-b {
  273. height: 90rpx;
  274. width: 88rpx;
  275. }
  276. .history-section {
  277. margin-top: 20rpx;
  278. background: #fff;
  279. border-radius: 10rpx;
  280. }
  281. .history-section .sec-header {
  282. display: flex;
  283. align-items: center;
  284. font-size: 28rpx;
  285. color: #303133;
  286. line-height: 40rpx;
  287. margin-left: 30rpx;
  288. padding-top: 30rpx;
  289. }
  290. .history-section .sec-header .iconfont {
  291. font-size: 44rpx;
  292. color: #dd524d;
  293. margin-right: 16rpx;
  294. line-height: 40rpx;
  295. }
  296. .history-section .h-list {
  297. white-space: nowrap;
  298. padding: 30rpx 30rpx 0;
  299. }
  300. .history-section .h-list .h-list-image {
  301. display: inline-block;
  302. width: 160rpx;
  303. height: 160rpx;
  304. margin-right: 20rpx;
  305. border-radius: 10rpx;
  306. }
  307. .up-box {
  308. margin: 21rpx auto;
  309. width: 710rpx;
  310. height: 90rpx;
  311. background: linear-gradient(73deg, #ffffff 0%, #fffbeb 0%, #fff1da 0%, #fed591 100%);
  312. border-radius: 20rpx;
  313. }
  314. .up-box image {
  315. width: 100%;
  316. height: 100%;
  317. border-radius: 20rpx;
  318. }
  319. .item-box-b {
  320. width: 710rpx;
  321. height: 221rpx;
  322. background: #ffffff;
  323. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.5);
  324. border-radius: 20rpx;
  325. position: relative;
  326. top: -150rpx;
  327. left: 0;
  328. right: 0;
  329. margin: 0 auto -150rpx;
  330. }
  331. .popup {
  332. width: 640rpx;
  333. background-color: #ffffff;
  334. border-radius: 15rpx;
  335. text-align: center;
  336. }
  337. .popup .popup-dox {
  338. position: relative;
  339. top: -60rpx;
  340. }
  341. .popup .popup-dox .popup-logo {
  342. width: 460rpx;
  343. height: 132rpx;
  344. }
  345. .popup .popup-dox .pop-title {
  346. font-size: 40rpx;
  347. font-weight: bold;
  348. color: #333333;
  349. padding: 25rpx 0rpx;
  350. margin-bottom: 50rpx;
  351. }
  352. .popup .popup-dox .popup-text {
  353. width: 400rpx;
  354. height: 400rpx;
  355. margin-bottom: 50rpx;
  356. }
  357. .popup .popup-dox .btn {
  358. width: 300rpx;
  359. height: 50rpx;
  360. line-height: 50rpx;
  361. background: #96e4f2;
  362. margin: 0 auto;
  363. color: #ffffff;
  364. border-radius: 25rpx;
  365. }
  366. .popup .popup-dox .pop-tip {
  367. font-size: 30rpx;
  368. font-weight: 500;
  369. color: #333333;
  370. justify-content: center;
  371. margin-top: 20rpx;
  372. }
  373. .popup .popup-dox .pop-tip .weixin {
  374. width: 48rpx;
  375. height: 40rpx;
  376. margin-right: 14rpx;
  377. }
  378. .popup .popup-dox .pop-tip .weixin image {
  379. width: 48rpx;
  380. height: 40rpx;
  381. }
  382. .close_icon {
  383. width: 60rpx;
  384. height: 60rpx;
  385. margin: 88rpx auto 0;
  386. }
  387. .close_icon image {
  388. width: 100%;
  389. height: 100%;
  390. }
  391. .outlogin {
  392. margin: 40rpx auto;
  393. width: 500rpx;
  394. background-color: #fff;
  395. color: #ff4c4b;
  396. border: 1px solid #ff4c4b;
  397. text-align: center;
  398. padding: 10rpx 0rpx;
  399. border-radius: 50rpx;
  400. }
  401. .order-font {
  402. margin-top: -24rpx;
  403. }