爱简收旧衣按件回收前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

494 lines
12 KiB

  1. /**
  2. * 这里是uni-app内置的常用样式变量
  3. *
  4. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  5. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  6. *
  7. */
  8. /**
  9. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  10. *
  11. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  12. */
  13. /* 颜色变量 */
  14. /* 行为相关颜色 */
  15. /* 文字基本颜色 */
  16. /* 背景颜色 */
  17. /* 边框颜色 */
  18. /* 尺寸变量 */
  19. /* 文字尺寸 */
  20. /* 图片尺寸 */
  21. /* Border Radius */
  22. /* 水平间距 */
  23. /* 垂直间距 */
  24. /* 透明度 */
  25. /* 文章场景相关 */
  26. .container.data-v-6cb840e8 {
  27. min-height: 100vh;
  28. background: #f8f8f8;
  29. padding-bottom: 120rpx;
  30. }
  31. .banner.data-v-6cb840e8 {
  32. height: 400rpx;
  33. background: #ff6b35;
  34. position: relative;
  35. overflow: hidden;
  36. border-radius: 0 0 30rpx 30rpx;
  37. }
  38. .banner .banner-title.data-v-6cb840e8 {
  39. position: absolute;
  40. top: 30%;
  41. left: 20%;
  42. color: #fff;
  43. font-family: DingTalk JinBuTi;
  44. font-weight: 400;
  45. font-style: italic;
  46. font-size: 30px;
  47. line-height: 100%;
  48. letter-spacing: 0%;
  49. vertical-align: bottom;
  50. z-index: 2;
  51. }
  52. .banner .banner-bg.data-v-6cb840e8 {
  53. position: absolute;
  54. width: 100%;
  55. height: 100%;
  56. object-fit: cover;
  57. }
  58. .user-card.data-v-6cb840e8 {
  59. margin: -50rpx 30rpx 0;
  60. background: #fff;
  61. border-radius: 24rpx;
  62. padding: 30rpx;
  63. position: relative;
  64. z-index: 2;
  65. }
  66. .user-card .user-info.data-v-6cb840e8 {
  67. display: flex;
  68. align-items: center;
  69. margin-bottom: 40rpx;
  70. }
  71. .user-card .user-info .avatar.data-v-6cb840e8 {
  72. width: 110rpx;
  73. height: 110rpx;
  74. border-radius: 12rpx;
  75. margin-right: 24rpx;
  76. }
  77. .user-card .user-info .info .name.data-v-6cb840e8 {
  78. font-size: 34rpx;
  79. font-weight: 600;
  80. color: #222;
  81. margin-bottom: 12rpx;
  82. display: block;
  83. }
  84. .user-card .user-info .info .id.data-v-6cb840e8 {
  85. font-size: 26rpx;
  86. color: #999;
  87. display: flex;
  88. align-items: center;
  89. }
  90. .user-card .user-info .info .id.data-v-6cb840e8::before {
  91. color: #999;
  92. margin-right: 4rpx;
  93. }
  94. .user-card .wallet-info.data-v-6cb840e8 {
  95. display: flex;
  96. padding: 30rpx;
  97. background: #fff8ea;
  98. border-radius: 16rpx;
  99. position: relative;
  100. }
  101. .user-card .wallet-info.data-v-6cb840e8::after {
  102. content: "";
  103. position: absolute;
  104. top: 50%;
  105. left: 50%;
  106. transform: translate(-50%, -50%);
  107. width: 1rpx;
  108. height: 50%;
  109. background: #FFE4D9;
  110. }
  111. .user-card .wallet-info .balance.data-v-6cb840e8 {
  112. flex: 1;
  113. padding-right: 30rpx;
  114. }
  115. .user-card .wallet-info .balance .label.data-v-6cb840e8 {
  116. font-size: 26rpx;
  117. color: #999;
  118. margin-bottom: 12rpx;
  119. display: block;
  120. }
  121. .user-card .wallet-info .balance .amount.data-v-6cb840e8 {
  122. display: flex;
  123. align-items: baseline;
  124. margin-bottom: 20rpx;
  125. }
  126. .user-card .wallet-info .balance .amount .symbol.data-v-6cb840e8 {
  127. font-size: 30rpx;
  128. color: #FF5B05;
  129. font-weight: normal;
  130. margin-right: 4rpx;
  131. }
  132. .user-card .wallet-info .balance .amount .value.data-v-6cb840e8 {
  133. font-size: 46rpx;
  134. font-weight: 600;
  135. color: #FF5B05;
  136. line-height: 1;
  137. }
  138. .user-card .wallet-info .balance .withdraw-btn.data-v-6cb840e8 {
  139. display: inline-flex;
  140. align-items: center;
  141. padding: 8rpx 16rpx;
  142. background: #fff0d2;
  143. border: 1rpx solid rgba(255, 91, 5, 0.2);
  144. border-radius: 13rpx;
  145. color: #FF5B05;
  146. font-size: 24rpx;
  147. }
  148. .user-card .wallet-info .balance .withdraw-btn .arrow.data-v-6cb840e8 {
  149. margin-left: 6rpx;
  150. font-family: "PingFang SC";
  151. }
  152. .user-card .wallet-info .recycle-count.data-v-6cb840e8 {
  153. flex: 1;
  154. padding-left: 30rpx;
  155. }
  156. .user-card .wallet-info .recycle-count .label.data-v-6cb840e8 {
  157. font-size: 26rpx;
  158. color: #999;
  159. margin-bottom: 12rpx;
  160. display: block;
  161. }
  162. .user-card .wallet-info .recycle-count .count.data-v-6cb840e8 {
  163. display: flex;
  164. align-items: baseline;
  165. }
  166. .user-card .wallet-info .recycle-count .count .value.data-v-6cb840e8 {
  167. font-size: 46rpx;
  168. font-weight: 600;
  169. color: #222;
  170. line-height: 1;
  171. }
  172. .user-card .wallet-info .recycle-count .count .unit.data-v-6cb840e8 {
  173. font-size: 26rpx;
  174. color: #999;
  175. margin-left: 8rpx;
  176. font-weight: normal;
  177. }
  178. .order-section.data-v-6cb840e8 {
  179. margin: 20rpx 30rpx;
  180. background: linear-gradient(to bottom, #fff4e0 0%, #fff 10%);
  181. border-radius: 20rpx;
  182. padding: 20rpx 30rpx;
  183. }
  184. .order-section .section-header.data-v-6cb840e8 {
  185. display: flex;
  186. justify-content: space-between;
  187. align-items: center;
  188. margin-bottom: 30rpx;
  189. }
  190. .order-section .section-header .title.data-v-6cb840e8 {
  191. font-size: 34rpx;
  192. font-weight: bold;
  193. color: #333;
  194. }
  195. .order-section .section-header .view-all.data-v-6cb840e8 {
  196. font-size: 26rpx;
  197. color: #999;
  198. display: flex;
  199. align-items: center;
  200. }
  201. .order-section .section-header .view-all .arrow.data-v-6cb840e8 {
  202. margin-left: 4rpx;
  203. }
  204. .order-section .order-tabs.data-v-6cb840e8 {
  205. display: flex;
  206. margin-bottom: 30rpx;
  207. background: #f8f8f8;
  208. border-radius: 8rpx;
  209. padding: 4rpx;
  210. }
  211. .order-section .order-tabs .tab-item.data-v-6cb840e8 {
  212. flex: 1;
  213. text-align: center;
  214. padding: 16rpx 0;
  215. position: relative;
  216. color: #666;
  217. font-size: 28rpx;
  218. border-radius: 6rpx;
  219. }
  220. .order-section .order-tabs .tab-item.active.data-v-6cb840e8 {
  221. color: #333;
  222. font-weight: bold;
  223. background: #fff;
  224. box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  225. }
  226. .order-section .order-item.data-v-6cb840e8 {
  227. background: #fff;
  228. border-radius: 16rpx;
  229. padding: 24rpx;
  230. border: none;
  231. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
  232. }
  233. .order-section .order-item .order-header.data-v-6cb840e8 {
  234. margin-bottom: 24rpx;
  235. }
  236. .order-section .order-item .order-header .order-id.data-v-6cb840e8 {
  237. font-size: 26rpx;
  238. color: #666;
  239. }
  240. .order-section .order-item .order-content.data-v-6cb840e8 {
  241. display: flex;
  242. margin-bottom: 24rpx;
  243. align-items: center;
  244. justify-content: space-between;
  245. position: relative;
  246. }
  247. .order-section .order-item .order-content.data-v-6cb840e8::after {
  248. content: "";
  249. position: absolute;
  250. left: 50%;
  251. top: 50%;
  252. transform: translate(-50%, -50%);
  253. width: 60rpx;
  254. height: 60rpx;
  255. background: #f8f8f8;
  256. border-radius: 50%;
  257. z-index: 1;
  258. }
  259. .order-section .order-item .order-content.data-v-6cb840e8::before {
  260. content: "⇌";
  261. position: absolute;
  262. left: 50%;
  263. top: 50%;
  264. transform: translate(-50%, -50%);
  265. color: #999;
  266. font-size: 32rpx;
  267. z-index: 2;
  268. }
  269. .order-section .order-item .order-content .goods-image.data-v-6cb840e8 {
  270. width: 200rpx;
  271. height: 200rpx;
  272. border-radius: 16rpx;
  273. background: #fffbe6;
  274. padding: 20rpx;
  275. box-sizing: border-box;
  276. display: block;
  277. }
  278. .order-section .order-item .order-content .order-info-opt.data-v-6cb840e8 {
  279. width: 200rpx;
  280. min-height: 110rpx;
  281. background: linear-gradient(180deg, #fffbe6 0%, #fff 100%);
  282. border-radius: 16rpx;
  283. display: flex;
  284. flex-direction: column;
  285. align-items: center;
  286. justify-content: space-between;
  287. padding: 24rpx 0 16rpx 0;
  288. box-sizing: border-box;
  289. margin-left: 16rpx;
  290. }
  291. .order-section .order-item .order-content .order-info-top.data-v-6cb840e8 {
  292. display: flex;
  293. flex-direction: column;
  294. align-items: center;
  295. margin-bottom: 8rpx;
  296. }
  297. .order-section .order-item .order-content .order-info-count.data-v-6cb840e8 {
  298. font-size: 32rpx;
  299. color: #222;
  300. font-weight: bold;
  301. margin-bottom: 4rpx;
  302. }
  303. .order-section .order-item .order-content .order-info-price.data-v-6cb840e8 {
  304. font-size: 22rpx;
  305. color: #999;
  306. }
  307. .order-section .order-item .order-content .order-info-estimate.data-v-6cb840e8 {
  308. background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%);
  309. color: #fff;
  310. font-size: 24rpx;
  311. font-weight: bold;
  312. border-radius: 0 0 16rpx 16rpx;
  313. padding: 12rpx 0;
  314. width: 100%;
  315. text-align: center;
  316. margin-top: 8rpx;
  317. box-shadow: 0 2rpx 8rpx rgba(255, 156, 0, 0.08);
  318. }
  319. .order-section .order-item .order-footer.data-v-6cb840e8 {
  320. display: flex;
  321. align-items: center;
  322. padding: 24rpx;
  323. border-top: 1rpx solid #f5f5f5;
  324. background: #fafafa;
  325. border-radius: 12rpx;
  326. margin: 0 -24rpx -24rpx;
  327. }
  328. .order-section .order-item .order-footer .courier-avatar.data-v-6cb840e8 {
  329. width: 80rpx;
  330. height: 80rpx;
  331. border-radius: 12rpx;
  332. margin-right: 20rpx;
  333. background: #fff;
  334. }
  335. .order-section .order-item .order-footer .delivery-info.data-v-6cb840e8 {
  336. flex: 1;
  337. display: flex;
  338. flex-direction: column;
  339. }
  340. .order-section .order-item .order-footer .delivery-info .status.data-v-6cb840e8 {
  341. font-size: 28rpx;
  342. color: #333;
  343. margin-bottom: 8rpx;
  344. font-weight: bold;
  345. }
  346. .order-section .order-item .order-footer .delivery-info .time.data-v-6cb840e8 {
  347. font-size: 26rpx;
  348. color: #999;
  349. }
  350. .function-list.data-v-6cb840e8 {
  351. margin: 20rpx 30rpx;
  352. background: #fff;
  353. border-radius: 20rpx;
  354. padding: 0 30rpx;
  355. }
  356. .function-list .function-item.data-v-6cb840e8 {
  357. display: flex;
  358. justify-content: space-between;
  359. align-items: center;
  360. padding: 30rpx 0;
  361. border-bottom: 1rpx solid #f5f5f5;
  362. }
  363. .function-list .function-item.data-v-6cb840e8:last-child {
  364. border-bottom: none;
  365. }
  366. .function-list .function-item .item-left.data-v-6cb840e8 {
  367. display: flex;
  368. align-items: center;
  369. }
  370. .function-list .function-item .item-left .icon.data-v-6cb840e8 {
  371. width: 40rpx;
  372. height: 40rpx;
  373. margin-right: 16rpx;
  374. }
  375. .function-list .function-item .item-left text.data-v-6cb840e8 {
  376. font-size: 28rpx;
  377. color: #333;
  378. }
  379. .function-list .function-item .arrow.data-v-6cb840e8 {
  380. color: #999;
  381. font-size: 24rpx;
  382. }
  383. .tab-bar.data-v-6cb840e8 {
  384. position: fixed;
  385. bottom: 0;
  386. left: 0;
  387. right: 0;
  388. height: 100rpx;
  389. background: #fff;
  390. display: flex;
  391. padding-bottom: env(safe-area-inset-bottom);
  392. border-top: 1rpx solid #f5f5f5;
  393. }
  394. .tab-bar .tab-item.data-v-6cb840e8 {
  395. flex: 1;
  396. display: flex;
  397. flex-direction: column;
  398. align-items: center;
  399. justify-content: center;
  400. padding: 10rpx 0;
  401. }
  402. .tab-bar .tab-item image.data-v-6cb840e8 {
  403. width: 48rpx;
  404. height: 48rpx;
  405. margin-bottom: 6rpx;
  406. }
  407. .tab-bar .tab-item text.data-v-6cb840e8 {
  408. font-size: 20rpx;
  409. color: #999;
  410. }
  411. .tab-bar .tab-item.active text.data-v-6cb840e8 {
  412. color: #ff6b35;
  413. }
  414. .user-cards.data-v-6cb840e8 {
  415. margin: -50rpx 30rpx 0;
  416. background: #fff;
  417. border-radius: 24rpx;
  418. padding: 30rpx;
  419. position: relative;
  420. z-index: 2;
  421. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  422. }
  423. .user-cards .user-info.data-v-6cb840e8 {
  424. display: flex;
  425. align-items: center;
  426. margin-bottom: 40rpx;
  427. }
  428. .user-cards .user-info .avatars.data-v-6cb840e8 {
  429. width: 110rpx;
  430. height: 110rpx;
  431. border-radius: 50%;
  432. margin-right: 24rpx;
  433. }
  434. .user-cards .info .name.data-v-6cb840e8 {
  435. font-size: 34rpx;
  436. font-weight: 600;
  437. color: #222;
  438. margin-bottom: 12rpx;
  439. display: block;
  440. }
  441. .btns.data-v-6cb840e8 {
  442. width: 100%;
  443. margin: 0 auto;
  444. margin-top: 30%;
  445. display: flex;
  446. flex-direction: column;
  447. justify-content: center;
  448. align-items: center;
  449. }
  450. .btns .uv-button.data-v-6cb840e8, .btns .btn.data-v-6cb840e8 {
  451. width: 100%;
  452. height: 100rpx;
  453. background: linear-gradient(90deg, #FFD36D 0%, #FFA800 100%);
  454. color: #fff;
  455. font-size: 36rpx;
  456. border-radius: 50rpx;
  457. font-weight: bold;
  458. display: flex;
  459. align-items: center;
  460. justify-content: center;
  461. box-shadow: 0 4rpx 16rpx rgba(255, 168, 0, 0.08);
  462. border: none;
  463. margin: 0 auto;
  464. }
  465. .btns text.data-v-6cb840e8 {
  466. margin-top: 20rpx;
  467. font-family: PingFang SC;
  468. font-weight: 400;
  469. font-size: 13px;
  470. line-height: 100%;
  471. letter-spacing: 0%;
  472. text-align: center;
  473. color: #a3a3a3;
  474. }
  475. .share-commission-card.data-v-6cb840e8 {
  476. width: 90%;
  477. margin: 32rpx auto 24rpx auto;
  478. height: 90rpx;
  479. background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%);
  480. border-radius: 24rpx;
  481. display: flex;
  482. align-items: center;
  483. justify-content: center;
  484. box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
  485. cursor: pointer;
  486. }
  487. .share-commission-text.data-v-6cb840e8 {
  488. color: #fff;
  489. font-size: 32rpx;
  490. font-weight: bold;
  491. letter-spacing: 2rpx;
  492. }
  493. .manage-list.data-v-6cb840e8 {
  494. margin-bottom: 20rpx;
  495. }