orderConfirm.wxss 15 KB

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