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

359 lines
8.4 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. .inspect-container.data-v-e802c881 {
  27. min-height: 100vh;
  28. background: #f8f8f8;
  29. display: flex;
  30. flex-direction: column;
  31. }
  32. .nav-bar.data-v-e802c881 {
  33. display: flex;
  34. align-items: center;
  35. height: calc(150rpx + var(--status-bar-height));
  36. padding: 0 32rpx;
  37. padding-top: var(--status-bar-height);
  38. background: #fff;
  39. position: fixed;
  40. top: 0;
  41. left: 0;
  42. right: 0;
  43. z-index: 999;
  44. box-sizing: border-box;
  45. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  46. }
  47. .nav-bar .back.data-v-e802c881 {
  48. padding: 20rpx;
  49. margin-left: -20rpx;
  50. }
  51. .nav-bar .nav-title.data-v-e802c881 {
  52. flex: 1;
  53. text-align: center;
  54. font-size: 32rpx;
  55. font-weight: 500;
  56. color: #222;
  57. }
  58. .nav-bar .nav-icons.data-v-e802c881 {
  59. display: flex;
  60. align-items: center;
  61. gap: 12px;
  62. }
  63. .main-content.data-v-e802c881 {
  64. margin-top: calc(150rpx + var(--status-bar-height));
  65. display: flex;
  66. background: none;
  67. }
  68. .category-nav.data-v-e802c881 {
  69. width: 80px;
  70. background: #fff;
  71. border-radius: 24px 0 0 24px;
  72. padding: 24px 0;
  73. display: flex;
  74. flex-direction: column;
  75. align-items: center;
  76. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  77. height: 100%;
  78. overflow-y: auto;
  79. position: relative;
  80. z-index: 2;
  81. }
  82. .category-nav .category-item.data-v-e802c881 {
  83. width: 64px;
  84. height: 44px;
  85. border-radius: 16px 0 0 16px;
  86. display: flex;
  87. align-items: center;
  88. justify-content: flex-start;
  89. font-size: 16px;
  90. color: #222;
  91. margin-bottom: 12px;
  92. background: #fff;
  93. position: relative;
  94. transition: background 0.2s, color 0.2s, font-weight 0.2s;
  95. padding-left: 12px;
  96. }
  97. .category-nav .category-item.active.data-v-e802c881 {
  98. background: linear-gradient(90deg, #fff7e6 80%, #fff 100%);
  99. color: #ffb400;
  100. font-weight: bold;
  101. }
  102. .category-nav .category-item.active.data-v-e802c881::before {
  103. content: "";
  104. position: absolute;
  105. left: 0;
  106. top: 30%;
  107. height: 40%;
  108. width: 2px;
  109. border-radius: 4px;
  110. background: #ffb400;
  111. bottom: auto;
  112. }
  113. .category-nav .category-item .category-badge.data-v-e802c881 {
  114. position: absolute;
  115. top: 6px;
  116. right: 10px;
  117. background: #ff4d4f;
  118. color: #fff;
  119. font-size: 12px;
  120. border-radius: 50%;
  121. width: 18px;
  122. height: 18px;
  123. display: flex;
  124. align-items: center;
  125. justify-content: center;
  126. }
  127. .goods-list.data-v-e802c881 {
  128. flex: 1;
  129. height: calc(100vh - 110rpx - var(--status-bar-height) - 80px);
  130. padding: 0 0 0 16px;
  131. overflow-y: auto;
  132. background: none;
  133. }
  134. .goods-card.data-v-e802c881 {
  135. background: #fff;
  136. border-radius: 24px;
  137. box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  138. margin-bottom: 18px;
  139. padding: 18px 18px 0 18px;
  140. }
  141. .goods-card.unrecycle-card.data-v-e802c881 {
  142. background: #fff;
  143. border-radius: 24px;
  144. box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  145. margin-bottom: 18px;
  146. padding: 18px 18px 0 18px;
  147. }
  148. .goods-card.unrecycle-card .goods-header.data-v-e802c881 {
  149. display: flex;
  150. align-items: center;
  151. margin-bottom: 12px;
  152. }
  153. .goods-card.unrecycle-card .goods-header .goods-img.data-v-e802c881 {
  154. width: 56px;
  155. height: 56px;
  156. border-radius: 16px;
  157. margin-right: 12px;
  158. background: #f8f8f8;
  159. object-fit: contain;
  160. }
  161. .goods-card.unrecycle-card .goods-header .goods-info.data-v-e802c881 {
  162. flex: 1;
  163. display: flex;
  164. flex-direction: column;
  165. justify-content: center;
  166. min-width: 0;
  167. }
  168. .goods-card.unrecycle-card .goods-header .goods-info .goods-title-row.data-v-e802c881 {
  169. display: flex;
  170. align-items: baseline;
  171. }
  172. .goods-card.unrecycle-card .goods-header .goods-info .goods-title-row .goods-name.data-v-e802c881 {
  173. font-size: 16px;
  174. font-weight: bold;
  175. color: #222;
  176. margin-right: 8px;
  177. }
  178. .goods-card.unrecycle-card .goods-header .goods-info .goods-title-row .goods-price.data-v-e802c881 {
  179. font-size: 15px;
  180. color: #ffb400;
  181. font-weight: bold;
  182. }
  183. .goods-card.unrecycle-card .goods-header .goods-info .goods-title-row .goods-price .goods-unit.data-v-e802c881 {
  184. font-size: 13px;
  185. color: #bbb;
  186. }
  187. .goods-card.unrecycle-card .goods-header .goods-info .goods-desc.data-v-e802c881 {
  188. font-size: 13px;
  189. color: #999;
  190. margin-top: 4px;
  191. }
  192. .goods-card.unrecycle-card .goods-row.data-v-e802c881 {
  193. display: flex;
  194. align-items: center;
  195. margin-bottom: 12px;
  196. }
  197. .goods-card.unrecycle-card .goods-row .row-label.data-v-e802c881 {
  198. font-size: 14px;
  199. color: #888;
  200. width: 80px;
  201. flex-shrink: 0;
  202. }
  203. .goods-card.unrecycle-card .goods-row .num-ctrl.data-v-e802c881 {
  204. display: flex;
  205. align-items: center;
  206. }
  207. .goods-card.unrecycle-card .goods-row .num-ctrl .num-btn.data-v-e802c881 {
  208. width: 32px;
  209. height: 32px;
  210. border-radius: 50%;
  211. background: #f6f6f6;
  212. color: #bbb;
  213. font-size: 20px;
  214. border: none;
  215. display: flex;
  216. align-items: center;
  217. justify-content: center;
  218. margin: 0 6px;
  219. }
  220. .goods-card.unrecycle-card .goods-row .num-ctrl .num.data-v-e802c881 {
  221. font-size: 16px;
  222. color: #222;
  223. width: 28px;
  224. text-align: center;
  225. }
  226. .goods-card.unrecycle-card .goods-row .amount-input.data-v-e802c881 {
  227. flex: 1;
  228. height: 32px;
  229. border-radius: 12px;
  230. background: #f6f6f6;
  231. border: none;
  232. font-size: 15px;
  233. color: #222;
  234. padding-left: 10px;
  235. margin-left: 8px;
  236. }
  237. .goods-header.data-v-e802c881 {
  238. display: flex;
  239. align-items: center;
  240. margin-bottom: 12px;
  241. }
  242. .goods-header .goods-img.data-v-e802c881 {
  243. width: 56px;
  244. height: 56px;
  245. border-radius: 16px;
  246. margin-right: 12px;
  247. background: #f8f8f8;
  248. object-fit: contain;
  249. }
  250. .goods-header .goods-info.data-v-e802c881 {
  251. flex: 1;
  252. display: flex;
  253. flex-direction: column;
  254. justify-content: center;
  255. min-width: 0;
  256. }
  257. .goods-header .goods-info .goods-title-row.data-v-e802c881 {
  258. display: flex;
  259. align-items: baseline;
  260. }
  261. .goods-header .goods-info .goods-title-row .goods-name.data-v-e802c881 {
  262. font-size: 16px;
  263. font-weight: bold;
  264. color: #222;
  265. margin-right: 8px;
  266. }
  267. .goods-header .goods-info .goods-title-row .goods-price.data-v-e802c881 {
  268. font-size: 15px;
  269. color: #ffb400;
  270. font-weight: bold;
  271. }
  272. .goods-header .goods-info .goods-title-row .goods-price .goods-unit.data-v-e802c881 {
  273. font-size: 13px;
  274. color: #bbb;
  275. }
  276. .goods-header .goods-info .goods-desc.data-v-e802c881 {
  277. font-size: 13px;
  278. color: #999;
  279. margin-top: 4px;
  280. }
  281. .goods-row.data-v-e802c881 {
  282. display: flex;
  283. align-items: center;
  284. margin-bottom: 12px;
  285. }
  286. .goods-row .row-label.data-v-e802c881 {
  287. font-size: 14px;
  288. color: #888;
  289. width: 80px;
  290. flex-shrink: 0;
  291. }
  292. .goods-row .num-ctrl.data-v-e802c881 {
  293. display: flex;
  294. align-items: center;
  295. }
  296. .goods-row .num-ctrl .num-btn.data-v-e802c881 {
  297. width: 32px;
  298. height: 32px;
  299. border-radius: 50%;
  300. background: #f6f6f6;
  301. color: #bbb;
  302. font-size: 20px;
  303. border: none;
  304. display: flex;
  305. align-items: center;
  306. justify-content: center;
  307. margin: 0 6px;
  308. }
  309. .goods-row .num-ctrl .num.data-v-e802c881 {
  310. font-size: 16px;
  311. color: #222;
  312. width: 28px;
  313. text-align: center;
  314. }
  315. .goods-row .amount-input.data-v-e802c881 {
  316. flex: 1;
  317. height: 32px;
  318. border-radius: 12px;
  319. background: #f6f6f6;
  320. border: none;
  321. font-size: 15px;
  322. color: #222;
  323. padding-left: 10px;
  324. margin-left: 8px;
  325. }
  326. .footer-btns.data-v-e802c881 {
  327. position: fixed;
  328. left: 0;
  329. right: 0;
  330. bottom: 0;
  331. background: #fff;
  332. display: flex;
  333. gap: 16px;
  334. padding: 12px 16px 24px 16px;
  335. z-index: 101;
  336. }
  337. .footer-btns .btn-outline.data-v-e802c881 {
  338. flex: 1;
  339. height: 40px;
  340. border-radius: 16px;
  341. border: 1px solid #ffe09a;
  342. color: #ffb400;
  343. background: #fff0d2;
  344. font-size: 15px;
  345. font-weight: 500;
  346. box-shadow: none;
  347. padding: 0 18px;
  348. }
  349. .footer-btns .btn-main.data-v-e802c881 {
  350. flex: 1;
  351. height: 40px;
  352. border-radius: 16px;
  353. background: linear-gradient(90deg, #ffd01e 0%, #ffac04 100%);
  354. color: #fff;
  355. border: none;
  356. font-size: 15px;
  357. font-weight: 500;
  358. box-shadow: none;
  359. padding: 0 18px;
  360. }