createOrder.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. .uni-popup.data-v-7da806a4 {
  12. position: fixed;
  13. top: 0;
  14. bottom: 0;
  15. left: 0;
  16. right: 0;
  17. z-index: 99;
  18. }
  19. .uni-popup__mask.data-v-7da806a4 {
  20. position: absolute;
  21. top: 0;
  22. bottom: 0;
  23. left: 0;
  24. right: 0;
  25. background-color: rgba(0, 0, 0, 0.4);
  26. opacity: 0;
  27. }
  28. .mask-ani.data-v-7da806a4 {
  29. transition-property: opacity;
  30. transition-duration: 0.2s;
  31. }
  32. .uni-top-mask.data-v-7da806a4 {
  33. opacity: 1;
  34. }
  35. .uni-bottom-mask.data-v-7da806a4 {
  36. opacity: 1;
  37. }
  38. .uni-center-mask.data-v-7da806a4 {
  39. opacity: 1;
  40. }
  41. .uni-popup__wrapper.data-v-7da806a4 {
  42. display: block;
  43. position: absolute;
  44. }
  45. .top.data-v-7da806a4 {
  46. top: 0;
  47. left: 0;
  48. right: 0;
  49. -webkit-transform: translateY(-500px);
  50. transform: translateY(-500px);
  51. }
  52. .bottom.data-v-7da806a4 {
  53. bottom: 0;
  54. left: 0;
  55. right: 0;
  56. -webkit-transform: translateY(500px);
  57. transform: translateY(500px);
  58. }
  59. .center.data-v-7da806a4 {
  60. display: flex;
  61. flex-direction: column;
  62. bottom: 0;
  63. left: 0;
  64. right: 0;
  65. top: 0;
  66. justify-content: center;
  67. align-items: center;
  68. -webkit-transform: scale(1.2);
  69. transform: scale(1.2);
  70. opacity: 0;
  71. }
  72. .uni-popup__wrapper-box.data-v-7da806a4 {
  73. display: block;
  74. position: relative;
  75. }
  76. .content-ani.data-v-7da806a4 {
  77. transition-property: opacity, -webkit-transform;
  78. transition-property: transform, opacity;
  79. transition-property: transform, opacity, -webkit-transform;
  80. transition-duration: 0.2s;
  81. }
  82. .uni-top-content.data-v-7da806a4 {
  83. -webkit-transform: translateY(0);
  84. transform: translateY(0);
  85. }
  86. .uni-bottom-content.data-v-7da806a4 {
  87. -webkit-transform: translateY(0);
  88. transform: translateY(0);
  89. }
  90. .uni-center-content.data-v-7da806a4 {
  91. -webkit-transform: scale(1);
  92. transform: scale(1);
  93. opacity: 1;
  94. }
  95. @charset "UTF-8";
  96. /* 页面左右间距 */
  97. /* 文字尺寸 */
  98. /*文字颜色*/
  99. /* 边框颜色 */
  100. /*颜色*/
  101. /* 图片加载中颜色 */
  102. /* 行为相关颜色 */
  103. /* 功能栏字体大小 */
  104. /*功能栏左侧小图标*/
  105. page {
  106. background: #f8f6f6;
  107. padding-bottom: 100rpx;
  108. }
  109. .all {
  110. margin-top: -20rpx;
  111. }
  112. .navbar {
  113. display: flex;
  114. height: 80rpx;
  115. padding: 0 5px;
  116. background: #fff;
  117. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  118. position: relative;
  119. z-index: 10;
  120. }
  121. .navbar .nav-item {
  122. flex: 1;
  123. display: flex;
  124. justify-content: center;
  125. align-items: center;
  126. height: 100%;
  127. font-size: 36rpx;
  128. color: #303133;
  129. position: relative;
  130. }
  131. .navbar .nav-item.current {
  132. color: #921a23;
  133. }
  134. .navbar .nav-item.current:after {
  135. content: '';
  136. position: absolute;
  137. left: 50%;
  138. bottom: 0;
  139. -webkit-transform: translateX(-50%);
  140. transform: translateX(-50%);
  141. width: 140rpx;
  142. height: 0;
  143. border-bottom: 2px solid #921a23;
  144. }
  145. .address-section {
  146. background: #fff;
  147. position: relative;
  148. border-top: 1px solid #ebeef5;
  149. }
  150. .address-section .order-content {
  151. min-height: 100rpx;
  152. display: flex;
  153. align-items: center;
  154. }
  155. .address-section .order-content .addAddress {
  156. text-align: center;
  157. width: 100%;
  158. display: flex;
  159. justify-content: center;
  160. align-items: center;
  161. }
  162. .address-section .order-content .addAddress .iconaddition {
  163. font-size: 55rpx;
  164. line-height: 1;
  165. border-radius: 100rpx;
  166. margin-right: 20rpx;
  167. }
  168. .address-section .iconlocation {
  169. flex-shrink: 0;
  170. display: flex;
  171. align-items: center;
  172. justify-content: center;
  173. width: 90rpx;
  174. color: #888;
  175. font-size: 44rpx;
  176. }
  177. .address-section .cen {
  178. display: flex;
  179. flex-direction: column;
  180. flex: 1;
  181. font-size: 28rpx;
  182. color: #303133;
  183. }
  184. .address-section .name {
  185. font-size: 34rpx;
  186. margin-right: 24rpx;
  187. }
  188. .address-section .address {
  189. margin-top: 16rpx;
  190. margin-right: 20rpx;
  191. color: #909399;
  192. }
  193. .address-section .icon-you {
  194. font-size: 32rpx;
  195. color: #909399;
  196. margin-right: 30rpx;
  197. }
  198. .address-section .a-bg {
  199. position: absolute;
  200. left: 0;
  201. bottom: 0;
  202. display: block;
  203. width: 100%;
  204. height: 5rpx;
  205. }
  206. .goods-section {
  207. background: #fff;
  208. padding-bottom: 1px;
  209. }
  210. .goods-section .g-header {
  211. display: flex;
  212. align-items: center;
  213. height: 84rpx;
  214. padding: 0 30rpx;
  215. position: relative;
  216. }
  217. .goods-section .logo {
  218. display: block;
  219. width: 50rpx;
  220. height: 50rpx;
  221. border-radius: 100px;
  222. }
  223. .goods-section .name {
  224. font-size: 30rpx;
  225. color: #606266;
  226. margin-left: 24rpx;
  227. }
  228. .goods-section .g-item {
  229. display: flex;
  230. margin: 20rpx 30rpx;
  231. padding: 30rpx 0;
  232. position: relative;
  233. }
  234. .goods-section .g-item image {
  235. flex-shrink: 0;
  236. display: block;
  237. width: 180rpx;
  238. height: 180rpx;
  239. border-radius: 4rpx;
  240. }
  241. .goods-section .g-item .right {
  242. flex: 1;
  243. padding-left: 24rpx;
  244. overflow: hidden;
  245. }
  246. .goods-section .g-item .title {
  247. width: 475rpx;
  248. font-size: 30rpx;
  249. color: #303133;
  250. }
  251. .goods-section .g-item .spec {
  252. display: inline-block;
  253. position: absolute;
  254. top: 130rpx;
  255. font-size: 23rpx;
  256. font-size: 24rpx;
  257. font-weight: 500;
  258. color: #8a857c;
  259. line-height: 1;
  260. }
  261. .goods-section .g-item .price-box {
  262. display: flex;
  263. align-items: center;
  264. font-size: 32rpx;
  265. color: #303133;
  266. padding-top: 10rpx;
  267. position: absolute;
  268. top: 150rpx;
  269. }
  270. .goods-section .g-item .price-box .price {
  271. font-size: 32rpx;
  272. font-weight: bold;
  273. color: #901b21;
  274. }
  275. .goods-section .g-item .price-box .number {
  276. margin-left: 20rpx;
  277. font-size: 24rpx;
  278. font-weight: 500;
  279. color: #9d9d9d;
  280. text-decoration: line-through;
  281. }
  282. .goods-section .g-item .step-box {
  283. position: relative;
  284. }
  285. .yt-list {
  286. margin-top: 16rpx;
  287. background: #fff;
  288. }
  289. .yt-list-cell {
  290. display: flex;
  291. align-items: center;
  292. padding: 10rpx 30rpx 10rpx 40rpx;
  293. line-height: 70rpx;
  294. position: relative;
  295. }
  296. .yt-list-cell.cell-hover {
  297. background: #fafafa;
  298. }
  299. .yt-list-cell.b-b:after {
  300. left: 30rpx;
  301. }
  302. .yt-list-cell .cell-icon {
  303. height: 32rpx;
  304. width: 32rpx;
  305. font-size: 22rpx;
  306. color: #fff;
  307. text-align: center;
  308. line-height: 32rpx;
  309. background: #f85e52;
  310. border-radius: 4rpx;
  311. margin-right: 12rpx;
  312. }
  313. .yt-list-cell .cell-icon.hb {
  314. background: #ffaa0e;
  315. }
  316. .yt-list-cell .cell-icon.lpk {
  317. background: #3ab54a;
  318. }
  319. .yt-list-cell .cell-more {
  320. align-self: center;
  321. font-size: 24rpx;
  322. color: #909399;
  323. margin-left: 8rpx;
  324. margin-right: -10rpx;
  325. }
  326. .yt-list-cell .cell-tit {
  327. flex: 1;
  328. font-size: 26rpx;
  329. color: #909399;
  330. margin-right: 10rpx;
  331. }
  332. .yt-list-cell .cell-tip {
  333. font-size: 26rpx;
  334. color: #303133;
  335. }
  336. .yt-list-cell .cell-tip.disabled {
  337. color: #909399;
  338. }
  339. .yt-list-cell .cell-tip.active {
  340. color: #921a23;
  341. }
  342. .yt-list-cell .cell-tip.red {
  343. color: #921a23;
  344. }
  345. .yt-list-cell.desc-cell .cell-tit {
  346. max-width: 90rpx;
  347. }
  348. .yt-list-cell .desc {
  349. flex: 1;
  350. text-align: right;
  351. font-size: 28rpx;
  352. color: #303133;
  353. }
  354. /* 支付列表 */
  355. .pay-list {
  356. padding-left: 40rpx;
  357. margin-top: 16rpx;
  358. background: #fff;
  359. }
  360. .pay-list .pay-item {
  361. display: flex;
  362. align-items: center;
  363. padding-right: 20rpx;
  364. line-height: 1;
  365. height: 110rpx;
  366. position: relative;
  367. }
  368. .pay-list .icon-weixinzhifu {
  369. width: 80rpx;
  370. font-size: 40rpx;
  371. color: #6bcc03;
  372. }
  373. .pay-list .icon-alipay {
  374. width: 80rpx;
  375. font-size: 40rpx;
  376. color: #06b4fd;
  377. }
  378. .pay-list .icon-xuanzhong2 {
  379. display: flex;
  380. align-items: center;
  381. justify-content: center;
  382. width: 60rpx;
  383. height: 60rpx;
  384. font-size: 40rpx;
  385. color: #921a23;
  386. }
  387. .pay-list .tit {
  388. font-size: 32rpx;
  389. color: #303133;
  390. flex: 1;
  391. }
  392. .footer {
  393. position: fixed;
  394. left: 0;
  395. bottom: 0;
  396. z-index: 995;
  397. display: flex;
  398. align-items: center;
  399. width: 100%;
  400. height: 90rpx;
  401. justify-content: space-between;
  402. font-size: 30rpx;
  403. background-color: #fff;
  404. z-index: 998;
  405. color: #606266;
  406. box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  407. }
  408. .footer .price-content {
  409. padding-left: 30rpx;
  410. }
  411. .footer .price-tip {
  412. color: #901b21;
  413. margin-left: 8rpx;
  414. }
  415. .footer .price {
  416. font-size: 36rpx;
  417. color: #901b21;
  418. }
  419. .footer .submit {
  420. display: flex;
  421. align-items: center;
  422. justify-content: center;
  423. width: 280rpx;
  424. height: 100%;
  425. color: #fff;
  426. font-size: 32rpx;
  427. background-color: #921a23;
  428. }
  429. .footer .submit.submitNo {
  430. background-color: #c0c4cc;
  431. }
  432. /* 优惠券面板 */
  433. .mask {
  434. display: flex;
  435. align-items: flex-end;
  436. position: fixed;
  437. left: 0;
  438. top: 0px;
  439. bottom: 0;
  440. width: 100%;
  441. background: rgba(0, 0, 0, 0);
  442. z-index: 9995;
  443. transition: 0.3s;
  444. }
  445. .mask .mask-content {
  446. width: 100%;
  447. max-height: 70vh;
  448. background: #f3f3f3;
  449. -webkit-transform: translateY(100%);
  450. transform: translateY(100%);
  451. transition: 0.3s;
  452. overflow-y: scroll;
  453. }
  454. .mask.none {
  455. display: none;
  456. }
  457. .mask.show {
  458. background: rgba(0, 0, 0, 0.4);
  459. }
  460. .mask.show .mask-content {
  461. -webkit-transform: translateY(0);
  462. transform: translateY(0);
  463. }
  464. /* 优惠券列表 */
  465. .coupon-item {
  466. display: flex;
  467. flex-direction: column;
  468. margin: 20rpx 24rpx;
  469. background: #fff;
  470. }
  471. .coupon-item .con {
  472. display: flex;
  473. align-items: center;
  474. position: relative;
  475. height: 120rpx;
  476. padding: 0 30rpx;
  477. }
  478. .coupon-item .con:after {
  479. position: absolute;
  480. left: 0;
  481. bottom: 0;
  482. content: '';
  483. width: 100%;
  484. height: 0;
  485. border-bottom: 1px dashed #f3f3f3;
  486. -webkit-transform: scaleY(50%);
  487. transform: scaleY(50%);
  488. }
  489. .coupon-item .left {
  490. display: flex;
  491. flex-direction: column;
  492. justify-content: center;
  493. flex: 1;
  494. overflow: hidden;
  495. height: 100rpx;
  496. }
  497. .coupon-item .title {
  498. font-size: 32rpx;
  499. color: #303133;
  500. margin-bottom: 10rpx;
  501. }
  502. .coupon-item .time {
  503. font-size: 24rpx;
  504. color: #909399;
  505. }
  506. .coupon-item .right {
  507. display: flex;
  508. flex-direction: column;
  509. justify-content: center;
  510. align-items: center;
  511. font-size: 26rpx;
  512. color: #606266;
  513. height: 100rpx;
  514. }
  515. .coupon-item .price {
  516. font-size: 44rpx;
  517. color: #921a23;
  518. }
  519. .coupon-item .price:before {
  520. content: '¥';
  521. font-size: 34rpx;
  522. }
  523. .coupon-item .tips {
  524. font-size: 24rpx;
  525. color: #909399;
  526. line-height: 60rpx;
  527. padding-left: 30rpx;
  528. }
  529. .coupon-item .circle {
  530. position: absolute;
  531. left: -6rpx;
  532. bottom: -10rpx;
  533. z-index: 10;
  534. width: 20rpx;
  535. height: 20rpx;
  536. background: #f3f3f3;
  537. border-radius: 100px;
  538. }
  539. .coupon-item .circle.r {
  540. left: auto;
  541. right: -6rpx;
  542. }
  543. .top-nav {
  544. width: 750rpx;
  545. height: 94rpx;
  546. background: #ffffff;
  547. display: flex;
  548. padding: 0 27rpx 0 35rpx;
  549. justify-content: space-between;
  550. align-items: center;
  551. }
  552. .top-nav .top-title {
  553. line-height: 94rpx;
  554. font-size: 30rpx;
  555. font-weight: 500;
  556. color: #333333;
  557. }
  558. .top-nav .top-btn {
  559. width: 168rpx;
  560. height: 56rpx;
  561. background: #901b21;
  562. border-radius: 14rpx;
  563. padding: 4rpx;
  564. display: flex;
  565. justify-content: space-between;
  566. }
  567. .top-nav .top-btn view {
  568. width: 76rpx;
  569. height: 48rpx;
  570. border-radius: 12rpx;
  571. text-align: center;
  572. color: #fff;
  573. background: #901b21;
  574. }
  575. .top-nav .top-btn .action {
  576. color: #901b21;
  577. background: #ffffff;
  578. }
  579. .price-info {
  580. width: 750rpx;
  581. padding: 20rpx 30rpx;
  582. background-color: #fff;
  583. font-size: 24rpx;
  584. font-weight: 500;
  585. color: #666666;
  586. }
  587. .price-info .item {
  588. display: flex;
  589. justify-content: space-between;
  590. line-height: 36rpx;
  591. }
  592. #list-box .chose {
  593. margin-top: 25rpx;
  594. background-color: #ffffff;
  595. display: flex;
  596. justify-content: space-between;
  597. padding: 32rpx 24rpx;
  598. font-size: 30rpx;
  599. }
  600. #list-box .chose .title {
  601. color: #333;
  602. }
  603. #list-box .chose .chose-name {
  604. display: flex;
  605. align-items: center;
  606. color: #901b21;
  607. }
  608. #list-box .chose .chose-name .img {
  609. width: 30rpx;
  610. height: 24rpx;
  611. }
  612. #list-box .chose .chose-name .img image {
  613. width: 30rpx;
  614. height: 24rpx;
  615. display: inline;
  616. }
  617. #list-box .personal {
  618. margin-top: 15rpx;
  619. display: flex;
  620. flex-direction: column;
  621. background-color: #ffffff;
  622. }
  623. #list-box .personal .box-right {
  624. width: 100%;
  625. font-size: 30rpx;
  626. text-align: right;
  627. padding-right: 25rpx;
  628. }
  629. #list-box .personal .info {
  630. padding: 10rpx 25rpx;
  631. display: flex;
  632. align-items: center;
  633. font-size: 30rpx;
  634. justify-content: space-between;
  635. }
  636. #list-box .personal .info .name {
  637. width: 120rpx;
  638. }
  639. #list-box .personal .info input {
  640. margin-left: 12rpx;
  641. width: 100%;
  642. display: block;
  643. color: #999999;
  644. }
  645. .stores-wrapper {
  646. padding-top: 20rpx;
  647. height: 100%;
  648. }
  649. .stores-wrapper .store {
  650. width: 710rpx;
  651. background: #ffffff;
  652. box-shadow: 0px 0px 20rpx 0rpx rgba(50, 50, 52, 0.06);
  653. border-radius: 10rpx;
  654. margin: 0 auto 15rpx;
  655. position: relative;
  656. padding: 25rpx 0 20rpx 20rpx;
  657. }
  658. .stores-wrapper .store .store-logo {
  659. height: 65rpx;
  660. font-size: 32rpx;
  661. font-weight: bold;
  662. color: #333333;
  663. line-height: 65rpx;
  664. margin-bottom: 20rpx;
  665. position: relative;
  666. }
  667. .stores-wrapper .store .store-logo image {
  668. width: 65rpx;
  669. height: 65rpx;
  670. border-radius: 50%;
  671. }
  672. .stores-wrapper .store .store-logo .store-name {
  673. max-width: 500rpx;
  674. display: inline-block;
  675. padding-left: 12rpx;
  676. position: absolute;
  677. top: 0;
  678. }
  679. .stores-wrapper .store .store-base {
  680. height: 37rpx;
  681. line-height: 37rpx;
  682. font-size: 24rpx;
  683. font-weight: bold;
  684. color: #333333;
  685. }
  686. .stores-wrapper .store .store-base text {
  687. font-weight: normal;
  688. }
  689. .stores-wrapper .store .store-lv {
  690. display: inline-block;
  691. padding: 0 10rpx;
  692. height: 40rpx;
  693. background: linear-gradient(-90deg, #dcb876 0%, #eecd92 100%);
  694. border-radius: 5rpx;
  695. text-align: center;
  696. line-height: 40rpx;
  697. color: #fff;
  698. font-size: 23rpx;
  699. position: absolute;
  700. right: 20rpx;
  701. top: 38rpx;
  702. }
  703. .stores-wrapper .store .store-can {
  704. width: 113rpx;
  705. height: 44rpx;
  706. border: 2px solid #901b21;
  707. border-radius: 5rpx;
  708. font-size: 23rpx;
  709. text-align: center;
  710. line-height: 44rpx;
  711. font-weight: 500;
  712. color: #901b21;
  713. position: absolute;
  714. right: 20rpx;
  715. bottom: 25rpx;
  716. }
  717. .choose {
  718. margin-top: 20rpx;
  719. background-color: #fff;
  720. padding: 10rpx 50rpx 10rpx 25rpx;
  721. line-height: 70rpx;
  722. justify-content: space-between;
  723. }
  724. .choose .choose-tit {
  725. width: 220rpx;
  726. }
  727. .choose .ps-time {
  728. text-align: right;
  729. width: 200rpx;
  730. }