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

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