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

469 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. .container.data-v-24407015 {
  27. min-height: 100vh;
  28. background-color: #f8f8f8;
  29. display: flex;
  30. flex-direction: column;
  31. padding-bottom: calc(var(--window-bottom) + 70px);
  32. }
  33. .safe-area.data-v-24407015 {
  34. padding-bottom: constant(safe-area-inset-bottom);
  35. padding-bottom: env(safe-area-inset-bottom);
  36. }
  37. .banner.data-v-24407015 {
  38. width: 100%;
  39. height: 380rpx;
  40. position: relative;
  41. overflow: hidden;
  42. border-radius: 0 0 30rpx 30rpx;
  43. }
  44. .banner image.data-v-24407015 {
  45. width: 100%;
  46. height: 100%;
  47. }
  48. .content.data-v-24407015 {
  49. width: 90%;
  50. margin: -70rpx auto 0;
  51. position: relative;
  52. z-index: 3;
  53. padding-bottom: 20rpx;
  54. }
  55. .Xiadan-section.data-v-24407015 {
  56. display: flex;
  57. align-items: center;
  58. margin-bottom: 20rpx;
  59. background: linear-gradient(to bottom, #fff3db 0%, #fffefb 50%);
  60. }
  61. .Xiadan-section image.data-v-24407015 {
  62. width: 80rpx;
  63. height: 80rpx;
  64. }
  65. .Xiadan-section .left-text.data-v-24407015 {
  66. font-family: PingFang SC;
  67. font-weight: 400;
  68. font-size: 12px;
  69. line-height: 140%;
  70. letter-spacing: 0%;
  71. }
  72. .Xiadan-section .right.data-v-24407015 {
  73. display: flex;
  74. box-sizing: border-box;
  75. align-items: center;
  76. justify-content: center;
  77. background-color: #fff0d2;
  78. color: #da7143;
  79. font-size: 24rpx;
  80. border: 1px solid #da7143;
  81. border-radius: 10rpx;
  82. width: 25%;
  83. }
  84. .Xiadan-section .right image.data-v-24407015 {
  85. width: 40rpx;
  86. height: 40rpx;
  87. }
  88. .section-header.data-v-24407015 {
  89. display: flex;
  90. align-items: center;
  91. margin-bottom: 20rpx;
  92. }
  93. .section-header .title.data-v-24407015 {
  94. font-size: 32rpx;
  95. font-weight: bold;
  96. color: #333;
  97. }
  98. .section-header .more.data-v-24407015 {
  99. display: flex;
  100. flex-direction: row-reverse;
  101. align-items: center;
  102. color: #999;
  103. font-size: 24rpx;
  104. flex-grow: 2;
  105. }
  106. .process-section.data-v-24407015 {
  107. background: #fff;
  108. border-radius: 50rpx;
  109. padding: 30rpx;
  110. margin-bottom: 20rpx;
  111. background: linear-gradient(to bottom, #fff5e1 0%, #fffefb 30%);
  112. }
  113. .process-section .contact-service.data-v-24407015 {
  114. display: flex;
  115. align-items: center;
  116. font-size: 24rpx;
  117. color: #666;
  118. border: 1px solid #da7143;
  119. background-color: #fff0d2;
  120. }
  121. .process-section .contact-service .service-icon.data-v-24407015 {
  122. width: 32rpx;
  123. height: 32rpx;
  124. margin-right: 8rpx;
  125. }
  126. .process-section .process-grid.data-v-24407015 {
  127. display: grid;
  128. grid-template-columns: repeat(4, 1fr);
  129. gap: 20rpx;
  130. margin: 30rpx 0;
  131. border: none;
  132. }
  133. .process-section .process-item.data-v-24407015 {
  134. position: relative;
  135. display: flex;
  136. flex-direction: column;
  137. align-items: center;
  138. background-color: #fff8ea;
  139. }
  140. .process-section .process-item .process-icon.data-v-24407015 {
  141. width: 80rpx;
  142. height: 80rpx;
  143. margin-bottom: 10rpx;
  144. }
  145. .process-section .process-item .process-text.data-v-24407015 {
  146. font-size: 24rpx;
  147. color: #333;
  148. }
  149. .process-section .process-item .process-number.data-v-24407015 {
  150. position: absolute;
  151. top: -10rpx;
  152. left: 50%;
  153. transform: translateX(-50%);
  154. font-size: 24rpx;
  155. color: #999;
  156. }
  157. .process-section .submit-btn.data-v-24407015 {
  158. background: linear-gradient(to right, #ffd01e, #ff8917);
  159. border-radius: 70rpx;
  160. padding: 20rpx;
  161. text-align: center;
  162. position: relative;
  163. border: none;
  164. display: flex;
  165. flex-direction: column;
  166. overflow: visible;
  167. }
  168. .process-section .submit-btn text.data-v-24407015 {
  169. color: #ffffff;
  170. font-size: 32rpx;
  171. font-weight: bold;
  172. line-height: 40rpx;
  173. }
  174. .process-section .submit-btn .btn-desc.data-v-24407015 {
  175. font-size: 24rpx;
  176. font-weight: normal;
  177. }
  178. .process-section .submit-btn .arrow-icon.data-v-24407015 {
  179. position: absolute;
  180. right: 10rpx;
  181. top: 10%;
  182. transform: translateY(-50%);
  183. width: 40rpx;
  184. height: 40rpx;
  185. }
  186. .process-section .submit-btn .arrow-icon-left.data-v-24407015 {
  187. position: absolute;
  188. left: 1rpx;
  189. top: 90%;
  190. transform: translateY(-50%);
  191. width: 40rpx;
  192. height: 40rpx;
  193. }
  194. .process-section .submit-btn.data-v-24407015::after {
  195. border: none !important;
  196. }
  197. .city-section.data-v-24407015 {
  198. background: #fff;
  199. border-radius: 20rpx;
  200. padding: 30rpx;
  201. margin-bottom: 20rpx;
  202. }
  203. .city-section .city-header.data-v-24407015 {
  204. display: flex;
  205. justify-content: space-between;
  206. align-items: center;
  207. font-size: 28rpx;
  208. color: #333;
  209. margin-bottom: 10rpx;
  210. }
  211. .city-section .city-list.data-v-24407015 {
  212. font-size: 24rpx;
  213. color: #999;
  214. }
  215. .price-section.data-v-24407015 {
  216. background: #f0f9eb;
  217. border-radius: 20rpx;
  218. padding: 30rpx;
  219. margin-bottom: 20rpx;
  220. background-color: #fffefb;
  221. background: linear-gradient(to bottom, #fff3db 0%, #fffefb 5%);
  222. }
  223. .price-section .section-header.data-v-24407015 {
  224. margin-bottom: 40rpx;
  225. }
  226. .price-section .price-grid.data-v-24407015 {
  227. display: grid;
  228. grid-template-columns: repeat(2, 1fr);
  229. gap: 20rpx;
  230. }
  231. .price-section .price-item.data-v-24407015 {
  232. display: flex;
  233. flex-direction: column;
  234. align-items: center;
  235. background: #fff;
  236. border-radius: 16rpx;
  237. padding: 30rpx;
  238. background-color: #fff8ea;
  239. }
  240. .price-section .price-item .item-icon.data-v-24407015 {
  241. width: 80rpx;
  242. height: 80rpx;
  243. margin-bottom: 10rpx;
  244. }
  245. .price-section .price-item .item-icon.placeholder.data-v-24407015 {
  246. width: 80rpx;
  247. height: 80rpx;
  248. margin-bottom: 10rpx;
  249. background: #f5f5f5;
  250. border-radius: 16rpx;
  251. }
  252. .price-section .price-item .item-name.data-v-24407015 {
  253. font-size: 26rpx;
  254. color: #333;
  255. margin-bottom: 6rpx;
  256. }
  257. .price-section .price-item .item-price.data-v-24407015 {
  258. font-family: PingFang SC;
  259. font-weight: 400;
  260. font-size: 24rpx;
  261. line-height: 140%;
  262. letter-spacing: 0%;
  263. text-align: center;
  264. }
  265. .price-section .price-item .item-price .item-price-right.data-v-24407015 {
  266. text-align: center;
  267. font-size: 24rpx;
  268. color: #666;
  269. line-height: 140%;
  270. letter-spacing: 0%;
  271. }
  272. .recent-section.data-v-24407015 {
  273. background: #f0f9eb;
  274. border-radius: 20rpx;
  275. padding: 30rpx;
  276. margin-bottom: 20rpx;
  277. background-color: #fffefb;
  278. background: linear-gradient(to bottom, #e8ffe0 0%, #fffefb 15%);
  279. }
  280. .recent-section .records-grid.data-v-24407015 {
  281. display: grid;
  282. grid-template-columns: repeat(3, 1fr);
  283. gap: 20rpx;
  284. }
  285. .recent-section .record-item.data-v-24407015 {
  286. display: flex;
  287. flex-direction: column;
  288. align-items: center;
  289. background: linear-gradient(to top, #e8ffe0 0%, #fffefb 100%);
  290. border-radius: 16rpx;
  291. padding: 10rpx;
  292. background-color: #fff8ea;
  293. }
  294. .recent-section .record-item image.data-v-24407015 {
  295. width: 60rpx;
  296. height: 60rpx;
  297. }
  298. .recent-section .record-item .location.data-v-24407015 {
  299. font-size: 28rpx;
  300. color: #333;
  301. font-weight: bold;
  302. }
  303. .recent-section .record-item .amount.data-v-24407015 {
  304. font-size: 30rpx;
  305. color: #13ac47;
  306. font-weight: bold;
  307. margin: 6rpx 0;
  308. }
  309. .recent-section .record-item .user-id.data-v-24407015 {
  310. font-family: PingFang SC;
  311. font-weight: 500;
  312. font-size: 24rpx;
  313. line-height: 140%;
  314. letter-spacing: 0%;
  315. text-align: center;
  316. color: #183c5c;
  317. }
  318. .recent-section .record-item .user-id-f.data-v-24407015 {
  319. font-family: PingFang SC;
  320. font-weight: 400;
  321. font-size: 22rpx;
  322. line-height: 140%;
  323. letter-spacing: 0%;
  324. text-align: center;
  325. color: #9b9b9b;
  326. }
  327. .destination-section.data-v-24407015 {
  328. border-radius: 20rpx;
  329. padding: 30rpx;
  330. margin-bottom: 20rpx;
  331. background: linear-gradient(to bottom, #f2f0fc 0%, #fffefb 10%);
  332. padding-bottom: calc(var(--window-bottom) + 60px);
  333. }
  334. .destination-section .destination-grid.data-v-24407015 {
  335. display: grid;
  336. grid-template-columns: repeat(2, 1fr);
  337. gap: 20rpx;
  338. }
  339. .destination-section .destination-item.data-v-24407015 {
  340. display: flex;
  341. align-items: center;
  342. border-radius: 16rpx;
  343. padding: 20rpx;
  344. }
  345. .destination-section .destination-item .dest-icon.data-v-24407015 {
  346. width: 60rpx;
  347. height: 60rpx;
  348. margin-right: 16rpx;
  349. }
  350. .destination-section .destination-item .dest-info.data-v-24407015 {
  351. flex: 1;
  352. }
  353. .destination-section .destination-item .dest-info .dest-title.data-v-24407015 {
  354. font-size: 26rpx;
  355. color: #333;
  356. margin-bottom: 4rpx;
  357. }
  358. .destination-section .destination-item .dest-info .dest-desc.data-v-24407015 {
  359. font-size: 22rpx;
  360. color: #999;
  361. }
  362. .destination-item1.data-v-24407015 {
  363. background: linear-gradient(to top, #ffebeb, #fffefb);
  364. }
  365. .destination-item2.data-v-24407015 {
  366. background: linear-gradient(to top, #ebf8ff, #fffefb);
  367. }
  368. .destination-item3.data-v-24407015 {
  369. background: linear-gradient(to top, #ebedff, #fffefb);
  370. }
  371. .destination-item4.data-v-24407015 {
  372. background: linear-gradient(to top, #ebfff2, #fffefb);
  373. }
  374. .about-section.data-v-24407015 {
  375. background: linear-gradient(to bottom, #fff3db 0%, #fffefb 30%);
  376. border-radius: 20rpx;
  377. padding: 30rpx;
  378. display: flex;
  379. justify-content: space-between;
  380. flex-direction: column;
  381. }
  382. .about-section .about-footer.data-v-24407015 {
  383. display: flex;
  384. flex-direction: row;
  385. align-items: center;
  386. justify-content: center;
  387. }
  388. .about-section .about-header.data-v-24407015 {
  389. display: flex;
  390. align-items: center;
  391. }
  392. .about-section .about-header .logo.data-v-24407015 {
  393. width: 60rpx;
  394. height: 60rpx;
  395. margin-right: 16rpx;
  396. }
  397. .about-section .about-header .about-title.data-v-24407015 {
  398. font-size: 28rpx;
  399. color: #333;
  400. }
  401. .about-section .about-content.data-v-24407015 {
  402. flex: 1;
  403. margin-left: 20rpx;
  404. }
  405. .about-section .about-content text.data-v-24407015 {
  406. display: block;
  407. font-size: 26rpx;
  408. color: #333;
  409. }
  410. .about-section .about-content .about-desc.data-v-24407015 {
  411. font-size: 22rpx;
  412. color: #999;
  413. margin-top: 4rpx;
  414. }
  415. .tab-bar.data-v-24407015 {
  416. position: fixed;
  417. bottom: 0;
  418. left: 0;
  419. right: 0;
  420. height: 100rpx;
  421. background-color: #fff;
  422. display: flex;
  423. justify-content: space-around;
  424. align-items: center;
  425. border-top: 1rpx solid #f5f5f5;
  426. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  427. }
  428. .tab-bar .tab-item.data-v-24407015 {
  429. display: flex;
  430. flex-direction: column;
  431. align-items: center;
  432. padding: 10rpx 0;
  433. transition: all 0.3s ease;
  434. }
  435. .tab-bar .tab-item .tab-icon.data-v-24407015 {
  436. width: 48rpx;
  437. height: 48rpx;
  438. margin-bottom: 6rpx;
  439. }
  440. .tab-bar .tab-item text.data-v-24407015 {
  441. font-size: 22rpx;
  442. color: #666;
  443. transition: color 0.3s ease;
  444. }
  445. .tab-bar .tab-item.active text.data-v-24407015 {
  446. color: #ff5e00;
  447. }
  448. .tab-bar .tab-item.data-v-24407015:active {
  449. transform: scale(0.95);
  450. }
  451. @keyframes fadeInUp-24407015 {
  452. from {
  453. opacity: 0;
  454. transform: translateY(20rpx);
  455. }
  456. to {
  457. opacity: 1;
  458. transform: translateY(0);
  459. }
  460. }
  461. @keyframes fadeInScale-24407015 {
  462. from {
  463. opacity: 0;
  464. transform: scale(0.8);
  465. }
  466. to {
  467. opacity: 1;
  468. transform: scale(1);
  469. }
  470. }