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

1018 lines
22 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-9e04663e {
  27. display: flex;
  28. flex-direction: column;
  29. height: 100vh;
  30. background-color: #f5f5f5;
  31. overflow: hidden;
  32. }
  33. .banner.data-v-9e04663e {
  34. background: linear-gradient(135deg, #ff9500, #ff5e00);
  35. position: relative;
  36. height: 400rpx;
  37. z-index: 1;
  38. }
  39. .banner image.data-v-9e04663e {
  40. width: 100%;
  41. height: 100%;
  42. }
  43. .goods-list.data-v-9e04663e {
  44. display: flex;
  45. position: relative;
  46. height: calc(100vh - 400rpx - 120rpx - env(safe-area-inset-bottom));
  47. /* 减去banner和底部栏的高度 */
  48. margin-top: -10rpx;
  49. z-index: 2;
  50. border-radius: 20rpx 20rpx 0 0;
  51. overflow: hidden;
  52. padding: 30rpx;
  53. box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.05);
  54. background: linear-gradient(to bottom, #fff7e8, 20%, #ffffff);
  55. }
  56. .goods-list .category-nav.data-v-9e04663e {
  57. width: 20%;
  58. background: #ffffff;
  59. height: 100%;
  60. border-right: 1rpx solid rgba(255, 126, 14, 0.1);
  61. margin: 1rpx;
  62. border-radius: 20rpx 0 0 0;
  63. margin-right: 20rpx;
  64. overflow-y: auto;
  65. scrollbar-width: none;
  66. /* Firefox */
  67. -ms-overflow-style: none;
  68. /* IE and Edge */
  69. }
  70. .goods-list .category-nav.data-v-9e04663e::-webkit-scrollbar {
  71. width: 0 !important;
  72. display: none;
  73. /* Chrome, Safari, Opera */
  74. }
  75. .goods-list .category-nav .category-item.data-v-9e04663e {
  76. position: relative;
  77. padding: 30rpx 20rpx;
  78. text-align: center;
  79. font-family: PingFang SC;
  80. font-weight: 600;
  81. font-size: 14px;
  82. line-height: 100%;
  83. letter-spacing: 0px;
  84. color: #666;
  85. }
  86. .goods-list .category-nav .category-item .category-dot.data-v-9e04663e {
  87. position: absolute;
  88. top: 15rpx;
  89. right: 15rpx;
  90. width: 12rpx;
  91. height: 12rpx;
  92. background: #ff7a0e;
  93. border-radius: 50%;
  94. }
  95. .goods-list .category-nav .category-item.active.data-v-9e04663e {
  96. color: #ff7a0e;
  97. font-weight: bold;
  98. background: #fff7e8;
  99. position: relative;
  100. }
  101. .goods-list .category-nav .category-item.active.data-v-9e04663e::before {
  102. content: "";
  103. position: absolute;
  104. left: 0;
  105. top: 50%;
  106. transform: translateY(-50%);
  107. width: 6rpx;
  108. height: 36rpx;
  109. background: #ff7a0e;
  110. border-radius: 3rpx;
  111. }
  112. .goods-list .goods-content.data-v-9e04663e {
  113. flex: 1;
  114. height: 100%;
  115. padding: 0 30rpx;
  116. background: #ffffff;
  117. width: 70%;
  118. margin: 1rpx;
  119. margin-left: 0;
  120. border-radius: 0 20rpx 0 0;
  121. overflow-y: auto;
  122. scrollbar-width: none;
  123. /* Firefox */
  124. -ms-overflow-style: none;
  125. /* IE and Edge */
  126. }
  127. .goods-list .goods-content.data-v-9e04663e::-webkit-scrollbar {
  128. width: 0 !important;
  129. display: none;
  130. /* Chrome, Safari, Opera */
  131. }
  132. .goods-item.data-v-9e04663e {
  133. display: flex;
  134. align-items: flex-start;
  135. padding: 30rpx 0;
  136. border-bottom: 1rpx solid #f5f5f5;
  137. }
  138. .goods-item .goods-item-img.data-v-9e04663e {
  139. width: 120rpx;
  140. height: 120rpx;
  141. border-radius: 24rpx;
  142. background: #f8f8f8;
  143. margin-right: 28rpx;
  144. object-fit: contain;
  145. flex-shrink: 0;
  146. }
  147. .goods-item .goods-info-wrap.data-v-9e04663e {
  148. flex: 1;
  149. display: flex;
  150. flex-direction: column;
  151. justify-content: center;
  152. min-width: 0;
  153. }
  154. .goods-item .goods-header.data-v-9e04663e {
  155. display: flex;
  156. justify-content: space-between;
  157. align-items: center;
  158. margin-bottom: 10rpx;
  159. }
  160. .goods-item .goods-name.data-v-9e04663e {
  161. font-family: PingFang SC;
  162. font-weight: 500;
  163. font-size: 14px;
  164. line-height: 140%;
  165. letter-spacing: 0%;
  166. vertical-align: middle;
  167. color: #333;
  168. font-weight: bold;
  169. }
  170. .goods-item .goods-desc.data-v-9e04663e {
  171. font-size: 24rpx;
  172. color: #999;
  173. display: block;
  174. margin-bottom: 20rpx;
  175. }
  176. .goods-item .goods-info.data-v-9e04663e {
  177. display: flex;
  178. justify-content: space-between;
  179. align-items: center;
  180. }
  181. .goods-item .price-info.data-v-9e04663e {
  182. display: flex;
  183. align-items: baseline;
  184. }
  185. .goods-item .price-info .price-symbol.data-v-9e04663e {
  186. font-size: 24rpx;
  187. color: #ff7a0e;
  188. }
  189. .goods-item .price-info .price-value.data-v-9e04663e {
  190. font-size: 36rpx;
  191. color: #ff7a0e;
  192. font-weight: bold;
  193. margin: 0 4rpx;
  194. }
  195. .goods-item .price-info .price-unit.data-v-9e04663e {
  196. font-size: 24rpx;
  197. color: #999;
  198. }
  199. .goods-item .quantity-control.data-v-9e04663e {
  200. display: flex;
  201. align-items: center;
  202. }
  203. .goods-item .quantity-control button.data-v-9e04663e {
  204. width: 60rpx;
  205. height: 60rpx;
  206. padding: 0;
  207. margin: 0;
  208. display: flex;
  209. align-items: center;
  210. justify-content: center;
  211. font-size: 28rpx;
  212. color: #666;
  213. background: #f8f8f8;
  214. border: none;
  215. border-radius: 50%;
  216. }
  217. .goods-item .quantity-control button.data-v-9e04663e::after {
  218. border: none;
  219. }
  220. .goods-item .quantity-control button.data-v-9e04663e:active {
  221. opacity: 0.8;
  222. }
  223. .goods-item .quantity-control .quantity.data-v-9e04663e {
  224. width: 80rpx;
  225. text-align: center;
  226. font-size: 32rpx;
  227. color: #333;
  228. }
  229. .goods-item .brand-check.data-v-9e04663e {
  230. display: flex;
  231. flex-direction: row;
  232. align-items: center;
  233. border: 1px solid #f8a01d;
  234. width: 40%;
  235. border-radius: 8rpx;
  236. color: #ff7a0e;
  237. font-family: PingFang SC;
  238. font-weight: 400;
  239. font-size: 12px;
  240. line-height: 140%;
  241. letter-spacing: 0%;
  242. }
  243. .rules-link .rules.data-v-9e04663e {
  244. font-family: PingFang SC;
  245. font-weight: 400;
  246. font-size: 12px;
  247. line-height: 140%;
  248. letter-spacing: 0%;
  249. }
  250. .other-unrecycle-card.data-v-9e04663e {
  251. display: flex;
  252. align-items: center;
  253. background: #fff;
  254. border-radius: 24rpx;
  255. box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  256. padding: 30rpx 30rpx 30rpx 30rpx;
  257. margin: 30rpx 0 0 0;
  258. }
  259. .other-unrecycle-img.data-v-9e04663e {
  260. width: 120rpx;
  261. height: 120rpx;
  262. border-radius: 24rpx;
  263. background: #f8f8f8;
  264. margin-right: 28rpx;
  265. object-fit: contain;
  266. flex-shrink: 0;
  267. }
  268. .other-unrecycle-info.data-v-9e04663e {
  269. flex: 1;
  270. display: flex;
  271. flex-direction: column;
  272. justify-content: center;
  273. min-width: 0;
  274. }
  275. .other-unrecycle-title.data-v-9e04663e {
  276. font-size: 30rpx;
  277. color: #222;
  278. font-weight: bold;
  279. margin-bottom: 8rpx;
  280. word-break: break-all;
  281. white-space: normal;
  282. overflow: visible;
  283. }
  284. .other-unrecycle-desc.data-v-9e04663e {
  285. font-size: 24rpx;
  286. color: #999;
  287. margin-bottom: 12rpx;
  288. text-overflow: ellipsis;
  289. overflow: hidden;
  290. white-space: nowrap;
  291. }
  292. .other-unrecycle-price-row.data-v-9e04663e {
  293. display: flex;
  294. align-items: center;
  295. }
  296. .other-unrecycle-price.data-v-9e04663e {
  297. font-size: 28rpx;
  298. color: #ff9c00;
  299. font-weight: bold;
  300. }
  301. .other-unrecycle-btn.data-v-9e04663e {
  302. width: 60rpx;
  303. height: 60rpx;
  304. margin-left: 24rpx;
  305. border-radius: 50%;
  306. background: #f5f5f5;
  307. color: #ccc;
  308. font-size: 36rpx;
  309. border: none;
  310. display: flex;
  311. align-items: center;
  312. justify-content: center;
  313. pointer-events: none;
  314. }
  315. .fixed-bottom-wrap.data-v-9e04663e {
  316. position: fixed;
  317. left: 0;
  318. right: 0;
  319. bottom: calc(var(--a20a0960) + env(safe-area-inset-bottom));
  320. width: 100vw;
  321. z-index: 1001;
  322. background: transparent;
  323. box-sizing: border-box;
  324. pointer-events: auto;
  325. }
  326. .bottom-bar-divider.data-v-9e04663e {
  327. width: 100%;
  328. height: 1px;
  329. background: #f0f0f0;
  330. position: absolute;
  331. left: 0;
  332. bottom: 0;
  333. z-index: 1;
  334. }
  335. .green-tip-bar.data-v-9e04663e {
  336. width: 100%;
  337. background: #eaffea;
  338. color: #13ac47;
  339. font-size: 20rpx;
  340. box-sizing: border-box;
  341. text-align: left;
  342. display: flex;
  343. align-items: center;
  344. justify-content: center;
  345. }
  346. .green-tip-bar .tip-highlight.data-v-9e04663e {
  347. color: #ff9c00;
  348. font-weight: bold;
  349. font-size: 20rpx;
  350. }
  351. .bottom-bar.data-v-9e04663e {
  352. width: 100%;
  353. background-color: #fff;
  354. display: flex;
  355. align-items: center;
  356. justify-content: space-between;
  357. padding: 0 30rpx;
  358. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  359. height: 120rpx;
  360. border-top-left-radius: 0;
  361. border-top-right-radius: 0;
  362. border-bottom-left-radius: env(safe-area-inset-bottom);
  363. border-bottom-right-radius: env(safe-area-inset-bottom);
  364. }
  365. .bottom-bar .bottom-left.data-v-9e04663e {
  366. display: flex;
  367. flex-direction: column;
  368. justify-content: center;
  369. }
  370. .bottom-bar .bottom-left .summary-row.data-v-9e04663e {
  371. display: flex;
  372. align-items: center;
  373. font-size: 26rpx;
  374. color: #333;
  375. }
  376. .bottom-bar .bottom-left .summary-row .summary-label.data-v-9e04663e {
  377. color: #333;
  378. }
  379. .bottom-bar .bottom-left .summary-row .summary-count.data-v-9e04663e {
  380. color: #ff9c00;
  381. font-weight: bold;
  382. font-size: 28rpx;
  383. }
  384. .bottom-bar .bottom-left .amount-row.data-v-9e04663e {
  385. display: flex;
  386. align-items: center;
  387. margin-top: 4rpx;
  388. }
  389. .bottom-bar .bottom-left .amount-row .amount.data-v-9e04663e {
  390. color: #ff9c00;
  391. font-size: 44rpx;
  392. font-weight: bold;
  393. vertical-align: middle;
  394. }
  395. .bottom-bar .submit-btn.data-v-9e04663e {
  396. width: 300rpx;
  397. height: 88rpx;
  398. background: linear-gradient(to right, #ffd01e, #ff8917);
  399. border-radius: 44rpx;
  400. color: #fff;
  401. font-size: 32rpx;
  402. font-weight: bold;
  403. display: flex;
  404. align-items: center;
  405. justify-content: center;
  406. border: none;
  407. box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
  408. }
  409. .bottom-bar .submit-btn.data-v-9e04663e::after {
  410. border: none;
  411. }
  412. .bottom-bar .submit-btn.data-v-9e04663e:active {
  413. opacity: 0.9;
  414. }
  415. .detail-popup-mask.data-v-9e04663e {
  416. position: fixed;
  417. left: 0;
  418. right: 0;
  419. top: 0;
  420. bottom: calc(90rpx + env(safe-area-inset-bottom));
  421. /* tabbar高度+安全区 */
  422. background: rgba(0, 0, 0, 0.35);
  423. z-index: 8;
  424. display: flex;
  425. align-items: flex-end;
  426. justify-content: center;
  427. }
  428. .detail-popup.data-v-9e04663e {
  429. width: 100vw;
  430. max-width: none;
  431. background: #fff;
  432. border-radius: 48rpx 48rpx 0 0;
  433. box-shadow: 0 8rpx 48rpx rgba(0, 0, 0, 0.18);
  434. display: flex;
  435. flex-direction: column;
  436. align-items: stretch;
  437. position: relative;
  438. padding: 0;
  439. overflow: hidden;
  440. min-height: 520rpx;
  441. max-height: 80vh;
  442. bottom: 0;
  443. }
  444. .detail-popup-close.data-v-9e04663e {
  445. position: absolute;
  446. right: 36rpx;
  447. top: 36rpx;
  448. font-size: 36rpx;
  449. color: #bbb;
  450. z-index: 2;
  451. }
  452. .popup-green-tip.data-v-9e04663e {
  453. border-radius: 48rpx 48rpx 0 0;
  454. font-size: 20rpx;
  455. padding: 24rpx 30rpx 0 30rpx;
  456. background: #eaffea;
  457. color: #13ac47;
  458. text-align: left;
  459. }
  460. .panel-header.data-v-9e04663e {
  461. display: flex;
  462. align-items: center;
  463. justify-content: center;
  464. font-size: 32rpx;
  465. font-weight: bold;
  466. padding: 40rpx 36rpx 0 36rpx;
  467. background: #fff;
  468. position: relative;
  469. }
  470. .panel-title.data-v-9e04663e {
  471. font-size: 32rpx;
  472. color: #222;
  473. font-weight: bold;
  474. text-align: center;
  475. flex: 1;
  476. }
  477. .popup-panel-list.data-v-9e04663e {
  478. flex: 1;
  479. overflow-y: auto;
  480. max-height: 36vh;
  481. padding: 0 24rpx;
  482. scrollbar-width: none;
  483. /* Firefox */
  484. -ms-overflow-style: none;
  485. /* IE and Edge */
  486. }
  487. .popup-panel-list.data-v-9e04663e::-webkit-scrollbar {
  488. width: 0 !important;
  489. display: none;
  490. /* Chrome, Safari, Opera */
  491. }
  492. .panel-item.data-v-9e04663e {
  493. display: flex;
  494. align-items: center;
  495. justify-content: flex-start;
  496. padding: 24rpx 0;
  497. border-bottom: 1px solid #f0f0f0;
  498. }
  499. .panel-item-img.data-v-9e04663e {
  500. width: 100rpx;
  501. height: 100rpx;
  502. margin-right: 20rpx;
  503. border-radius: 16rpx;
  504. background: #f8f8f8;
  505. }
  506. .panel-item-info.data-v-9e04663e {
  507. flex: 1;
  508. display: flex;
  509. flex-direction: column;
  510. justify-content: center;
  511. min-width: 0;
  512. }
  513. .panel-item-name.data-v-9e04663e {
  514. font-size: 30rpx;
  515. color: #222;
  516. font-weight: bold;
  517. margin-bottom: 4rpx;
  518. text-overflow: ellipsis;
  519. overflow: hidden;
  520. white-space: nowrap;
  521. }
  522. .panel-item-desc.data-v-9e04663e {
  523. font-size: 24rpx;
  524. color: #999;
  525. margin-bottom: 4rpx;
  526. text-overflow: ellipsis;
  527. overflow: hidden;
  528. white-space: nowrap;
  529. }
  530. .panel-item-price.data-v-9e04663e {
  531. font-size: 26rpx;
  532. color: #ff9c00;
  533. margin-top: 2rpx;
  534. }
  535. .panel-quantity-control.data-v-9e04663e {
  536. display: flex;
  537. align-items: center;
  538. margin-left: 20rpx;
  539. }
  540. .panel-quantity-control button.data-v-9e04663e {
  541. width: 48rpx;
  542. height: 48rpx;
  543. padding: 0;
  544. margin: 0 8rpx;
  545. display: flex;
  546. align-items: center;
  547. justify-content: center;
  548. font-size: 32rpx;
  549. color: #666;
  550. background: #f5f5f5;
  551. border: none;
  552. border-radius: 50%;
  553. }
  554. .panel-quantity-control button.data-v-9e04663e::after {
  555. border: none;
  556. }
  557. .panel-quantity-control button.data-v-9e04663e:active {
  558. opacity: 0.8;
  559. }
  560. .panel-quantity-control .quantity.data-v-9e04663e {
  561. width: 40rpx;
  562. text-align: center;
  563. font-size: 28rpx;
  564. color: #333;
  565. }
  566. .popup-bottom-bar.data-v-9e04663e {
  567. width: 100%;
  568. background-color: #fff;
  569. display: flex;
  570. align-items: center;
  571. justify-content: space-between;
  572. padding: 0 30rpx;
  573. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  574. height: 120rpx;
  575. border-top: 1px solid #f0f0f0;
  576. border-bottom-left-radius: 48rpx;
  577. border-bottom-right-radius: 48rpx;
  578. }
  579. .popup-bottom-bar .bottom-left.data-v-9e04663e {
  580. display: flex;
  581. flex-direction: column;
  582. justify-content: center;
  583. }
  584. .popup-bottom-bar .bottom-left .summary-row.data-v-9e04663e {
  585. display: flex;
  586. align-items: center;
  587. font-size: 26rpx;
  588. color: #333;
  589. }
  590. .popup-bottom-bar .bottom-left .summary-row .summary-label.data-v-9e04663e {
  591. color: #333;
  592. }
  593. .popup-bottom-bar .bottom-left .summary-row .summary-count.data-v-9e04663e {
  594. color: #ff9c00;
  595. font-weight: bold;
  596. font-size: 28rpx;
  597. }
  598. .popup-bottom-bar .bottom-left .amount-row.data-v-9e04663e {
  599. display: flex;
  600. align-items: center;
  601. margin-top: 4rpx;
  602. }
  603. .popup-bottom-bar .bottom-left .amount-row .amount.data-v-9e04663e {
  604. color: #ff9c00;
  605. font-size: 44rpx;
  606. font-weight: bold;
  607. vertical-align: middle;
  608. }
  609. .popup-bottom-bar .submit-btn.data-v-9e04663e {
  610. width: 300rpx;
  611. height: 88rpx;
  612. background: linear-gradient(to right, #ffd01e, #ff8917);
  613. border-radius: 44rpx;
  614. color: #fff;
  615. font-size: 32rpx;
  616. font-weight: bold;
  617. display: flex;
  618. align-items: center;
  619. justify-content: center;
  620. border: none;
  621. box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
  622. }
  623. .popup-bottom-bar .submit-btn.data-v-9e04663e::after {
  624. border: none;
  625. }
  626. .popup-bottom-bar .submit-btn.data-v-9e04663e:active {
  627. opacity: 0.9;
  628. }
  629. .brand-popup-mask.data-v-9e04663e {
  630. position: fixed;
  631. left: 0;
  632. right: 0;
  633. top: 0;
  634. bottom: 0;
  635. background: rgba(0, 0, 0, 0.35);
  636. z-index: 3000;
  637. display: flex;
  638. align-items: flex-end;
  639. justify-content: center;
  640. }
  641. .brand-popup.data-v-9e04663e {
  642. position: relative;
  643. width: 100%;
  644. max-width: 750px;
  645. background: #fff;
  646. border-radius: 32rpx 32rpx 0 0;
  647. box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.08);
  648. padding-bottom: 40rpx;
  649. max-height: 90vh;
  650. display: flex;
  651. flex-direction: column;
  652. overflow: hidden;
  653. }
  654. .brand-popup-header.data-v-9e04663e {
  655. display: flex;
  656. align-items: center;
  657. justify-content: center;
  658. padding: 32rpx 24rpx 0 24rpx;
  659. font-size: 32rpx;
  660. font-weight: bold;
  661. position: relative;
  662. }
  663. .brand-popup-close.data-v-9e04663e {
  664. position: absolute;
  665. left: 24rpx;
  666. font-size: 28rpx;
  667. color: #888;
  668. }
  669. .brand-popup-title.data-v-9e04663e {
  670. font-size: 32rpx;
  671. color: #222;
  672. font-weight: bold;
  673. }
  674. .brand-popup-search.data-v-9e04663e {
  675. padding: 20rpx 24rpx 0 24rpx;
  676. }
  677. .brand-search-input.data-v-9e04663e {
  678. width: 100%;
  679. height: 60rpx;
  680. border-radius: 30rpx;
  681. background: #f5f5f5;
  682. border: none;
  683. padding-left: 40rpx;
  684. font-size: 28rpx;
  685. color: #888;
  686. }
  687. .brand-popup-list.data-v-9e04663e {
  688. flex: 1;
  689. overflow-y: auto;
  690. max-height: 60vh;
  691. padding: 0 24rpx;
  692. scrollbar-width: none;
  693. /* Firefox */
  694. -ms-overflow-style: none;
  695. /* IE and Edge */
  696. }
  697. .brand-popup-list.data-v-9e04663e::-webkit-scrollbar {
  698. width: 0 !important;
  699. display: none;
  700. /* Chrome, Safari, Opera */
  701. }
  702. .brand-letter.data-v-9e04663e {
  703. font-size: 28rpx;
  704. color: #888;
  705. margin: 24rpx 0 8rpx 0;
  706. font-weight: bold;
  707. }
  708. .brand-item.data-v-9e04663e {
  709. display: flex;
  710. align-items: center;
  711. padding: 16rpx 0;
  712. border-bottom: 1px solid #f0f0f0;
  713. }
  714. .brand-logo.data-v-9e04663e {
  715. width: 60rpx;
  716. height: 60rpx;
  717. margin-right: 20rpx;
  718. border-radius: 8rpx;
  719. background: #f8f8f8;
  720. }
  721. .brand-name.data-v-9e04663e {
  722. font-size: 28rpx;
  723. color: #222;
  724. }
  725. .brand-index-bar.data-v-9e04663e {
  726. position: absolute;
  727. right: 12rpx;
  728. top: 120rpx;
  729. width: 32rpx;
  730. display: flex;
  731. flex-direction: column;
  732. align-items: center;
  733. z-index: 10;
  734. }
  735. .brand-index-bar text.data-v-9e04663e {
  736. font-size: 22rpx;
  737. color: #bbb;
  738. margin: 4rpx 0;
  739. font-weight: bold;
  740. }
  741. .brand-index-bar text.active.data-v-9e04663e {
  742. color: #ff9c00;
  743. }
  744. .rule-popup-mask.data-v-9e04663e {
  745. position: fixed;
  746. left: 0;
  747. right: 0;
  748. top: 0;
  749. bottom: 0;
  750. background: rgba(0, 0, 0, 0.35);
  751. z-index: 4000;
  752. display: flex;
  753. align-items: center;
  754. justify-content: center;
  755. }
  756. .rule-popup.data-v-9e04663e {
  757. width: 90vw;
  758. max-width: 600rpx;
  759. background: #fff;
  760. border-radius: 48rpx;
  761. box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
  762. display: flex;
  763. flex-direction: column;
  764. align-items: center;
  765. position: relative;
  766. padding-bottom: 40rpx;
  767. }
  768. .rule-popup-title.data-v-9e04663e {
  769. font-size: 36rpx;
  770. color: #222;
  771. font-weight: bold;
  772. text-align: center;
  773. margin-top: 48rpx;
  774. margin-bottom: 16rpx;
  775. }
  776. .rule-popup-content.data-v-9e04663e {
  777. width: 100%;
  778. max-height: 420rpx;
  779. padding: 0 40rpx;
  780. box-sizing: border-box;
  781. overflow-y: auto;
  782. scrollbar-width: none;
  783. /* Firefox */
  784. -ms-overflow-style: none;
  785. /* IE and Edge */
  786. }
  787. .rule-popup-content.data-v-9e04663e::-webkit-scrollbar {
  788. width: 0 !important;
  789. display: none;
  790. /* Chrome, Safari, Opera */
  791. }
  792. .rule-popup-desc.data-v-9e04663e {
  793. font-size: 26rpx;
  794. color: #888;
  795. text-align: center;
  796. margin-bottom: 24rpx;
  797. margin-top: 0;
  798. }
  799. .rule-popup-warning.data-v-9e04663e {
  800. width: 100%;
  801. border: 2rpx solid #ffb800;
  802. color: #ffb800;
  803. background: #fffbe6;
  804. border-radius: 32rpx;
  805. font-size: 28rpx;
  806. text-align: center;
  807. padding: 16rpx 0;
  808. margin-bottom: 24rpx;
  809. font-weight: bold;
  810. }
  811. .rule-popup-img.data-v-9e04663e {
  812. display: block;
  813. margin: 0 auto 24rpx auto;
  814. max-width: 80%;
  815. max-height: 300rpx;
  816. border-radius: 16rpx;
  817. object-fit: contain;
  818. }
  819. .rule-popup-btn.data-v-9e04663e {
  820. width: 80%;
  821. height: 88rpx;
  822. background: linear-gradient(to right, #ffd01e, #ff8917);
  823. border-radius: 44rpx;
  824. color: #fff;
  825. font-size: 32rpx;
  826. font-weight: bold;
  827. display: flex;
  828. align-items: center;
  829. justify-content: center;
  830. border: none;
  831. margin: 0 auto;
  832. margin-top: 16rpx;
  833. box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
  834. }
  835. .rule-popup-btn.data-v-9e04663e::after {
  836. border: none;
  837. }
  838. .rule-popup-btn.data-v-9e04663e:active {
  839. opacity: 0.9;
  840. }
  841. .rule-popup-close.data-v-9e04663e {
  842. position: absolute;
  843. right: 32rpx;
  844. bottom: 32rpx;
  845. width: 72rpx;
  846. height: 72rpx;
  847. background: #ff5a5f;
  848. border-radius: 50%;
  849. display: flex;
  850. align-items: center;
  851. justify-content: center;
  852. z-index: 10;
  853. box-shadow: 0 2rpx 8rpx rgba(255, 90, 95, 0.12);
  854. }
  855. /* 预约上门取件弹窗样式 */
  856. .pickup-confirm-mask.data-v-9e04663e {
  857. position: fixed;
  858. left: 0;
  859. right: 0;
  860. top: 0;
  861. bottom: 0;
  862. background: rgba(0, 0, 0, 0.35);
  863. z-index: 5000;
  864. display: flex;
  865. align-items: center;
  866. justify-content: center;
  867. }
  868. .pickup-confirm-popup.data-v-9e04663e {
  869. width: 90vw;
  870. max-width: 600rpx;
  871. background: #fff;
  872. border-radius: 48rpx;
  873. box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
  874. display: flex;
  875. flex-direction: column;
  876. align-items: center;
  877. position: relative;
  878. padding: 48rpx 36rpx 40rpx 36rpx;
  879. }
  880. .pickup-confirm-title.data-v-9e04663e {
  881. font-size: 36rpx;
  882. color: #222;
  883. font-weight: bold;
  884. text-align: center;
  885. margin-bottom: 24rpx;
  886. }
  887. .pickup-confirm-content.data-v-9e04663e {
  888. font-size: 26rpx;
  889. color: #333;
  890. text-align: left;
  891. line-height: 1.7;
  892. margin-bottom: 36rpx;
  893. }
  894. .pickup-confirm-btn-row.data-v-9e04663e {
  895. width: 100%;
  896. display: flex;
  897. justify-content: space-between;
  898. gap: 32rpx;
  899. }
  900. .pickup-confirm-btn.data-v-9e04663e {
  901. flex: 1;
  902. height: 88rpx;
  903. border-radius: 44rpx;
  904. font-size: 32rpx;
  905. font-weight: bold;
  906. display: flex;
  907. align-items: center;
  908. justify-content: center;
  909. border: 2rpx solid #ffd01e;
  910. background: #fff;
  911. color: #ff9c00;
  912. box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.08);
  913. }
  914. .pickup-confirm-btn.data-v-9e04663e:not(.agree) {
  915. background: #fff0d2;
  916. }
  917. .pickup-confirm-btn.agree.data-v-9e04663e {
  918. background: linear-gradient(to right, #ffd01e, #ff8917);
  919. color: #fff;
  920. border: none;
  921. }
  922. .uv-tabbar.data-v-9e04663e {
  923. z-index: 1000;
  924. }
  925. .loading-more.data-v-9e04663e {
  926. text-align: center;
  927. color: #999;
  928. padding: 20rpx 0;
  929. font-size: 26rpx;
  930. }
  931. .brand-confirm-mask.data-v-9e04663e {
  932. position: fixed;
  933. left: 0;
  934. right: 0;
  935. top: 0;
  936. bottom: 0;
  937. background: rgba(0, 0, 0, 0.25);
  938. z-index: 5001;
  939. display: flex;
  940. align-items: center;
  941. justify-content: center;
  942. }
  943. .brand-confirm-popup.data-v-9e04663e {
  944. width: 70vw;
  945. max-width: 270px;
  946. background: #fff;
  947. border-radius: 32rpx;
  948. box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
  949. display: flex;
  950. flex-direction: column;
  951. align-items: center;
  952. padding: 48rpx 20rpx 36rpx 20rpx;
  953. position: relative;
  954. }
  955. .brand-confirm-title.data-v-9e04663e {
  956. font-size: 36rpx;
  957. color: #222;
  958. font-weight: bold;
  959. text-align: center;
  960. margin-bottom: 24rpx;
  961. }
  962. .brand-confirm-logo-wrap.data-v-9e04663e {
  963. width: 120rpx;
  964. height: 120rpx;
  965. background: #f8f8f8;
  966. border-radius: 50%;
  967. display: flex;
  968. align-items: center;
  969. justify-content: center;
  970. margin-bottom: 18rpx;
  971. }
  972. .brand-confirm-logo.data-v-9e04663e {
  973. width: 80rpx;
  974. height: 80rpx;
  975. border-radius: 50%;
  976. }
  977. .brand-confirm-name.data-v-9e04663e {
  978. font-size: 28rpx;
  979. color: #222;
  980. font-weight: bold;
  981. text-align: center;
  982. margin-bottom: 16rpx;
  983. }
  984. .brand-confirm-desc.data-v-9e04663e {
  985. font-size: 24rpx;
  986. color: #999;
  987. text-align: center;
  988. margin-bottom: 32rpx;
  989. line-height: 1.6;
  990. }
  991. .brand-confirm-btn-row.data-v-9e04663e {
  992. width: 100%;
  993. display: flex;
  994. justify-content: space-between;
  995. gap: 24rpx;
  996. }
  997. .brand-confirm-btn.data-v-9e04663e {
  998. flex: 1;
  999. height: 72rpx;
  1000. border-radius: 36rpx;
  1001. font-size: 28rpx;
  1002. font-weight: bold;
  1003. display: flex;
  1004. align-items: center;
  1005. justify-content: center;
  1006. border: none;
  1007. margin: 0 0;
  1008. }
  1009. .brand-confirm-btn.retry.data-v-9e04663e {
  1010. background: #fff;
  1011. color: #ff9c00;
  1012. border: 2rpx solid #ff9c00;
  1013. }
  1014. .brand-confirm-btn.confirm.data-v-9e04663e {
  1015. background: linear-gradient(to right, #ffd01e, #ff8917);
  1016. color: #fff;
  1017. border: none;
  1018. }