order.wxss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771
  1. page {
  2. /* height: 100%; */
  3. width: 100%;
  4. background: #f4f4f4;
  5. }
  6. .orders-switch {
  7. width: 100%;
  8. background: #fff;
  9. height: 84rpx;
  10. /* border-bottom: 1px solid rgba(0,0,0,.15); */
  11. }
  12. .orders-switch .item {
  13. display: inline-block;
  14. height: 82rpx;
  15. width: 18%;
  16. padding: 0 15rpx;
  17. text-align: center;
  18. }
  19. .orders-switch .item .txt {
  20. display: inline-block;
  21. height: 82rpx;
  22. padding: 0 20rpx;
  23. line-height: 82rpx;
  24. color: #9a9ba1;
  25. font-size: 30rpx;
  26. width: 170rpx;
  27. }
  28. .orders-switch .item.active .txt {
  29. color: #ab956d;
  30. border-bottom: 4rpx solid #ab956d;
  31. }
  32. .no-order {
  33. width: 100%;
  34. height: auto;
  35. margin: 0 auto;
  36. }
  37. .no-order .c {
  38. width: 100%;
  39. height: auto;
  40. padding-top: 400rpx;
  41. }
  42. .no-order .c text {
  43. margin: 0 auto;
  44. display: block;
  45. width: 258rpx;
  46. height: 29rpx;
  47. line-height: 29rpx;
  48. text-align: center;
  49. font-size: 29rpx;
  50. color: #999;
  51. }
  52. .orders {
  53. height: auto;
  54. width: 750rpx;
  55. /* overflow: hidden; */
  56. padding:0 24rpx;
  57. margin-top:110rpx;
  58. }
  59. .order {
  60. /* margin-top: 20rpx; */
  61. background: #fff;
  62. padding:0 24rpx 24rpx 24rpx;
  63. border-radius: 24rpx;
  64. margin-bottom:24rpx;
  65. }
  66. .order .h {
  67. height: 72rpx;
  68. border-bottom: 2rpx solid #E0E0E0;
  69. color: #191919;
  70. font-size: 28rpx;
  71. font-weight: bold;
  72. display: flex;
  73. align-items: center;
  74. justify-content: space-between;
  75. }
  76. .order .goods {
  77. display: flex;
  78. /* align-items: center; */
  79. /* height: 199rpx; */
  80. padding:24rpx 0 0;
  81. position: relative;
  82. }
  83. .order .goods .img {
  84. height: 190rpx;
  85. width: 190rpx;
  86. background: #f4f4f4;
  87. }
  88. .order .goods .img image {
  89. height: 190rpx;
  90. width: 190rpx;
  91. overflow: hidden;
  92. border-radius: 10rpx;
  93. }
  94. .order .goods .info {
  95. height: 145.83rpx;
  96. flex: 1;
  97. padding-left: 20rpx;
  98. }
  99. .info-orderSn {
  100. font-size: 28rpx;
  101. font-weight: bold;
  102. }
  103. .info-main{
  104. display: flex;
  105. height: 40rpx;
  106. align-items: center;
  107. justify-content: space-between;
  108. /* margin-bottom: 58rpx; */
  109. }
  110. .info .sku-name{
  111. color: #666666;
  112. font-size: 24rpx;
  113. margin:10rpx 0;
  114. height: 34rpx;
  115. line-height: 34rpx;
  116. display: flex;
  117. justify-content: space-between;
  118. }
  119. .product-name {
  120. line-height: 40rpx;
  121. font-size: 28rpx;
  122. /* padding-left: 20rpx;
  123. text-indent: -16rpx; */
  124. overflow: hidden;
  125. text-overflow: ellipsis;
  126. white-space: nowrap;
  127. width: 328rpx;
  128. font-weight: bold;
  129. color: rgba(0,0,0,0.9);
  130. }
  131. .info-main .price{
  132. color: rgba(0,0,0,0.9);
  133. font-size: 24rpx;
  134. font-weight: bold;
  135. }
  136. .info .other-info {
  137. font-size: 24rpx;
  138. color: rgba(0,0,0,0.9);
  139. line-height: 34rpx;
  140. }
  141. .order .goods .status {
  142. width: 105rpx;
  143. color: #b4282d;
  144. font-size: 25rpx;
  145. }
  146. .order .b {
  147. height: 44rpx;
  148. line-height: 44rpx;
  149. /* border-top: 1px solid #f4f4f4; */
  150. font-size: 26rpx;
  151. color: #666;
  152. text-align: right;
  153. }
  154. .order .b text{
  155. font-size: 24rpx;
  156. color: rgba(0,0,0,0.9);
  157. font-weight: bold;
  158. }
  159. .order .b .r {
  160. float: right;
  161. }
  162. .order .b .btn {
  163. margin-top: 19rpx;
  164. height: 64.5rpx;
  165. line-height: 64.5rpx;
  166. text-align: center;
  167. padding: 0 20rpx;
  168. border-radius: 5rpx;
  169. font-size: 28rpx;
  170. color: #fff;
  171. background: #b4282d;
  172. }
  173. .order-operate-wrapper{
  174. /* height: 80rpx; */
  175. display: flex;
  176. align-items: center;
  177. justify-content: flex-end;
  178. flex:1;
  179. flex-wrap: wrap;
  180. border-top: 2rpx solid #E0E0E0;
  181. padding:10rpx 0 12rpx;
  182. margin:20rpx 0 0;
  183. }
  184. /* .order-operate-wrapper::after {
  185. content: '';
  186. flex: auto;
  187. } */
  188. .order-operate-wrapper>view{
  189. text-align: center;
  190. font-size: 24rpx;
  191. color: #fff;
  192. margin-left:20rpx;
  193. width: 160rpx;
  194. height: 56rpx;
  195. line-height: 56rpx;
  196. background: linear-gradient(90deg, #FF9C49 0%, #FF8219 100%);
  197. border-radius: 56rpx;
  198. margin-top:10rpx;
  199. }
  200. .order-operate-wrapper>view.del{
  201. border: 2rpx solid #D8D8D8;
  202. color: #666666;
  203. background: #fff;
  204. }
  205. .order-operate-wrapper>view.appoint{
  206. background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%);
  207. }
  208. .myqr{
  209. position: fixed;
  210. z-index: 999;
  211. width: 100%;
  212. text-align: center;
  213. height: auto;
  214. padding-top: 50rpx;
  215. top:0;
  216. left:0;
  217. right:0;
  218. bottom:0;
  219. }
  220. .myqr .cancel{
  221. width: 60rpx;
  222. height: 60rpx;
  223. margin-top: 30rpx;
  224. margin-left: 480rpx;
  225. }
  226. .myqr .img{
  227. width: 480rpx;
  228. }
  229. .myqr .btn{
  230. width: 120rpx;
  231. height: 120rpx;
  232. line-height: 120rpx;
  233. margin-top: 20rpx;
  234. padding: 30rpx;
  235. background: #ffffff;
  236. border-radius:60rpx;
  237. }
  238. /* 会员卡蒙层的样式 */
  239. .poster{
  240. position: fixed;
  241. top: 0;
  242. bottom: 0;
  243. right: 0;
  244. left: 0;
  245. background-color: #333333d1;
  246. /* padding: 0rpx 80rpx;
  247. padding-top: 20%;*/
  248. z-index: 99;
  249. height: 100%;
  250. text-align: center;
  251. justify-content: center;
  252. align-items: center;
  253. display: flex;
  254. }
  255. .title{
  256. color: #fff;
  257. margin: 20rpx 0;
  258. font-size: 30rpx;
  259. }
  260. .ads{
  261. margin: 10rpx 0rpx;
  262. color: #fff;
  263. }
  264. .tool{
  265. display: flex;
  266. text-align: center;
  267. justify-content: baseline;
  268. width: 100%;
  269. margin-top: 20rpx;
  270. }
  271. .tool view{
  272. flex: 1;
  273. }
  274. .img{
  275. width: 99rpx;
  276. }
  277. .closeImg{
  278. width: 57rpx;
  279. height: 57rpx;
  280. }
  281. .share-btn{
  282. background-color:transparent;
  283. }
  284. .share-btn::after {
  285. border: none;
  286. }
  287. .m-card{
  288. width: 100%;
  289. height: 230rpx;
  290. margin: 20rpx 0;
  291. }
  292. .m-card image{
  293. width: 100%;
  294. height: 230rpx;
  295. }
  296. .appoint-tabs-wrapper{
  297. height:88rpx;
  298. display: flex;
  299. align-items: center;
  300. line-height: 88rpx;
  301. justify-content: space-around;
  302. position: fixed;
  303. left:0;
  304. right:0;
  305. top:0;
  306. background: #fff;
  307. z-index:99;
  308. }
  309. .appoint-tab-item{
  310. font-weight: bold;
  311. font-size: 30rpx;
  312. color: #191919;
  313. /* width:80rpx; */
  314. /* border-bottom:4rpx solid #fff; */
  315. }
  316. .appoint-tab-item.active{
  317. color:#FE2B54;
  318. /* border-bottom:4rpx solid #09afff; */
  319. }
  320. .detail-btn{
  321. width: 148rpx;
  322. text-align: center;
  323. line-height: 60rpx;
  324. text-align: center;
  325. font-size: 26rpx;
  326. color:#00B9FF;
  327. margin-top:-20rpx;
  328. /* margin-left:340rpx; */
  329. width: 170rpx;
  330. height: 60rpx;
  331. background: #FFFFFF;
  332. border: 2rpx solid #00B9FF;
  333. border-radius: 60px;
  334. float: right;
  335. }
  336. .status-tips{
  337. height: 56rpx;
  338. background: #EBEBEB;
  339. border-radius: 10rpx;
  340. display: flex;
  341. align-items: center;
  342. padding:0 0 0 16rpx;
  343. margin-top:24rpx;
  344. }
  345. .status-tips image{
  346. width:36rpx;
  347. height:32rpx;
  348. }
  349. .status-tips view{
  350. font-size: 24rpx;
  351. color:#2e3333;
  352. }
  353. .status-tips .tips-title{
  354. color: #191919;
  355. font-weight: bold;
  356. margin:0 16rpx;
  357. }
  358. .customer-msg{
  359. background: #EBEBEB;
  360. border-radius: 10rpx;
  361. display: flex;
  362. padding:12rpx 16rpx;
  363. margin-top:24rpx;
  364. }
  365. .customer-msg .msg-title{
  366. color: #FE2B54;
  367. font-weight: bold;
  368. font-size: 24rpx;
  369. white-space: nowrap;
  370. }
  371. .customer-msg .msg-text{
  372. line-height: 34rpx;
  373. display: -webkit-box;
  374. -webkit-box-orient: vertical;
  375. -webkit-line-clamp: 2;
  376. text-overflow: ellipsis;
  377. overflow: hidden;
  378. font-size: 24rpx;
  379. color: #000000;
  380. }
  381. .over-time{
  382. position: absolute;
  383. top:170rpx;
  384. right:0;
  385. line-height: 40rpx;
  386. color: #AD0000;
  387. font-size: 28rpx;
  388. }
  389. .eval-btn{
  390. text-align: center;
  391. font-size: 24rpx;
  392. color: #fff;
  393. margin-left:20rpx;
  394. width: 160rpx;
  395. height: 56rpx;
  396. line-height: 56rpx;
  397. background: linear-gradient(90deg, #FF9C49 0%, #FF8219 100%);
  398. border-radius: 56rpx;
  399. margin-top:10rpx;
  400. border: 2rpx solid #FF8219;
  401. color: #FF8219;
  402. background: #fff;
  403. }
  404. .order-operate-wrapper view.eval-btn{
  405. border: 2rpx solid #FF8219;
  406. color: #FF8219;
  407. background: #fff;
  408. }
  409. .tips-item{
  410. background: #fff;
  411. border-radius:12rpx;
  412. padding:30rpx 0rpx 0;
  413. margin-bottom: 20rpx;
  414. }
  415. .tips-item-title{
  416. display: flex;
  417. height:40rpx;
  418. align-items: center;
  419. justify-content: space-between;
  420. margin-bottom:20rpx;
  421. padding:0 32rpx;
  422. }
  423. .item-title-left{
  424. display: flex;
  425. align-items: center;
  426. }
  427. .item-title-left image{
  428. width:28rpx;
  429. height:28rpx;
  430. margin-right:8rpx;
  431. }
  432. .item-title-left text{
  433. font-size: 28rpx;
  434. font-weight: bold;
  435. color:#333;
  436. }
  437. .item-title-right{
  438. height: 34rpx;
  439. background: #FFFFFF;
  440. border-radius: 4rpx;
  441. border: 1rpx solid #5FB306;
  442. padding:0 8rpx;
  443. line-height: 34rpx;
  444. font-size: 22rpx;
  445. color: #5FB306;
  446. }
  447. .tips-item-line{
  448. display: flex;
  449. height:44rpx;
  450. margin-bottom:20rpx;
  451. align-items: center;
  452. justify-content: space-between;
  453. padding:0 32rpx;
  454. }
  455. .tips-item-line .line-left{
  456. font-size: 28rpx;
  457. color: #999999;
  458. }
  459. .tips-item-line .line-right{
  460. font-size: 28rpx;
  461. color: #333333;
  462. font-weight: bold;
  463. width:500rpx;
  464. overflow: hidden;
  465. white-space: nowrap;
  466. text-overflow: ellipsis;
  467. text-align: right;
  468. }
  469. .line-right text{
  470. color: #5FB306;
  471. }
  472. .tips-item-content{
  473. background: #FF4447;
  474. border-radius: 0rpx 0rpx 14rpx 14rpx;
  475. padding:24rpx 24rpx 24rpx 32rpx;
  476. line-height: 40rpx;
  477. font-size: 28rpx;
  478. color: rgba(255,255,255,0.9);
  479. }
  480. .order-devide{
  481. height:40rpx;
  482. margin-bottom:20rpx;
  483. display: flex;
  484. align-items: center;
  485. justify-content: space-between;
  486. padding:0 4rpx;
  487. }
  488. .order-devide .line{
  489. width: 290rpx;
  490. height: 1rpx;
  491. background: #979797;
  492. }
  493. .order-devide .devide-text{
  494. font-size: 28rpx;
  495. color: #999999;
  496. }
  497. /* 退款弹框 */
  498. .refund-order-overlay {
  499. width: 750rpx;
  500. height: 100vh;
  501. background: rgba(0, 0, 0, 0.5);
  502. display: flex;
  503. align-items: center;
  504. justify-content: center;
  505. position: fixed;
  506. top: 0;
  507. bottom: 0;
  508. z-index:999;
  509. flex-direction: column;
  510. }
  511. .refund-order-dialog {
  512. width: 606rpx;
  513. height: 644rpx;
  514. border-radius: 14rpx;
  515. background: #ffffff;
  516. border-radius: 20rpx;
  517. position: relative;
  518. padding: 300rpx 30rpx 40rpx;
  519. background: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund.png') no-repeat;
  520. background-color: #FFFFFF;
  521. background-size: 606rpx 210rpx;
  522. }
  523. .refund-order-dialog.refund-order-dia-success{
  524. padding: 200rpx 30rpx 40rpx;
  525. background-image: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund-success.png');
  526. height:auto;
  527. }
  528. .refund-order-dia-success .dia-btn-wrapper{
  529. justify-content: center;
  530. }
  531. .refund-order-dia-success .dia-cancel-btn{
  532. width:484rpx;
  533. font-weight: bold;
  534. border: 2rpx solid #0093FF;
  535. color: #0093FF;
  536. }
  537. .refund-dia-title {
  538. height: 56rpx;
  539. font-weight: bold;
  540. font-size: 40rpx;
  541. color: rgba(0,0,0,0.85);
  542. line-height: 56rpx;
  543. text-align: center;
  544. margin:60rpx 0 34rpx;
  545. }
  546. .refund-dia-tips {
  547. width: 540rpx;
  548. color: #333333;
  549. line-height: 46rpx;
  550. font-size: 32rpx;
  551. color: rgba(0,0,0,0.85);
  552. text-align: center;
  553. white-space: wrap;
  554. margin-bottom: 120rpx;
  555. font-weight: bold;
  556. }
  557. .dia-btn-wrapper {
  558. height:94rpx;
  559. display: flex;
  560. justify-content: space-between;
  561. }
  562. .dia-cancel-btn{
  563. width: 248rpx;
  564. height: 94rpx;
  565. line-height: 94rpx;
  566. border-radius: 94rpx;
  567. border: 2rpx solid #0093FF;
  568. font-size: 32rpx;
  569. color: #0093FF;
  570. /* font-weight: bold; */
  571. text-align: center;
  572. }
  573. .dia-conf-btn{
  574. width: 258rpx;
  575. height: 94rpx;
  576. line-height: 94rpx;
  577. border-radius: 94rpx;
  578. font-size: 32rpx;
  579. color: #fff;
  580. font-weight: bold;
  581. background: #0093FF;
  582. text-align: center;
  583. }
  584. .modify-list{
  585. margin:0 0 44rpx;
  586. max-height: 400rpx;
  587. overflow-y: scroll;
  588. }
  589. .modify-item{
  590. height: 46rpx;
  591. margin-bottom:18rpx;
  592. display: flex;
  593. align-items: center;
  594. justify-content: center;
  595. line-height: 46rpx;
  596. }
  597. .modify-item image{
  598. width:30rpx;
  599. height:30rpx;
  600. margin-right:16rpx;
  601. }
  602. .modify-item view{
  603. font-size: 32rpx;
  604. color: rgba(102,102,102,0.85);
  605. }
  606. .modify-item view.current-modify{
  607. color: rgba(0,0,0,0.85);
  608. font-weight: bold;
  609. }
  610. .modify-close{
  611. width:80rpx;
  612. height:80rpx;
  613. margin-top:58rpx;
  614. }
  615. .warning-color {
  616. background: linear-gradient(90deg, #af4318 0%, #c96405 100%) !important;
  617. }
  618. /* 选择备注 */
  619. .appoint-overlay-wrapper.remark-overlay {
  620. display: flex;
  621. align-items: flex-end;
  622. justify-content: center;
  623. position: fixed;
  624. top: 0;
  625. left: 0;
  626. right:0;
  627. bottom:0;
  628. background-color: rgba(0, 0, 0, 0.7);
  629. z-index: 999;
  630. }
  631. .remark-select {
  632. width: 750rpx;
  633. padding: 0 24rpx 56rpx;
  634. background: #ffffff;
  635. border-radius: 24rpx 24rpx 0 0;
  636. }
  637. .remark-select .title {
  638. font-weight: 600;
  639. color: #191919;
  640. font-size: 30rpx;
  641. height: 90rpx;
  642. line-height: 90rpx;
  643. text-align: center;
  644. border-bottom: 2rpx solid #e0e0e0;
  645. }
  646. .remark-item .remark-value {
  647. color: #191919;
  648. font-size: 26rpx;
  649. font-weight: bold;
  650. flex: 1;
  651. text-align: left;
  652. }
  653. .remark-list .remark-item {
  654. height: 84rpx;
  655. display: flex;
  656. border-bottom: 2rpx solid #e0e0e0;
  657. align-items: center;
  658. }
  659. .remark-item .radio-img {
  660. width: 26rpx;
  661. height: 26rpx;
  662. }
  663. .remark-conf-btn {
  664. width: 652rpx;
  665. height: 90rpx;
  666. line-height: 90rpx;
  667. border-radius: 90rpx;
  668. border: 4rpx solid #ff8219;
  669. text-align: center;
  670. font-size: 36rpx;
  671. color: #ff8219;
  672. margin: 0 auto;
  673. margin-top: 54rpx;
  674. }
  675. .remark-list .remark-item.ser-item{
  676. border:none;
  677. background: #B5EDFF;
  678. border-radius: 12px;
  679. height:130rpx;
  680. padding:0 30rpx;
  681. margin-bottom:24rpx;
  682. }
  683. .remark-list .remark-item.ser-item.current-ser{
  684. background: #FA6400;
  685. }
  686. .remark-item.ser-item .remark-value{
  687. color:#666;
  688. font-size: 32rpx;
  689. font-weight:normal;
  690. flex:1;
  691. }
  692. .remark-item.ser-item view{
  693. color:#666;
  694. font-size: 32rpx;
  695. font-weight:normal;
  696. }
  697. .remark-item.ser-item.current-ser .remark-value{
  698. color:#fff;
  699. font-weight:bold;
  700. }
  701. .remark-item.ser-item.current-ser view{
  702. color:#fff;
  703. font-weight:bold;
  704. }
  705. .remark-item.ser-item .radio-img{
  706. width:30rpx;
  707. height:30rpx;
  708. margin-right:26rpx;
  709. }
  710. .ser-right{
  711. text-align:right;
  712. }
  713. .remark-list.ser-list{
  714. min-height:500rpx;
  715. max-height: 800rpx;
  716. overflow-y: scroll;
  717. }