goodsOrderConfirm.wxss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  1. /* pages/goodsOrderConfirm/goodsOrderConfirm.wxss */
  2. .content-listker {
  3. width: 100%;
  4. }
  5. .item-radius {
  6. background: #fff;
  7. opacity: 0.8;
  8. position: relative;
  9. border-radius: 24rpx;
  10. margin: 20rpx;
  11. /* margin-left: 30rpx;
  12. margin-right: 30rpx; */
  13. /* #f878af 248 120 175 46 */
  14. /* box-shadow: 4rpx 24rpx 50rpx -8rpx rgba(255,119,176,0.55); */
  15. }
  16. .order-top {
  17. background: #fff;
  18. padding: 30rpx 0;
  19. }
  20. .order-top image {
  21. width: 200rpx;
  22. height: 156rpx;
  23. margin-bottom: 6rpx;
  24. }
  25. .order-top text {
  26. font-size: 28rpx;
  27. }
  28. .order-top .state {
  29. font-size: 36rpx;
  30. font-family: PingFangSC-Medium;
  31. }
  32. .margin {
  33. /* margin: 20rpx 0; */
  34. background: #fff;
  35. }
  36. .item .state {
  37. color: #FF6877;
  38. }
  39. .item-top {
  40. height: 102rpx;
  41. padding: 0 24rpx;
  42. }
  43. .item-top text {
  44. font-size: 36rpx;
  45. font-family: PingFangSC-Semibold, PingFang SC;
  46. font-weight: 600;
  47. }
  48. .item-content {
  49. padding: 10rpx 0 30rpx;
  50. margin: 0 24rpx;
  51. position: relative;
  52. z-index: 1111;
  53. }
  54. .item-content:last-child {
  55. border-bottom: 1rpx solid rgba(175, 175, 175, 0.1);
  56. }
  57. .item-content .time {
  58. /* background: linear-gradient(270deg, rgba(255, 175, 216, 0) 0%, rgba(255, 119, 176, 0.49) 100%); */
  59. border-radius: 22rpx;
  60. font-size: 26rpx;
  61. padding: 2rpx 10rpx;
  62. box-sizing: border-box;
  63. }
  64. .item-content .img {
  65. position: relative;
  66. width: 160rpx;
  67. height: 160rpx;
  68. margin-right: 20rpx;
  69. background: #EDEDED;
  70. border-radius: 20rpx;
  71. overflow: hidden;
  72. }
  73. .item-content .icon {
  74. width: 136rpx;
  75. height: 92rpx;
  76. position: absolute;
  77. left: 46rpx;
  78. top: 160rpx;
  79. }
  80. .item-content .content {
  81. flex: 1;
  82. justify-content: space-between;
  83. overflow: hidden;
  84. }
  85. .item-content .content text {
  86. font-size: 28rpx;
  87. font-family: PingFangSC-Regular, PingFang SC;
  88. font-weight: 400;
  89. }
  90. .item-vip {
  91. padding: 12rpx 20rpx 20rpx;
  92. }
  93. .item-vip .change-img {
  94. width: 48rpx;
  95. height: 48rpx;
  96. margin-right: 16rpx;
  97. }
  98. .item-vip-card {
  99. border-radius: 20rpx;
  100. overflow: hidden;
  101. background: #FAFAFA;
  102. box-sizing: border-box;
  103. }
  104. .item-vip-card text {
  105. font-size: 28rpx;
  106. font-family: PingFangSC-Medium, PingFang SC;
  107. font-weight: 500;
  108. color: #333333;
  109. }
  110. .item-vip .card-img {
  111. width: 160rpx;
  112. height: 160rpx;
  113. }
  114. .item-products-content {
  115. overflow-x: scroll;
  116. padding: 0 24rpx 20rpx;
  117. }
  118. .item-products-content .item-product {
  119. width: 446rpx;
  120. height: 160rpx;
  121. background: #FAFAFA;
  122. border-radius: 20rpx;
  123. overflow: hidden;
  124. box-sizing: border-box;
  125. flex-shrink: 0;
  126. margin-right: 20rpx;
  127. }
  128. .item-products-content .item-product image {
  129. width: 160rpx;
  130. height: 160rpx;
  131. /* background-color: blue; */
  132. }
  133. .item-btn {
  134. height: 84rpx;
  135. padding-top: 16rpx;
  136. justify-content: flex-end;
  137. }
  138. .order-info {
  139. padding: 30rpx;
  140. }
  141. .order-info .num {
  142. margin-bottom: 10rpx;
  143. }
  144. .order-info .num .copy {
  145. width: 84rpx;
  146. height: 52rpx;
  147. border: 2rpx solid #333333;
  148. border-radius: 12rpx;
  149. font-size: 28rpx;
  150. color: #333;
  151. }
  152. .order-sum .top {
  153. padding: 32rpx 0rpx;
  154. margin: 0rpx 24rpx;
  155. border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
  156. }
  157. .order-sum text {
  158. font-size: 28rpx;
  159. font-family: PingFangSC-Regular, PingFang SC;
  160. font-weight: 400;
  161. color: #333333;
  162. }
  163. .order-sum .top .text {
  164. margin-bottom: 24rpx;
  165. }
  166. .order-sum .top .text .order-coupon-icon {
  167. width: 32rpx;
  168. height: 32rpx;
  169. margin-right: 10rpx;
  170. }
  171. .order-sum .top .coupon-text {
  172. /* width: 128rpx; */
  173. height: 34rpx;
  174. font-size: 20rpx;
  175. box-sizing: border-box;
  176. color: #FF3007;
  177. background: #FFEFEB;
  178. border-radius: 8rpx;
  179. border: 2px solid #FF3007;
  180. padding: 4rpx 8rpx;
  181. }
  182. /* 权益折扣 */
  183. .coup-box{
  184. margin-top: 20rpx;
  185. width: 100%;
  186. display: flex;
  187. align-items: center;
  188. justify-content: space-between;
  189. }
  190. .coup-box-title{
  191. font-size: 24rpx;
  192. color: #FA7D22;
  193. margin-left: 38rpx;
  194. }
  195. .order-sum .top .msg {
  196. padding: 20rpx;
  197. background: #FFEFEB;
  198. /* background-color: rgba(255, 202, 224, 0.16); */
  199. /* background: #FA7D22; */
  200. border-radius: 24rpx;
  201. font-size: 24rpx;
  202. font-family: PingFangSC-Medium, PingFang SC;
  203. font-weight: 500;
  204. color: #FF3007;
  205. position: relative;
  206. max-width: 374rpx;
  207. }
  208. .order-sum .top .msg::after {
  209. content: '';
  210. position: absolute;
  211. right: 30rpx;
  212. top: -20rpx;
  213. width: 0rpx;
  214. height: 0rpx;
  215. border-width: 10rpx;
  216. border-style: solid;
  217. border-color: transparent transparent rgba(255, 202, 224, 0.16) transparent;
  218. }
  219. .order-sum .top .coupon-guide-tips {
  220. width: 156rpx;
  221. height: 48rpx;
  222. background: #FF3007;
  223. border-radius: 8rpx;
  224. color: #FFFFFF;
  225. text-align: center;
  226. line-height: 48rpx;
  227. }
  228. .order-sum .top .right-500 text {
  229. font-family: PingFang-SC-Medium, PingFang-SC;
  230. font-weight: 500;
  231. }
  232. .order-sum .bottom {
  233. height: 84rpx;
  234. padding-top: 16rpx;
  235. justify-content: flex-end;
  236. }
  237. .order-sum .bottom .total-price {
  238. font-size: 36rpx;
  239. font-family: PingFangSC-Medium, PingFang SC;
  240. font-weight: 500;
  241. color: #FF3007;
  242. margin-right: 28rpx;
  243. }
  244. .total-pay-price {
  245. font-size: 56rpx;
  246. font-family: PingFangSC-Medium, PingFang SC;
  247. font-weight: 500;
  248. color: #FF3007;
  249. }
  250. .buy {
  251. height: 170rpx;
  252. /* padding: 0 30rpx; */
  253. background: #fff;
  254. position: fixed;
  255. bottom: 0;
  256. width: 100%;
  257. box-sizing: border-box;
  258. /* justify-content: flex-end; */
  259. }
  260. .buy .btn {
  261. width: 338rpx;
  262. height: 88rpx;
  263. border-radius: 44rpx;
  264. font-size: 32rpx;
  265. box-sizing: border-box;
  266. /* margin-right: 30rpx; */
  267. }
  268. .buy .cancel-btn {
  269. border: 1rpx solid #979797;
  270. color: #999999;
  271. }
  272. .buy .use-btn {
  273. background: #FA7D22;
  274. color: #FFFFFF;
  275. }
  276. .coupon-popup {
  277. height: 72vh;
  278. }
  279. .payType {
  280. height: 690rpx;
  281. }
  282. .coupon-popup .top {
  283. justify-content: center;
  284. padding: 0 48rpx;
  285. height: 112rpx;
  286. }
  287. .need-show-line {
  288. border-bottom: 2rpx solid #eee;
  289. }
  290. .coupon-popup .top text {
  291. font-size: 36rpx;
  292. }
  293. .coupon-popup .top .close-img {
  294. width: 56rpx;
  295. height: 56rpx;
  296. position: absolute;
  297. top: 28rpx;
  298. right: 32rpx;
  299. }
  300. .coupon-popup .list {
  301. height: 53vh;
  302. padding: 14rpx 30rpx;
  303. box-sizing: border-box;
  304. /* overflow-y: scroll; */
  305. }
  306. .coupon-popup .list .item {
  307. padding: 14rpx 0;
  308. height: 172rpx;
  309. /* border-bottom: 2rpx solid #eee; */
  310. }
  311. .coupon-popup .list .radio image {
  312. width: 48rpx;
  313. height: 48rpx;
  314. }
  315. .coupon-popup .list .coupon-item {
  316. display: block;
  317. margin-top: 10rpx;
  318. }
  319. .coupon-popup .item-left {
  320. width: 212rpx;
  321. height: 100%;
  322. font-family: PingFangSC-Semibold;
  323. color: #FFFFFF;
  324. font-size: 32rpx;
  325. border-top-left-radius: 16rpx;
  326. border-bottom-left-radius: 16rpx;
  327. background-image: radial-gradient(circle at 0px 50%, #fff 15rpx, #F5849F 15rpx);
  328. }
  329. .coupon-popup .item-left text {
  330. font-size: 36rpx;
  331. color: #fff;
  332. font-family: PingFangSC-Semibold, PingFang SC;
  333. }
  334. .coupon-popup .item-right {
  335. /* justify-content: center;
  336. align-items: flex-start; */
  337. padding: 0 30rpx;
  338. border-top-right-radius: 16rpx;
  339. border-bottom-right-radius: 16rpx;
  340. box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.13);
  341. }
  342. .coupon-popup .item-right text {
  343. color: #000;
  344. }
  345. .coupon-popup-btm {
  346. height: 170rpx;
  347. position: fixed;
  348. width: 100%;
  349. left: 0;
  350. bottom: 0;
  351. background: #FFFFFF;
  352. }
  353. .coupon-popup-btm-btn {
  354. width: 100%;
  355. height: 84rpx;
  356. font-size: 32rpx;
  357. color: #FFFFFF;
  358. margin: 0 40rpx;
  359. background: #FA7D22;
  360. border-radius: 42rpx;
  361. font-family: PingFang-SC-Medium, PingFang-SC;
  362. }
  363. .btm-text {
  364. margin: 42rpx 0 120rpx;
  365. }
  366. .item-products-content::-webkit-scrollbar,
  367. .scroll-x::-webkit-scrollbar {
  368. display: none;
  369. /* Chrome Safari */
  370. }
  371. .use-popup {
  372. width: 640rpx;
  373. height: 898rpx;
  374. background: #FFFFFF;
  375. border-radius: 40rpx;
  376. padding: 60rpx 48rpx;
  377. box-sizing: border-box;
  378. position: relative;
  379. /* justify-content: center; */
  380. /* justify-content: space-evenly; */
  381. }
  382. .use-popup .close-img {
  383. width: 56rpx;
  384. height: 56rpx;
  385. /* background: red; */
  386. position: absolute;
  387. top: 16rpx;
  388. right: 16rpx;
  389. }
  390. .use-popup .title {
  391. /* margin-top: 60rpx; */
  392. font-size: 36rpx;
  393. font-family: PingFangSC-Medium, PingFang SC;
  394. font-weight: 500;
  395. color: #000000;
  396. }
  397. .use-popup .text-cotent {
  398. /* background-color: red; */
  399. overflow-y: scroll;
  400. text-align: left;
  401. /* height: 100%; */
  402. }
  403. .skin-popup .wux-landscape__inner {
  404. padding: 0 !important;
  405. }
  406. .skin-popup .popup-index--wux-popup {
  407. width: 650rpx !important;
  408. max-width: 650rpx !important;
  409. }
  410. /* =============================================================================== */
  411. .moneyShow {
  412. width: 100%;
  413. text-align: center;
  414. font-weight: 500;
  415. font-size: 56rpx;
  416. color: #FF3007;
  417. height: 100rpx;
  418. line-height: 100rpx;
  419. margin-bottom: 100rpx;
  420. }
  421. .moneyShow text {
  422. font-size: 28rpx;
  423. color: #FF3007;
  424. }
  425. .select-pay-methon {
  426. margin-bottom: 60rpx;
  427. width: 100%;
  428. display: flex;
  429. align-items: center;
  430. }
  431. .pay-img {
  432. width: 48rpx;
  433. height: 48rpx;
  434. margin-left: 30rpx;
  435. }
  436. .pay-title {
  437. margin-left: 20rpx;
  438. font-size: 32rpx;
  439. font-weight: 400;
  440. color: #333333;
  441. flex: 1;
  442. text-align: left;
  443. }
  444. .pay-money {
  445. margin-right: 36rpx;
  446. font-size: 36rpx;
  447. font-weight: 500;
  448. color: #333333;
  449. }
  450. .pay-money text {
  451. font-size: 24rpx;
  452. }
  453. .select-activity {
  454. width: 48rpx;
  455. height: 48rpx;
  456. margin-right: 30rpx;
  457. }
  458. .list_first_to {
  459. z-index: 110;
  460. top: 0rpx;
  461. position: fixed;
  462. width: 100%;
  463. height: 100%;
  464. background: rgba(0, 0, 0, 0.7);
  465. }
  466. .insellShow {
  467. width: 390rpx;
  468. }
  469. .list_top_show {
  470. width: 100%;
  471. display: flex;
  472. align-items: center;
  473. flex-direction: column;
  474. margin-top: -110rpx;
  475. }
  476. .list_top_img {
  477. width: 40rpx;
  478. height: 40rpx;
  479. }
  480. .list_top_content {
  481. padding-top: 15rpx;
  482. margin-top: 10rpx;
  483. width: 500rpx;
  484. height: 72rpx;
  485. background: rgba(0, 0, 0, 0.3);
  486. border: 2rpx dashed #FFFFFF;
  487. }
  488. .first_and_title {
  489. width: 100%;
  490. line-height: 44rpx;
  491. text-align: center;
  492. font-size: 28rpx;
  493. font-weight: 500;
  494. color: #FFFFFF;
  495. }
  496. .first_and_title text {
  497. font-size: 32rpx;
  498. color: #FFFFFF;
  499. }
  500. .KnowBtn {
  501. margin-left: 271rpx;
  502. text-align: center;
  503. width: 208rpx;
  504. height: 76rpx;
  505. border-radius: 42rpx;
  506. border: 2rpx solid #FFFFFF;
  507. font-size: 32rpx;
  508. font-weight: 400;
  509. color: #FFFFFF;
  510. line-height: 76rpx;
  511. position: absolute;
  512. bottom: 60rpx;
  513. }
  514. /* <view class="list_top_show">
  515. <image class="list_top_img" src="/images/white_on.png"></image>
  516. <view class="list_top_content">
  517. <view class="first_and_title"><text>第一步</text>项目导航栏</view>
  518. <view class="first_and_title">可左右滑动快速筛选项目哟~</view>
  519. </view>
  520. </view> */
  521. .onIndex {
  522. position: absolute;
  523. z-index: 111;
  524. background: #ffffff;
  525. }
  526. .onIndex111 {
  527. position: relative;
  528. z-index: 11;
  529. }
  530. .opc {
  531. opacity: 0;
  532. }
  533. .opcBack {
  534. background: #ffffff;
  535. }
  536. .itemInNeeds {
  537. position: relative;
  538. border-radius: 24rpx;
  539. margin: 20rpx;
  540. }
  541. /* ========================================================== */
  542. .list_Content_show {
  543. margin-top: 75rpx;
  544. right: 33rpx;
  545. z-index: 1111;
  546. position: absolute;
  547. display: flex;
  548. align-items: center;
  549. flex-direction: column;
  550. }
  551. .list_Content_img {
  552. width: 40rpx;
  553. height: 40rpx;
  554. }
  555. .list_top_contents {
  556. padding-top: 15rpx;
  557. margin-top: 20rpx;
  558. width: 248rpx;
  559. height: 113rpx;
  560. background: rgba(0, 0, 0, 0.3);
  561. border: 2rpx dashed #FFFFFF;
  562. }
  563. .timeSelect {
  564. margin-bottom: 15rpx;
  565. width: 196rpx;
  566. height: 88rpx;
  567. background: #FFFFFF;
  568. display: flex;
  569. align-items: center;
  570. justify-content: center;
  571. }
  572. .timeShow {
  573. width: 156rpx;
  574. height: 48rpx;
  575. background: #FF3007;
  576. border-radius: 8rpx;
  577. text-align: center;
  578. font-size: 28rpx;
  579. font-weight: 500;
  580. color: #FFFFFF;
  581. line-height: 48rpx;
  582. }
  583. .good-list {
  584. height: auto;
  585. overflow: scroll;
  586. }
  587. .submitBtn {
  588. position: relative;
  589. left: 50%;
  590. transform: translateX(-50%);
  591. width: 90%;
  592. height: 84rpx;
  593. text-align: center;
  594. line-height: 84rpx;
  595. background: #FA7D22;
  596. border-radius: 42rpx;
  597. font-size: 16px;
  598. font-family: PingFangSC-Medium, PingFang SC;
  599. font-weight: 500;
  600. color: #FFFFFF;
  601. }
  602. .project-num {
  603. text-align: end;
  604. font-size: 28rpx;
  605. font-family: PingFangSC-Regular, PingFang SC;
  606. font-weight: 400;
  607. color: #333333;
  608. line-height: 40rpx;
  609. }
  610. .price-size {
  611. font-size: 20rpx;
  612. font-family: PingFangSC-Medium, PingFang SC;
  613. font-weight: 500;
  614. color: #333333;
  615. line-height: 24rpx;
  616. }
  617. .item-bottom {
  618. display: flex;
  619. justify-content: space-between;
  620. padding: 20rpx 24rpx 32rpx 24rpx;
  621. }
  622. .item-total {
  623. font-size: 28rpx;
  624. font-family: PingFangSC-Regular, PingFang SC;
  625. font-weight: 400;
  626. color: #999999;
  627. line-height: 40rpx;
  628. }
  629. .item-price {
  630. font-size: 36rpx;
  631. font-family: PingFangSC-Medium, PingFang SC;
  632. font-weight: 500;
  633. color: #333333;
  634. line-height: 50rpx;
  635. }
  636. /* 低价换购 */
  637. .exchange-details {
  638. background: #fff;
  639. opacity: 0.8;
  640. position: relative;
  641. border-radius: 24rpx;
  642. margin: 20rpx;
  643. padding: 20rpx 24rpx;
  644. font-size: 28rpx;
  645. color: #333;
  646. }
  647. .exchange-details-title {
  648. margin-bottom: 30rpx;
  649. /* font-size: 28rpx; */
  650. font-size: 36rpx;
  651. font-family: PingFangSC-Semibold, PingFang SC;
  652. font-weight: 600;
  653. }
  654. .exchange-box {
  655. display: flex;
  656. margin-bottom: 20rpx;
  657. height: 160rpx;
  658. border-radius: 10px;
  659. position: relative;
  660. }
  661. .exchange-box:last-child{
  662. margin-bottom: 0;
  663. }
  664. .exchange-condition{
  665. background-color:#F7F8FA;
  666. }
  667. .exchange-box-image image {
  668. width: 160rpx;
  669. height: 160rpx;
  670. margin-right: 20rpx;
  671. border-radius: 20rpx;
  672. }
  673. .exchange-box-image{
  674. position: relative;
  675. }
  676. .exchange-condition-image{
  677. position: absolute;
  678. top: 0;
  679. background-color: #FFFFFF;
  680. opacity: 0.5;
  681. z-index: 2;
  682. width: 160rpx;
  683. height: 160rpx;
  684. border-radius: 20rpx;
  685. }
  686. .exchange-info-bottom {
  687. margin-top: 50rpx;
  688. display: flex;
  689. justify-content: space-between;
  690. }
  691. .exchange-info-price {
  692. color: #333333;
  693. font-size: 20rpx;
  694. }
  695. .exchange-info-price .price__big{
  696. font-size: 36rpx;
  697. }
  698. .exchange-info-price .price__small{
  699. font-size: 20rpx;
  700. }
  701. .exchange-info-title {
  702. width: 420rpx;
  703. white-space: nowrap;
  704. overflow: hidden;
  705. text-overflow: ellipsis;
  706. }
  707. .exchange-info{
  708. height: 160rpx;
  709. padding-top: 20rpx;
  710. box-sizing: border-box;
  711. display: flex;
  712. }
  713. .exchange-tip{
  714. position: absolute;
  715. bottom: 0;
  716. height: 56rpx;
  717. background-color: #FFF6DF;
  718. width: 100%;
  719. z-index: 3;
  720. border-radius: 0px 0px 10px 10px;
  721. display: flex;
  722. justify-content: center;
  723. align-items: center;
  724. font-size: 24rpx;
  725. color: #333;
  726. }
  727. .exchange-tip text{
  728. color: #FF3007;
  729. font-size: 24rpx;
  730. }