confirmOrder.scss 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430
  1. .confirm_order_container {
  2. width: 1200px;
  3. margin: 0 auto;
  4. margin-top: 20px;
  5. .pre_message,
  6. .receive_info {
  7. border: 1px solid #dddddd;
  8. border-radius: 2px;
  9. .exhibition {
  10. padding: 0 20px;
  11. margin-bottom: 10px;
  12. font-size: 14px;
  13. //font-family: Microsoft YaHei;
  14. font-weight: 400;
  15. color: #333333;
  16. display: flex;
  17. align-items: center;
  18. cursor: pointer;
  19. margin-top: 15px;
  20. img {
  21. width: 11px;
  22. height: 6px;
  23. margin-left: 8px;
  24. }
  25. }
  26. .exhibition_none {
  27. font-size: 14px;
  28. //font-family: Microsoft YaHei;
  29. font-weight: 400;
  30. color: #333333;
  31. text-align: center;
  32. margin-top: 15px;
  33. margin-bottom: 10px;
  34. }
  35. .pre_message_title,
  36. .receive_info_title {
  37. // height: 40px;
  38. // line-height: 40px;
  39. padding-top: 15px;
  40. padding-bottom: 13px;
  41. font-size: 16px;
  42. //font-family: Microsoft YaHei;
  43. font-weight: bold;
  44. color: #333333;
  45. padding-left: 20px;
  46. position: relative;
  47. display: flex;
  48. justify-content: space-between;
  49. .line {
  50. width: 3px;
  51. height: 26px;
  52. background-color: #e2231a;
  53. position: absolute;
  54. top: 50%;
  55. left: -1px;
  56. transform: translateY(-50%);
  57. }
  58. .add_ress {
  59. background-color: transparent;
  60. margin-right: 33px;
  61. font-size: 14px;
  62. //font-family: Microsoft YaHei;
  63. font-weight: 400;
  64. color: #005ea7;
  65. cursor: pointer;
  66. }
  67. }
  68. .receive_info_content {
  69. // height: 159px;
  70. padding: 0 20px;
  71. display: flex;
  72. flex-direction: column;
  73. }
  74. .pre_message_info {
  75. padding: 10px 40px;
  76. .tag_pre {
  77. display: inline-block;
  78. line-height: 25px;
  79. text-align: right;
  80. font-weight: 400;
  81. margin-right: 10px;
  82. font-size: 14px;
  83. color: #333333;
  84. display: flex;
  85. min-width: 100px;
  86. max-width: 200px;
  87. justify-content: flex-end;
  88. }
  89. strong {
  90. font-size: 14px;
  91. color: $colorMain;
  92. margin-right: 3px;
  93. }
  94. }
  95. .content_left {
  96. width: 100%;
  97. // border-right: 1px solid #dddddd;
  98. padding: 0 20px;
  99. height: 34px;
  100. display: flex;
  101. flex-direction: column;
  102. justify-content: center;
  103. margin: 10px 0;
  104. position: relative;
  105. cursor: pointer;
  106. border: 1px solid transparent;
  107. &:hover {
  108. border: 1px solid #e2231a;
  109. border-radius: 2px;
  110. }
  111. .member {
  112. font-size: 14px;
  113. }
  114. .address_detail {
  115. width: 700px;
  116. }
  117. // span:not(:first-child) {
  118. // font-size: 14px;
  119. // line-height: 14px;
  120. // margin-top: 22px;
  121. // }
  122. .city_left {
  123. display: flex;
  124. width: 100%;
  125. .city_img {
  126. width: 14px;
  127. height: 16px;
  128. }
  129. .img_xuan {
  130. width: 23px;
  131. height: 22px;
  132. position: absolute;
  133. bottom: 0;
  134. right: -1px;
  135. }
  136. .city_cont {
  137. display: flex;
  138. align-items: center;
  139. margin-left: 9px;
  140. span {
  141. color: #6b6b6b;
  142. font-size: 14px;
  143. //font-family: Microsoft YaHei;
  144. font-weight: bold;
  145. white-space: nowrap;
  146. flex-shrink: 0;
  147. text {
  148. color: #333333;
  149. font-weight: bold;
  150. }
  151. &:first-child {
  152. margin-right: 12px;
  153. }
  154. &:last-child {
  155. flex: 1;
  156. color: #333333;
  157. font-weight: 400;
  158. margin-left: 44px;
  159. overflow: hidden;
  160. white-space: nowrap;
  161. text-overflow: ellipsis;
  162. padding-right: 20px;
  163. }
  164. }
  165. }
  166. .default_city {
  167. width: 58px;
  168. height: 19px;
  169. background: #b5b5b5;
  170. border-radius: 2px;
  171. font-size: 12px;
  172. //font-family: Microsoft YaHei;
  173. font-weight: 400;
  174. color: #ffffff;
  175. }
  176. }
  177. }
  178. .city_start {
  179. border: 1px solid #e2231a;
  180. border-radius: 2px;
  181. position: relative;
  182. cursor: pointer;
  183. }
  184. .content_right {
  185. width: 370px;
  186. font-size: 14px;
  187. .replace_address {
  188. color: $colorMain2;
  189. line-height: 14px;
  190. }
  191. }
  192. .add_address {
  193. width: 100px;
  194. height: 30px;
  195. background-color: $colorMain;
  196. color: white;
  197. line-height: 30px;
  198. text-align: center;
  199. margin-top: 29px;
  200. border-radius: 3px;
  201. }
  202. .nomartop {
  203. margin-top: 0;
  204. }
  205. }
  206. .pre_mess {
  207. border: 0;
  208. border-radius: 0;
  209. }
  210. .store_item {
  211. // border: 1px solid #dddddd;
  212. margin-top: 20px;
  213. padding: 0 20px;
  214. .store_name {
  215. font-size: 14px;
  216. //font-family: Microsoft YaHei;
  217. font-weight: bold;
  218. color: #161719;
  219. padding-top: 14px;
  220. }
  221. .good_container {
  222. padding: 0 10px;
  223. background-color: #f3f9fe;
  224. .good_item {
  225. font-size: 14px;
  226. padding: 20px 0 10px 0;
  227. .good_info {
  228. width: 385px;
  229. margin-right: 3px;
  230. .good_image_con {
  231. position: relative;
  232. .virtual_tag {
  233. position: absolute;
  234. top: 0;
  235. left: 0;
  236. background: #e8bc4d;
  237. color: #fff;
  238. padding: 2px;
  239. font-size: 13px;
  240. }
  241. }
  242. .good_image {
  243. width: 80px;
  244. height: 80px;
  245. }
  246. .good_info_text {
  247. align-self: flex-start;
  248. margin-left: 20px;
  249. height: 80px;
  250. flex: 1;
  251. .good_name {
  252. // width: 400px;
  253. font-size: 14px;
  254. //font-family: Microsoft YaHei;
  255. font-weight: 400;
  256. color: #333333;
  257. margin-top: 10px;
  258. }
  259. .good_spec {
  260. // width: 400px;
  261. font-size: 14px;
  262. //font-family: Microsoft YaHei;
  263. font-weight: 400;
  264. color: #9c9c9c;
  265. margin-bottom: 10px;
  266. }
  267. }
  268. }
  269. .good_price {
  270. width: 296px;
  271. text-align: center;
  272. color: #333333;
  273. margin-right: 3px;
  274. span {
  275. font-weight: bold;
  276. margin-left: 1px;
  277. }
  278. }
  279. .num {
  280. width: 247px;
  281. text-align: center;
  282. margin-right: 3px;
  283. font-size: 14px;
  284. //font-family: Microsoft YaHei;
  285. font-weight: 400;
  286. color: #333333;
  287. span {
  288. margin-right: 1px;
  289. }
  290. }
  291. .subtotal {
  292. flex: 1;
  293. font-size: 14px;
  294. //font-family: Microsoft YaHei;
  295. font-weight: 400;
  296. text-align: right;
  297. padding-right: 24px;
  298. color: #00985e;
  299. }
  300. }
  301. }
  302. .store_coupon {
  303. width: 1156px;
  304. margin: 0 auto;
  305. margin-top: 10px;
  306. border: 1px solid #dddddd;
  307. font-size: 14px;
  308. .store_coupon_title {
  309. width: 100%;
  310. background-color: #f8f8f8;
  311. height: 40px;
  312. line-height: 40px;
  313. padding-left: 20px;
  314. color: #666666;
  315. box-sizing: border-box;
  316. }
  317. .store_coupon_con {
  318. height: 60px;
  319. padding-left: 20px;
  320. padding-right: 20px;
  321. &.more_height {
  322. height: 100px;
  323. }
  324. .title {
  325. width: 130px;
  326. height: 30px;
  327. text-align: center;
  328. line-height: 30px;
  329. border: 1px solid #dddddd;
  330. color: #999999;
  331. }
  332. .remark {
  333. font-size: 12px;
  334. margin-left: 20px;
  335. height: 20px;
  336. ::-webkit-input-placeholder {
  337. color: #aaaaaa;
  338. }
  339. border: none;
  340. width: 80%;
  341. }
  342. }
  343. }
  344. .settle_info {
  345. height: 100px;
  346. padding: 14px 0;
  347. padding-right: 20px;
  348. box-sizing: border-box;
  349. font-size: 14px;
  350. text-align: right;
  351. display: flex;
  352. flex-direction: column;
  353. justify-content: space-between;
  354. .discounts,
  355. .shipping {
  356. .red {
  357. color: $colorMain2;
  358. }
  359. span:nth-child(2) {
  360. width: 106px;
  361. display: inline-block;
  362. }
  363. }
  364. .total_money {
  365. span:nth-child(2) {
  366. width: 106px;
  367. }
  368. span:nth-child(2),
  369. span:nth-child(3) {
  370. display: inline-block;
  371. color: $colorMain;
  372. }
  373. }
  374. }
  375. }
  376. .platform_discount {
  377. width: 100%;
  378. margin-top: 20px;
  379. border: 0;
  380. border-radius: 0;
  381. .platform_discount_con {
  382. padding-left: 20px;
  383. .voice_select,
  384. .title {
  385. margin: 15px 0;
  386. }
  387. .integral {
  388. margin-bottom: 10px;
  389. padding: 15px 0;
  390. border-top: 1px solid #dddddd;
  391. width: 100%;
  392. .int_ground {
  393. display: flex;
  394. align-items: center;
  395. font-size: 14px;
  396. //font-family: Microsoft YaHei;
  397. font-weight: 400;
  398. color: #333333;
  399. img {
  400. cursor: pointer;
  401. margin-left: 5px;
  402. width: 15px;
  403. height: 15px;
  404. }
  405. }
  406. .int_avalible {
  407. cursor: pointer;
  408. display: inline-flex;
  409. margin-top: 15px;
  410. font-size: 14px;
  411. border: 1px solid #dddddd;
  412. padding: 9px 14px;
  413. border-radius: 3px;
  414. width: unset;
  415. span:first-child {
  416. color: #999999;
  417. }
  418. span:last-child {
  419. color: $colorMain;
  420. }
  421. }
  422. .int_already {
  423. display: flex;
  424. .reChoose {
  425. margin-top: 15px;
  426. font-size: 14px;
  427. //font-family: Microsoft YaHei;
  428. font-weight: 400;
  429. color: #ec2b22;
  430. padding: 9px 14px;
  431. cursor: pointer;
  432. }
  433. }
  434. .int_fail {
  435. margin-top: 15px;
  436. font-size: 14px;
  437. //font-family: Microsoft YaHei;
  438. font-weight: 300;
  439. color: #999999;
  440. }
  441. }
  442. width: 100%;
  443. .title {
  444. width: 130px;
  445. height: 30px;
  446. text-align: center;
  447. line-height: 30px;
  448. border: 1px solid #dddddd;
  449. color: #999999;
  450. }
  451. }
  452. }
  453. .order_total_settle {
  454. padding: 20px;
  455. box-sizing: border-box;
  456. width: 100%;
  457. height: 159px;
  458. background-color: #f8f8f8;
  459. border-radius: 2px;
  460. margin-top: 20px;
  461. margin-bottom: 10px;
  462. font-size: 16px;
  463. span {
  464. font-size: 14px;
  465. //font-family: Microsoft YaHei;
  466. font-weight: 400;
  467. }
  468. .order_price {
  469. text-align: right;
  470. color: #333333;
  471. .order_price_num {
  472. padding-left: 70px;
  473. font-size: 30px;
  474. color: $colorMain;
  475. }
  476. .order_price_money {
  477. font-size: 14px;
  478. //font-family: Microsoft YaHei;
  479. font-weight: 400;
  480. color: #00985e;
  481. letter-spacing: 1px;
  482. span {
  483. font-size: 24px;
  484. font-weight: bold;
  485. }
  486. }
  487. .red {
  488. padding-left: 70px;
  489. color: $colorMain;
  490. }
  491. .order_Name {
  492. margin-left: 10px;
  493. }
  494. .order_mobile {
  495. margin-left: 10px;
  496. }
  497. }
  498. .order_discount {
  499. margin-top: 30px;
  500. }
  501. }
  502. .invoice_con {
  503. height: 70px;
  504. margin-left: 20px;
  505. .no_select_invoice {
  506. img {
  507. width: 18px;
  508. height: 18px;
  509. cursor: pointer;
  510. }
  511. span {
  512. font-size: 14px;
  513. line-height: 14px;
  514. margin-left: 20px;
  515. }
  516. .invoice_info {
  517. margin-left: 50px;
  518. border-left: 1px solid #dddddd;
  519. span {
  520. font-size: 14px;
  521. line-height: 14px;
  522. margin-left: 50px;
  523. }
  524. .choose {
  525. color: #257bfd;
  526. cursor: pointer;
  527. }
  528. }
  529. }
  530. }
  531. // 发票弹窗 start
  532. p {
  533. color: #666666;
  534. font-size: 14px;
  535. width: 485px;
  536. margin: 0 auto;
  537. }
  538. .voice_list {
  539. width: 485px;
  540. height: 330px;
  541. overflow-x: hidden;
  542. overflow-y: scroll;
  543. scrollbar-width: none !important;
  544. -ms-overflow-style: none !important;
  545. margin: 0 auto;
  546. margin-top: 20px;
  547. .voice_item:not(:first-child) {
  548. margin-top: 20px;
  549. }
  550. .voice_item {
  551. width: 100%;
  552. height: 36px;
  553. border: 1px solid #dddddd;
  554. position: relative;
  555. line-height: 36px;
  556. font-size: 14px;
  557. color: #333333;
  558. padding: 0 20px;
  559. box-sizing: border-box;
  560. span:first-child {
  561. float: left;
  562. }
  563. span:nth-child(2) {
  564. float: right;
  565. display: inline-block;
  566. text-align: center;
  567. width: 35px;
  568. font-size: 12px;
  569. color: $colorMain;
  570. height: 20px;
  571. line-height: 20px;
  572. margin-top: 7px;
  573. border: 1px solid $colorMain;
  574. border-radius: 5px;
  575. }
  576. img {
  577. width: 14px;
  578. height: 14px;
  579. position: absolute;
  580. right: 0;
  581. bottom: 0;
  582. }
  583. }
  584. .active {
  585. border: 1px solid $colorMain2;
  586. }
  587. .add_voice_btn {
  588. width: 80px;
  589. height: 30px;
  590. line-height: 30px;
  591. text-align: center;
  592. background-color: $colorMain;
  593. color: white;
  594. margin: 20px 300px 0;
  595. border-radius: 2px;
  596. cursor: pointer;
  597. }
  598. }
  599. .add_voice_content {
  600. height: 330px;
  601. width: 100%;
  602. margin: 0 auto;
  603. overflow-y: auto;
  604. // scrollbar-width: none !important;
  605. // -ms-overflow-style: none !important;
  606. .item:not(:first-child) {
  607. margin-top: 20px;
  608. }
  609. .item {
  610. font-size: 14px;
  611. .title {
  612. height: 30px;
  613. line-height: 30px;
  614. width: 87px;
  615. text-align: right;
  616. }
  617. .right_info {
  618. .input {
  619. margin-left: 10px;
  620. width: 400px;
  621. }
  622. .title {
  623. margin-top: 20px;
  624. }
  625. .nomartop {
  626. margin-top: 0px;
  627. }
  628. p {
  629. width: 400px;
  630. color: #bbbbbb;
  631. font-size: 12px;
  632. margin-left: 10px;
  633. margin-top: 10px;
  634. line-height: 16px;
  635. }
  636. .select_btn {
  637. width: 120px;
  638. height: 30px;
  639. background: #ffffff;
  640. border: 1px solid #dfdfdf;
  641. border-radius: 2px;
  642. line-height: 30px;
  643. text-align: center;
  644. position: relative;
  645. color: #999999;
  646. }
  647. .active {
  648. border: 1px solid $colorMain2;
  649. color: #333333;
  650. }
  651. .select_btn:nth-child(1) {
  652. margin-left: 10px;
  653. }
  654. .select_btn:nth-child(2) {
  655. margin-left: 70px;
  656. }
  657. img {
  658. width: 14px;
  659. height: 14px;
  660. position: absolute;
  661. right: 0;
  662. bottom: 0;
  663. }
  664. }
  665. }
  666. .is_defalut {
  667. margin-top: 10px;
  668. }
  669. span {
  670. margin-right: 10px;
  671. }
  672. }
  673. //商品无货缺货
  674. .out_stock_dialog {
  675. width: 460px;
  676. margin: 0 auto;
  677. height: 330px;
  678. overflow-y: scroll;
  679. .good_item {
  680. font-size: 14px;
  681. img {
  682. width: 80px;
  683. height: 80px;
  684. }
  685. .good_info {
  686. margin-left: 10px;
  687. }
  688. .good_name {
  689. width: 320px;
  690. color: #333333;
  691. line-height: 14px;
  692. margin-top: 10px;
  693. display: inline-block;
  694. }
  695. .spec_num {
  696. margin-top: 26px;
  697. .good_spec {
  698. color: #999999;
  699. }
  700. .good_num {
  701. float: right;
  702. color: #333333;
  703. }
  704. }
  705. }
  706. }
  707. .btn_con {
  708. font-size: 14px;
  709. margin-top: 20px;
  710. .return {
  711. cursor: pointer;
  712. width: 60px;
  713. height: 30px;
  714. line-height: 30px;
  715. text-align: center;
  716. color: #333333;
  717. border-radius: 3px;
  718. border: 1px solid #dddddd;
  719. }
  720. .red {
  721. background-color: $colorMain;
  722. color: white;
  723. }
  724. .remove {
  725. width: 120px;
  726. height: 30px;
  727. line-height: 30px;
  728. text-align: center;
  729. border-radius: 3px;
  730. background-color: $colorMain;
  731. margin-left: 10px;
  732. color: white;
  733. }
  734. .confirm_add_voice {
  735. cursor: pointer;
  736. width: 60px;
  737. height: 30px;
  738. line-height: 30px;
  739. text-align: center;
  740. color: white;
  741. border-radius: 3px;
  742. background-color: $colorMain;
  743. margin-left: 10px;
  744. }
  745. }
  746. // 选择地址
  747. .address_con {
  748. height: 330px;
  749. overflow-y: scroll;
  750. scrollbar-width: none !important;
  751. -ms-overflow-style: none !important;
  752. .address_item {
  753. &:not(:first-child) {
  754. margin-top: 20px;
  755. }
  756. width: 458px;
  757. // height: 104px;
  758. box-sizing: border-box;
  759. border: 1px solid #dfdfdf;
  760. position: relative;
  761. padding: 20px;
  762. span,
  763. div:not(:first-child) {
  764. margin-top: 12px;
  765. }
  766. .address_text {
  767. display: flex;
  768. width: 400px;
  769. }
  770. .selected {
  771. width: 14px;
  772. height: 14px;
  773. position: absolute;
  774. right: 0;
  775. bottom: 0;
  776. }
  777. }
  778. .select {
  779. border: 1px solid $colorMain2;
  780. }
  781. }
  782. // ::-webkit-scrollbar {
  783. // width: 0 !important;
  784. // }
  785. // ::-webkit-scrollbar {
  786. // width: 0 !important;
  787. // height: 0;
  788. // }
  789. }
  790. .el-select-dropdown__item.selected {
  791. color: $colorMain;
  792. font-weight: 700;
  793. }
  794. .el-select .el-input__inner:focus {
  795. border-color: unset;
  796. }
  797. select .el-input.is-focus .el-input__inner {
  798. border-color: unset;
  799. }
  800. .top_order_info {
  801. width: 1200px;
  802. margin: 20px auto;
  803. display: flex;
  804. justify-content: space-between;
  805. .top_logo {
  806. width: 135px;
  807. height: 98px;
  808. div {
  809. width: 135px;
  810. height: 98px;
  811. background-size: contain;
  812. background-repeat: no-repeat;
  813. background-position: center center;
  814. }
  815. }
  816. .top_info_progress {
  817. width: 600px;
  818. margin-right: 20px;
  819. .progress_item {
  820. p {
  821. margin-top: 10px;
  822. }
  823. .progress_p {
  824. margin-left: -4px;
  825. }
  826. .progress_p_one {
  827. position: relative;
  828. left: 10px;
  829. }
  830. .progress {
  831. text-align: center;
  832. margin-top: 3px;
  833. span {
  834. position: relative;
  835. display: inline-block;
  836. width: 24px;
  837. height: 24px;
  838. line-height: 14px;
  839. border: 5px solid #eeeeee;
  840. border-radius: 50%;
  841. color: #9f9f9f;
  842. z-index: 2;
  843. &.active {
  844. border: 5px solid #ff7185;
  845. color: #ff7185;
  846. }
  847. }
  848. .progress_line {
  849. width: 140px;
  850. height: 6px;
  851. background-color: #eeeeee;
  852. z-index: 1;
  853. .content {
  854. width: 100%;
  855. height: 100%;
  856. &.active {
  857. background-color: #ff7185;
  858. }
  859. &.current {
  860. width: 60%;
  861. }
  862. }
  863. }
  864. }
  865. }
  866. }
  867. }
  868. .overflow_ellipsis_clamp2 {
  869. width: 300px;
  870. overflow: hidden;
  871. text-overflow: ellipsis;
  872. display: -webkit-box;
  873. -webkit-line-clamp: 3;
  874. -webkit-box-orient: vertical;
  875. word-break: break-all;
  876. line-height: 19px;
  877. }
  878. .mem_int {
  879. height: 48px;
  880. background: #f8f8f8;
  881. font-size: 14px;
  882. //font-family: Adobe Heiti Std;
  883. font-weight: normal;
  884. color: #333333;
  885. line-height: 48px;
  886. padding-left: 20px;
  887. }
  888. .integral_avalible_order {
  889. height: 36px;
  890. background: #f8f8f8;
  891. padding-left: 15px;
  892. line-height: 36px;
  893. span:first-child {
  894. font-size: 14px;
  895. //font-family: Microsoft YaHei;
  896. font-weight: 400;
  897. color: #333333;
  898. }
  899. span:nth-child(2) {
  900. font-size: 14px;
  901. //font-family: Microsoft YaHei;
  902. font-weight: bold;
  903. color: #333333;
  904. }
  905. }
  906. .use_integral_list_order {
  907. height: 400px;
  908. padding: 0 14px;
  909. border-top: 1px solid #dddddd;
  910. border-bottom: 1px solid #dddddd;
  911. overflow: auto;
  912. .integral_item_order {
  913. position: relative;
  914. display: flex;
  915. padding-top: 15px;
  916. padding-bottom: 15px;
  917. justify-content: space-between;
  918. &:hover {
  919. background-color: #f8f8f8;
  920. }
  921. span {
  922. display: inline-block;
  923. color: #333333;
  924. font-size: 14px;
  925. height: 20px;
  926. line-height: 20px;
  927. }
  928. label {
  929. cursor: pointer;
  930. display: block;
  931. width: 18px;
  932. height: 18px;
  933. z-index: 1;
  934. .img_order {
  935. width: 18px;
  936. height: 18px;
  937. background: url(/buy/not_select.png) center;
  938. background-size: 100%;
  939. }
  940. }
  941. input[type="radio"] {
  942. display: none;
  943. z-index: 0;
  944. }
  945. input[type="radio"]:checked + label {
  946. .img_order {
  947. width: 18px;
  948. height: 18px;
  949. background: url(/buy/sel.png) center;
  950. background-size: 100%;
  951. z-index: 1;
  952. }
  953. }
  954. .no_avalible_order {
  955. position: absolute;
  956. top: 0;
  957. left: 0;
  958. width: 100%;
  959. height: 100%;
  960. background-color: #666666;
  961. opacity: 0.3;
  962. z-index: 999;
  963. }
  964. }
  965. }
  966. .integral_btn_order {
  967. margin-top: 20px;
  968. display: flex;
  969. justify-content: center;
  970. button {
  971. border: none;
  972. width: 167px;
  973. height: 40px;
  974. border-radius: 3px;
  975. font-size: 14px;
  976. //font-family: Microsoft YaHei;
  977. font-weight: 400;
  978. color: #ffffff;
  979. line-height: 30px;
  980. }
  981. .integral_abandom_order {
  982. cursor: pointer;
  983. background: #999999;
  984. }
  985. .integral_engage_order {
  986. cursor: pointer;
  987. background-color: $colorMain;
  988. margin-left: 20px;
  989. }
  990. }
  991. .intRule_con {
  992. border-top: 1px solid #dddddd;
  993. padding-top: 10px;
  994. .int_rule_item {
  995. font-size: 15px;
  996. //font-family: Adobe Heiti Std;
  997. font-weight: normal;
  998. color: #666666;
  999. line-height: 50px;
  1000. }
  1001. }
  1002. .affirm {
  1003. width: 1200px;
  1004. margin: 0 auto;
  1005. font-size: 16px;
  1006. //font-family: Microsoft YaHei;
  1007. font-weight: 400;
  1008. color: #454545;
  1009. }
  1010. .xian {
  1011. width: 100%;
  1012. padding: 0 20px;
  1013. p {
  1014. width: 100%;
  1015. box-sizing: border-box;
  1016. height: 1px;
  1017. border-bottom: 1px solid #e5e5e5;
  1018. margin-top: 26px;
  1019. margin-bottom: 11px;
  1020. }
  1021. }
  1022. .confirm_title_info {
  1023. height: 30px;
  1024. width: 100%;
  1025. padding: 0 20px;
  1026. display: flex;
  1027. align-items: center;
  1028. div {
  1029. height: 100%;
  1030. line-height: 30px;
  1031. border-bottom: 2px solid #cedbed;
  1032. margin-right: 3px;
  1033. }
  1034. .shop {
  1035. width: 398px;
  1036. padding-left: 85px;
  1037. }
  1038. .unit_price {
  1039. width: 296px;
  1040. text-align: center;
  1041. }
  1042. .num {
  1043. width: 247px;
  1044. text-align: center;
  1045. }
  1046. .subtotal {
  1047. width: 209px;
  1048. text-align: right;
  1049. padding-right: 40px;
  1050. }
  1051. }
  1052. .additional {
  1053. display: flex;
  1054. width: 100%;
  1055. height: 103px;
  1056. margin-top: 2px;
  1057. .leaving_a_message {
  1058. width: 467px;
  1059. height: 100%;
  1060. background-color: #f3f9fe;
  1061. padding-left: 10px;
  1062. margin-right: 2px;
  1063. p {
  1064. padding-top: 14px;
  1065. margin-bottom: 11px;
  1066. }
  1067. .store_coupon_con {
  1068. height: 51px;
  1069. padding-right: 21px;
  1070. // &.more_height {}
  1071. .title {
  1072. width: 130px;
  1073. height: 30px;
  1074. text-align: center;
  1075. line-height: 30px;
  1076. border: 1px solid #dddddd;
  1077. color: #999999;
  1078. }
  1079. .remark {
  1080. font-size: 12px;
  1081. margin-left: 20px;
  1082. height: 20px;
  1083. ::-webkit-input-placeholder {
  1084. color: #aaaaaa;
  1085. }
  1086. border: none;
  1087. width: 80%;
  1088. }
  1089. }
  1090. }
  1091. .discount_box {
  1092. flex: 1;
  1093. height: 100%;
  1094. background-color: #f3f9fe;
  1095. display: flex;
  1096. justify-content: space-between;
  1097. }
  1098. .discount {
  1099. flex: 1;
  1100. padding-left: 10px;
  1101. margin-right: 2px;
  1102. p {
  1103. width: 80px;
  1104. padding-top: 14px;
  1105. margin: 0;
  1106. margin-bottom: 11px;
  1107. }
  1108. .store_coupon_con {
  1109. padding-right: 20px;
  1110. &.more_height {
  1111. height: 100px;
  1112. }
  1113. .title {
  1114. width: 185px;
  1115. height: 40px;
  1116. line-height: 40px;
  1117. text-align: center;
  1118. color: #999999;
  1119. border: 1px solid #dcdcdc;
  1120. background-color: #fff;
  1121. border-radius: 4px;
  1122. cursor: default;
  1123. transition: all 0.3s ease;
  1124. &:hover {
  1125. border-color: #aaaaaa;
  1126. }
  1127. }
  1128. .remark {
  1129. font-size: 12px;
  1130. margin-left: 20px;
  1131. height: 20px;
  1132. ::-webkit-input-placeholder {
  1133. color: #aaaaaa;
  1134. }
  1135. border: none;
  1136. width: 80%;
  1137. }
  1138. }
  1139. }
  1140. .summation {
  1141. flex: 1;
  1142. padding: 14px 0;
  1143. height: 100%;
  1144. p {
  1145. margin: 0;
  1146. }
  1147. .summation_tit {
  1148. width: 81px;
  1149. text-align: right;
  1150. font-size: 14px;
  1151. //font-family: Microsoft YaHei;
  1152. font-weight: 400;
  1153. color: #333333;
  1154. }
  1155. }
  1156. }
  1157. .coupon_box {
  1158. width: 100%;
  1159. padding: 0 20px;
  1160. .coupon_info {
  1161. width: 100%;
  1162. border: 1px solid #e5e5e5;
  1163. background: #ffffff;
  1164. .coupon_tit {
  1165. width: 100%;
  1166. height: 38px;
  1167. background: #f7f7f7;
  1168. display: flex;
  1169. p {
  1170. width: 183px;
  1171. height: 100%;
  1172. margin: 0;
  1173. cursor: pointer;
  1174. }
  1175. .selected_p {
  1176. background-color: #fff;
  1177. }
  1178. }
  1179. .paging {
  1180. width: 100%;
  1181. margin-top: 23px;
  1182. padding: 0 23px;
  1183. .page {
  1184. color: #fb6d67;
  1185. width: 20px;
  1186. }
  1187. .total {
  1188. width: 20px;
  1189. }
  1190. .xie {
  1191. margin: 0 3px;
  1192. }
  1193. img {
  1194. width: 16px;
  1195. height: 16px;
  1196. cursor: pointer;
  1197. }
  1198. }
  1199. .coupon_list {
  1200. display: flex;
  1201. align-items: center;
  1202. flex-wrap: wrap;
  1203. padding-bottom: 23px;
  1204. .coupon_cont_bg {
  1205. background-image: url(/coupon.png);
  1206. background-size: 100% 100%;
  1207. }
  1208. .coupon_cont {
  1209. width: 260px;
  1210. height: 148px;
  1211. margin-left: 23px;
  1212. border: 1px solid transparent;
  1213. cursor: pointer;
  1214. position: relative;
  1215. margin-top: 23px;
  1216. .img_coupon {
  1217. width: 279px;
  1218. height: 163px;
  1219. position: absolute;
  1220. left: -9px;
  1221. top: -8px;
  1222. }
  1223. .coupons {
  1224. width: 19px;
  1225. // height: 59px;
  1226. font-size: 18px;
  1227. //font-family: Microsoft YaHei;
  1228. font-weight: bold;
  1229. color: #999999;
  1230. margin-left: 34px;
  1231. z-index: 999;
  1232. }
  1233. .coupon_cont_box {
  1234. flex: 1;
  1235. height: 100%;
  1236. padding-top: 16px;
  1237. padding-bottom: 16px;
  1238. margin-left: 22px;
  1239. z-index: 999;
  1240. .money {
  1241. font-size: 32px;
  1242. //font-family: Microsoft YaHei;
  1243. font-weight: 400;
  1244. color: #999999;
  1245. display: flex;
  1246. span {
  1247. font-size: 14px;
  1248. padding-top: 5px;
  1249. }
  1250. &.cp_chosen {
  1251. color: $colorMain;
  1252. }
  1253. }
  1254. .full_minus {
  1255. min-width: 74px;
  1256. padding: 0 10px;
  1257. padding-top: 7px;
  1258. padding-bottom: 7px;
  1259. background: #f1f1f1;
  1260. font-size: 12px;
  1261. //font-family: Microsoft YaHei;
  1262. font-weight: 400;
  1263. color: #666666;
  1264. }
  1265. .coupon_time {
  1266. font-size: 12px;
  1267. //font-family: Microsoft YaHei;
  1268. font-weight: 400;
  1269. color: #666666;
  1270. margin-top: 5px;
  1271. span {
  1272. color: rgba(153, 153, 153, 1);
  1273. }
  1274. }
  1275. .user_rule {
  1276. margin-top: 5px;
  1277. font-size: 12px;
  1278. //font-family: Microsoft YaHei;
  1279. font-weight: 400;
  1280. color: #666666;
  1281. overflow: hidden;
  1282. text-overflow: ellipsis;
  1283. display: -webkit-box;
  1284. -webkit-box-orient: vertical;
  1285. -webkit-line-clamp: 2;
  1286. word-break: break-all;
  1287. span {
  1288. color: rgba(153, 153, 153, 1);
  1289. }
  1290. }
  1291. }
  1292. }
  1293. .coupon_contone {
  1294. border: 1px solid #e2231a;
  1295. position: relative;
  1296. .coupons {
  1297. color: #e2231a;
  1298. }
  1299. .coupon_img {
  1300. width: 23px;
  1301. height: 23px;
  1302. position: absolute;
  1303. right: -1px;
  1304. bottom: 0;
  1305. }
  1306. }
  1307. }
  1308. .avali {
  1309. padding-left: 23px;
  1310. padding-bottom: 23px;
  1311. .int_avalible {
  1312. cursor: pointer;
  1313. display: inline-flex;
  1314. margin-top: 23px;
  1315. font-size: 14px;
  1316. border: 1px solid #dddddd;
  1317. padding: 9px 14px;
  1318. border-radius: 3px;
  1319. width: 200px;
  1320. span:first-child {
  1321. color: #999999;
  1322. }
  1323. span:last-child {
  1324. color: $colorMain;
  1325. }
  1326. }
  1327. .int_already {
  1328. display: flex;
  1329. .reChoose {
  1330. margin-top: 23px;
  1331. font-size: 14px;
  1332. //font-family: Microsoft YaHei;
  1333. font-weight: 400;
  1334. color: #ec2b22;
  1335. padding: 9px 14px;
  1336. cursor: pointer;
  1337. }
  1338. }
  1339. .int_fail {
  1340. margin-top: 15px;
  1341. font-size: 14px;
  1342. //font-family: Microsoft YaHei;
  1343. font-weight: 300;
  1344. color: #999999;
  1345. }
  1346. }
  1347. .purpose {
  1348. width: 100%;
  1349. height: 41px;
  1350. background: #f6f6f6;
  1351. padding-left: 21px;
  1352. line-height: 41px;
  1353. span {
  1354. font-size: 12px;
  1355. //font-family: Microsoft YaHei;
  1356. font-weight: 400;
  1357. color: #333333;
  1358. }
  1359. .purpose_money {
  1360. color: #e21106;
  1361. margin-left: 2px;
  1362. margin-right: 10px;
  1363. }
  1364. .purpose_discount {
  1365. color: #787575;
  1366. span {
  1367. margin: 0 3px;
  1368. }
  1369. }
  1370. .purpose_fe {
  1371. color: #787575;
  1372. }
  1373. }
  1374. }
  1375. }
  1376. .gopuy_box {
  1377. width: 100%;
  1378. margin-bottom: 35px;
  1379. .gopuy {
  1380. width: 188px;
  1381. height: 45px;
  1382. background: linear-gradient(0deg, #fa464e, #f6312c);
  1383. border-radius: 4px;
  1384. font-size: 18px;
  1385. //font-family: Microsoft YaHei;
  1386. font-weight: bold;
  1387. color: #ffffff;
  1388. }
  1389. }