爱简收旧衣按件回收前端代码仓库
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.

430 lines
11 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. .pickup-container.data-v-c732bc46 {
  27. min-height: 100vh;
  28. background: #f8f8f8;
  29. }
  30. .nav-bar.data-v-c732bc46 {
  31. position: fixed;
  32. top: 0;
  33. left: 0;
  34. right: 0;
  35. z-index: 999;
  36. display: flex;
  37. align-items: center;
  38. background: #fff;
  39. padding: 0 30rpx;
  40. }
  41. .nav-bar .back.data-v-c732bc46 {
  42. padding: 20rpx;
  43. margin-left: -20rpx;
  44. }
  45. .nav-bar .title.data-v-c732bc46 {
  46. flex: 1;
  47. text-align: center;
  48. font-size: 34rpx;
  49. font-weight: 500;
  50. color: #222;
  51. }
  52. .nav-bar .right-btns.data-v-c732bc46 {
  53. display: flex;
  54. gap: 30rpx;
  55. }
  56. .nav-bar .right-btns .more.data-v-c732bc46, .nav-bar .right-btns .scan.data-v-c732bc46 {
  57. font-size: 40rpx;
  58. color: #333;
  59. }
  60. .content.data-v-c732bc46 {
  61. padding: 20rpx;
  62. }
  63. .card.data-v-c732bc46 {
  64. background: linear-gradient(to bottom, #fff3db 0%, #fffefb 40%);
  65. border-radius: 20rpx;
  66. margin-bottom: 20rpx;
  67. overflow: hidden;
  68. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  69. }
  70. .process-card.data-v-c732bc46 {
  71. background: #fff;
  72. border-radius: 24rpx;
  73. box-shadow: 0 8rpx 32rpx rgba(255, 149, 0, 0.08);
  74. padding: 0 0 20rpx 0;
  75. }
  76. .process-steps.data-v-c732bc46 {
  77. display: flex;
  78. justify-content: space-between;
  79. align-items: flex-start;
  80. padding: 0 30rpx 30rpx;
  81. }
  82. .process-steps .process-step-card.data-v-c732bc46 {
  83. background: #FFF8ED;
  84. border-radius: 24rpx;
  85. min-width: 140rpx;
  86. min-height: 180rpx;
  87. display: flex;
  88. flex-direction: column;
  89. align-items: center;
  90. margin-right: 24rpx;
  91. position: relative;
  92. }
  93. .process-steps .process-step-card .step-icon.data-v-c732bc46 {
  94. width: 64rpx;
  95. height: 64rpx;
  96. margin: 24rpx 0 18rpx 0;
  97. }
  98. .process-steps .process-step-card .step-bottom-bar.data-v-c732bc46 {
  99. position: absolute;
  100. left: 0;
  101. right: 0;
  102. bottom: 0;
  103. height: 56rpx;
  104. background: #FFB74D;
  105. border-radius: 0 0 24rpx 24rpx;
  106. display: flex;
  107. align-items: center;
  108. justify-content: center;
  109. }
  110. .process-steps .process-step-card .step-bottom-bar .step-num-bar.data-v-c732bc46 {
  111. display: flex;
  112. flex-direction: row;
  113. align-items: center;
  114. margin-top: 8rpx;
  115. }
  116. .process-steps .process-step-card .step-bottom-bar .step-num-bar .num-main.data-v-c732bc46 {
  117. width: 32rpx;
  118. height: 32rpx;
  119. border-radius: 50%;
  120. background: #fff;
  121. color: #FFB74D;
  122. font-size: 22rpx;
  123. display: flex;
  124. align-items: center;
  125. justify-content: center;
  126. font-weight: 600;
  127. margin-right: 10rpx;
  128. }
  129. .process-steps .process-step-card .step-bottom-bar .step-num-bar .text-main.data-v-c732bc46 {
  130. color: #fff;
  131. font-size: 26rpx;
  132. font-weight: 500;
  133. }
  134. .process-steps .process-step-card .step-label-gray.data-v-c732bc46 {
  135. position: absolute;
  136. left: 0;
  137. right: 0;
  138. bottom: 0;
  139. height: 56rpx;
  140. background: #FFF8ED;
  141. border-radius: 0 0 24rpx 24rpx;
  142. display: flex;
  143. align-items: center;
  144. justify-content: center;
  145. }
  146. .process-steps .process-step-card .step-label-gray .num-gray.data-v-c732bc46 {
  147. width: 32rpx;
  148. height: 32rpx;
  149. border-radius: 50%;
  150. background: #eee;
  151. color: #bbb;
  152. font-size: 22rpx;
  153. display: flex;
  154. align-items: center;
  155. justify-content: center;
  156. font-weight: 600;
  157. margin-right: 10rpx;
  158. }
  159. .process-steps .process-step-card .step-label-gray .text-gray.data-v-c732bc46 {
  160. color: #bbb;
  161. font-size: 26rpx;
  162. font-weight: 500;
  163. }
  164. .process-steps .process-step-card.data-v-c732bc46:last-child {
  165. margin-right: 0;
  166. }
  167. .divider.data-v-c732bc46 {
  168. height: 1rpx;
  169. background: rgba(0, 0, 0, 0.05);
  170. margin: 0 30rpx;
  171. }
  172. .pickup-info.data-v-c732bc46 {
  173. padding: 0 30rpx;
  174. }
  175. .pickup-info .info-item.data-v-c732bc46 {
  176. padding: 30rpx 0;
  177. border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  178. }
  179. .pickup-info .info-item.data-v-c732bc46:last-child {
  180. border-bottom: none;
  181. }
  182. .pickup-info .info-item .label.data-v-c732bc46 {
  183. font-size: 28rpx;
  184. color: #333;
  185. margin-bottom: 16rpx;
  186. display: block;
  187. }
  188. .pickup-info .info-item .value.data-v-c732bc46 {
  189. display: flex;
  190. justify-content: space-between;
  191. align-items: center;
  192. }
  193. .pickup-info .info-item .value .text.data-v-c732bc46 {
  194. flex: 1;
  195. font-size: 28rpx;
  196. color: #333;
  197. overflow: hidden;
  198. text-overflow: ellipsis;
  199. white-space: nowrap;
  200. }
  201. .pickup-info .info-item .value .text.placeholder.data-v-c732bc46 {
  202. color: #ccc;
  203. }
  204. .pickup-info .info-item .value .arrow.data-v-c732bc46 {
  205. color: #999;
  206. font-size: 28rpx;
  207. margin-left: 10rpx;
  208. }
  209. .order-card.data-v-c732bc46 {
  210. background: #fff;
  211. border-radius: 24rpx;
  212. box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
  213. margin-bottom: 20rpx;
  214. }
  215. .order-card .order-items.data-v-c732bc46 {
  216. padding: 0 30rpx;
  217. }
  218. .order-card .order-items .order-item.data-v-c732bc46 {
  219. display: flex;
  220. align-items: center;
  221. padding: 30rpx 0;
  222. border-bottom: 1rpx solid #f5f5f5;
  223. }
  224. .order-card .order-items .order-item.data-v-c732bc46:last-child {
  225. border-bottom: none;
  226. }
  227. .order-card .order-items .order-item image.data-v-c732bc46 {
  228. width: 80rpx;
  229. height: 80rpx;
  230. margin-right: 20rpx;
  231. }
  232. .order-card .order-items .order-item .item-info.data-v-c732bc46 {
  233. flex: 1;
  234. }
  235. .order-card .order-items .order-item .item-info .name.data-v-c732bc46 {
  236. font-size: 30rpx;
  237. color: #333;
  238. font-weight: 500;
  239. }
  240. .order-card .order-items .order-item .item-info .desc.data-v-c732bc46 {
  241. font-size: 24rpx;
  242. color: #999;
  243. margin: 4rpx 0 8rpx 0;
  244. }
  245. .order-card .order-items .order-item .item-info .price-row.data-v-c732bc46 {
  246. display: flex;
  247. align-items: center;
  248. }
  249. .order-card .order-items .order-item .item-info .price-row .price.data-v-c732bc46 {
  250. color: #FF9500;
  251. font-size: 26rpx;
  252. margin-right: 10rpx;
  253. }
  254. .order-card .order-items .order-item .item-info .price-row .count.data-v-c732bc46 {
  255. color: #999;
  256. font-size: 24rpx;
  257. margin-right: 10rpx;
  258. }
  259. .order-card .order-items .order-item .item-info .price-row .amount.data-v-c732bc46 {
  260. color: #333;
  261. font-size: 28rpx;
  262. margin-left: auto;
  263. }
  264. .order-card .expand-btn.data-v-c732bc46 {
  265. text-align: center;
  266. color: #999;
  267. font-size: 24rpx;
  268. padding: 10rpx 0;
  269. }
  270. .order-card .expand-btn .arrow.data-v-c732bc46 {
  271. font-size: 20rpx;
  272. }
  273. .agreement-bar.data-v-c732bc46 {
  274. display: flex;
  275. align-items: center;
  276. background: #fffbe6;
  277. padding: 20rpx 30rpx;
  278. font-size: 24rpx;
  279. }
  280. .agreement-bar .checkbox.data-v-c732bc46 {
  281. width: 32rpx;
  282. height: 32rpx;
  283. border-radius: 50%;
  284. border: 2rpx solid #FFB74D;
  285. margin-right: 10rpx;
  286. display: flex;
  287. align-items: center;
  288. justify-content: center;
  289. background: #fff;
  290. }
  291. .agreement-bar .checkbox.active.data-v-c732bc46 {
  292. background: #FFB74D;
  293. color: #fff;
  294. }
  295. .agreement-bar .link.data-v-c732bc46 {
  296. color: #FFB74D;
  297. }
  298. .bottom-bar.data-v-c732bc46 {
  299. display: flex;
  300. align-items: center;
  301. justify-content: space-between;
  302. background: #fff;
  303. padding: 20rpx 30rpx calc(40rpx + env(safe-area-inset-bottom));
  304. }
  305. .bottom-bar .summary.data-v-c732bc46 {
  306. color: #666;
  307. font-size: 26rpx;
  308. }
  309. .bottom-bar .amount.data-v-c732bc46 {
  310. color: #FF9500;
  311. font-size: 32rpx;
  312. font-weight: bold;
  313. margin-left: 10rpx;
  314. }
  315. .bottom-bar .main-btn.data-v-c732bc46 {
  316. background: #FFB74D;
  317. color: #fff;
  318. font-size: 28rpx;
  319. border-radius: 40rpx;
  320. padding: 0 40rpx;
  321. width: 60%;
  322. height: 80rpx;
  323. display: flex;
  324. justify-content: center;
  325. }
  326. .bottom-bar .main-btn[disabled].data-v-c732bc46 {
  327. opacity: 0.5;
  328. }
  329. .order-desc.data-v-c732bc46 {
  330. color: #999;
  331. font-size: 22rpx;
  332. padding: 0 30rpx 20rpx 30rpx;
  333. line-height: 1.7;
  334. }
  335. .time-picker.data-v-c732bc46 {
  336. position: fixed;
  337. left: 0;
  338. right: 0;
  339. top: 0;
  340. bottom: 0;
  341. z-index: 1000;
  342. }
  343. .time-picker .mask.data-v-c732bc46 {
  344. position: absolute;
  345. left: 0;
  346. right: 0;
  347. top: 0;
  348. bottom: 0;
  349. background: rgba(0, 0, 0, 0.5);
  350. }
  351. .time-picker .picker-content.data-v-c732bc46 {
  352. position: absolute;
  353. left: 0;
  354. right: 0;
  355. bottom: 0;
  356. background: #fff;
  357. border-radius: 20rpx 20rpx 0 0;
  358. padding-bottom: env(safe-area-inset-bottom);
  359. }
  360. .time-picker .picker-content .picker-header.data-v-c732bc46 {
  361. padding: 30rpx 0 0 0;
  362. display: flex;
  363. align-items: center;
  364. border-bottom: 1rpx solid #eee;
  365. }
  366. .time-picker .picker-content .picker-header .reset.data-v-c732bc46 {
  367. color: #bbb;
  368. font-size: 28rpx;
  369. margin-left: 30rpx;
  370. }
  371. .time-picker .picker-content .picker-header .title.data-v-c732bc46 {
  372. flex: 1;
  373. text-align: center;
  374. font-size: 32rpx;
  375. font-weight: 500;
  376. color: #222;
  377. margin-right: 60rpx;
  378. }
  379. .time-picker .picker-content .picker-section.data-v-c732bc46 {
  380. padding: 30rpx 30rpx 0 30rpx;
  381. }
  382. .time-picker .picker-content .picker-section .section-title.data-v-c732bc46 {
  383. font-size: 28rpx;
  384. color: #222;
  385. margin-bottom: 20rpx;
  386. }
  387. .time-picker .picker-content .picker-section .date-btns.data-v-c732bc46, .time-picker .picker-content .picker-section .time-btns.data-v-c732bc46 {
  388. display: flex;
  389. flex-wrap: wrap;
  390. gap: 20rpx 20rpx;
  391. }
  392. .time-picker .picker-content .picker-section .date-btn.data-v-c732bc46, .time-picker .picker-content .picker-section .time-btn.data-v-c732bc46 {
  393. width: 200rpx;
  394. height: 70rpx;
  395. background: #f5f5f5;
  396. color: #999;
  397. border-radius: 18rpx;
  398. display: flex;
  399. align-items: center;
  400. justify-content: center;
  401. font-size: 28rpx;
  402. border: 2rpx solid transparent;
  403. margin-bottom: 10rpx;
  404. }
  405. .time-picker .picker-content .picker-section .date-btn.active.data-v-c732bc46, .time-picker .picker-content .picker-section .time-btn.active.data-v-c732bc46 {
  406. background: #fff;
  407. color: #FFB74D;
  408. border: 2rpx solid #FFB74D;
  409. font-weight: 500;
  410. }
  411. .time-picker .picker-content .confirm-btn.data-v-c732bc46 {
  412. margin: 40rpx 30rpx 30rpx 30rpx;
  413. height: 90rpx;
  414. background: linear-gradient(90deg, #FFB74D 0%, #FF9500 100%);
  415. color: #fff;
  416. font-size: 32rpx;
  417. border-radius: 45rpx;
  418. display: flex;
  419. align-items: center;
  420. justify-content: center;
  421. box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.08);
  422. }
  423. .process-title.data-v-c732bc46 {
  424. font-size: 32rpx;
  425. font-weight: bold;
  426. background: linear-gradient(to bottom, #fff3db 0%, #fffefb 40%);
  427. color: #222;
  428. text-align: left;
  429. padding: 36rpx 0 24rpx 30rpx;
  430. letter-spacing: 1rpx;
  431. }