cart.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710
  1. page {
  2. height: 100%;
  3. min-height: 100%;
  4. background: #f4f4f4;
  5. }
  6. .container {
  7. background: #f4f4f4;
  8. width: 100%;
  9. height: auto;
  10. min-height: 100%;
  11. overflow: hidden;
  12. }
  13. .service-policy {
  14. width: 750rpx;
  15. height: 73rpx;
  16. background: #f4f4f4;
  17. padding: 0 31.25rpx;
  18. display: flex;
  19. flex-flow: row nowrap;
  20. align-items: center;
  21. justify-content: space-between;
  22. }
  23. .service-policy .item {
  24. background: url(http://120.76.26.84:80/group1/M00/00/01/rBJEdVvr10OAUODSAAAA2Yyhu9Q336.png) 0 center no-repeat;
  25. background-size: 10rpx;
  26. padding-left: 15rpx;
  27. display: flex;
  28. align-items: center;
  29. font-size: 25rpx;
  30. color: #666;
  31. }
  32. .no-cart {
  33. width: 100%;
  34. height: auto;
  35. margin: 0 auto;
  36. }
  37. .no-cart .c {
  38. width: 100%;
  39. height: auto;
  40. margin-top: 300rpx;
  41. }
  42. .no-cart .c image {
  43. margin: 0 auto;
  44. display: block;
  45. text-align: center;
  46. width: 258rpx;
  47. height: 258rpx;
  48. }
  49. .no-cart .c text {
  50. margin: 0 auto;
  51. display: block;
  52. width: 258rpx;
  53. height: 29rpx;
  54. line-height: 29rpx;
  55. text-align: center;
  56. font-size: 29rpx;
  57. color: #999;
  58. }
  59. .title-box {
  60. width: 100%;
  61. padding-top: 98rpx;
  62. text-align: center;
  63. font-size: 28rpx;
  64. color: #999;
  65. background: url(http://120.76.26.84:80/group1/M00/00/01/rBJEdVvr11yATJl8AAAQcvbdsNw695.png) no-repeat center 5rpx;
  66. background-size: 100rpx auto;
  67. margin-bottom: 50rpx;
  68. }
  69. .to-index-btn {
  70. color: #fff;
  71. background: #e64340;
  72. border-radius: 6px;
  73. width: 300rpx;
  74. height: auto;
  75. line-height: 70rpx;
  76. text-align: center;
  77. font-size: 28rpx;
  78. margin: 0 auto;
  79. display: block;
  80. margin-bottom:180rpx;
  81. }
  82. .cart-view .group-item .header {
  83. width: 100%;
  84. height: 94rpx;
  85. line-height: 94rpx;
  86. padding: 0 26rpx;
  87. border-bottom: 1px solid #f4f4f4;
  88. }
  89. .cart-view {
  90. width: 96%;
  91. height: auto;
  92. overflow: hidden;
  93. margin-left: 14rpx;
  94. }
  95. .cart-view .list {
  96. height: auto;
  97. width: 100%;
  98. overflow: hidden;
  99. /* margin-bottom: 10rpx; */
  100. }
  101. .cart-view .group-item {
  102. height: auto;
  103. width: 100%;
  104. background: #fff;
  105. margin-bottom: 18rpx;
  106. }
  107. .cart-view .item {
  108. height: 230rpx;
  109. width: 100%;
  110. overflow: hidden;
  111. }
  112. .cart-view .item .checkbox {
  113. float: left;
  114. height: 34rpx;
  115. width: 5%;
  116. margin: 65rpx 18rpx 65rpx 22rpx;
  117. background: url(http://120.76.26.84:80/group1/M00/00/01/rBJEdVvr1-aAFY_xAAAByIPHW08081.png) no-repeat;
  118. background-size: 34rpx;
  119. }
  120. .cart-view .item .checkbox.checked {
  121. background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2AmALCJBAAABdbLfmi0325.png) no-repeat;
  122. background-size: 34rpx;
  123. }
  124. .cart-view .item .cart-goods {
  125. float: left;
  126. height: 200rpx;
  127. width: 80%;
  128. border-bottom: 1px solid #f4f4f4;
  129. margin-left: 5rpx;
  130. position: relative;
  131. }
  132. .cart-view .item .img {
  133. float: left;
  134. height: 155rpx;
  135. width: 155rpx;
  136. background: #f4f4f4;
  137. margin: 19.5rpx 18rpx 19.5rpx 0;
  138. }
  139. .cart-view .item .info {
  140. float: left;
  141. height: 125rpx;
  142. width: 65%;
  143. margin: 19.5rpx 26rpx 19.5rpx 0;
  144. }
  145. .cart-view .item .t {
  146. margin: 8rpx 0;
  147. font-size: 25rpx;
  148. color: #333;
  149. }
  150. .cart-view .item .cart-goods .name {
  151. width: 270rpx;
  152. font-size: 25rpx;
  153. color: #333;
  154. display: inline-block;
  155. overflow: hidden;
  156. text-overflow: ellipsis;
  157. white-space: nowrap;
  158. }
  159. .cart-view .item .num {
  160. height: 28rpx;
  161. line-height: 28rpx;
  162. float: right;
  163. }
  164. .cart-view .item .attr {
  165. margin-bottom: 17rpx;
  166. height: 24rpx;
  167. line-height: 24rpx;
  168. font-size: 22rpx;
  169. color: #666;
  170. overflow: hidden;
  171. white-space: nowrap;
  172. text-overflow: ellipsis;
  173. }
  174. .cart-view .item .goods-do {
  175. position: absolute;
  176. right: 20rpx;
  177. top: 20rpx;
  178. }
  179. .cart-view .item .goods-do .org-price {
  180. color: #999;
  181. font-size: 23rpx;
  182. }
  183. .cart-view .item .open {
  184. height: 28rpx;
  185. width: 150rpx;
  186. display: block;
  187. float: right;
  188. background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2EaAGOLDAAABEv1p1iM011.png) right center no-repeat;
  189. background-size: 25rpx;
  190. font-size: 25rpx;
  191. color: #333;
  192. }
  193. .goods .number-item {
  194. display: inline-flex;
  195. -webkit-box-pack: justify;
  196. align-items: center;
  197. position: absolute;
  198. /* right: 0; */
  199. margin-right: 17rpx;
  200. }
  201. .goods .number-item .selnum {
  202. height: 71rpx;
  203. display: flex;
  204. }
  205. .goods .number-item .selnum .cut {
  206. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAM1BMVEX////Z296wsLD6+vvo6evi5Obe3+Lr7O709fb5+fr3+Pjb3eDw8fLu7/Hl5+nk5ui5ubmS1nTyAAABG0lEQVRIx52WWXLEIAxEeUGSGeNl7n/aME6lUmQWm+5f+5l2A5LSC+XFPCrUcFtyuqDbFHSK6XaCzE7TvpZ8LFnWnSafPyB5g2oldSpWYXvrcgKmkQdNDpbfWDDwVwEE8cH6HMRTIAX8Y7rZofxbByydyKBfKx7MORV9Bn4CPL82EfkKlOMv+QxzuqQZfr++YemijK3Dz9Sb8mb0sib8Z4tqGlDldrA2AtnhKygjUCGOX0tDesS2sI9BO0vzuI5BK5acMgYVPAV5DMpEy71P9P71pHu/J9REDzXmBdVDSJBkTwpCilzaXOkYSQdWuRrSJZSuu1JYpBKmFEupLCsNQGk1SlOT2qfSqJWRQBg+lDFHG6j00U0fEqVx9BvALAkNabHL3QAAAABJRU5ErkJggg==);
  207. box-sizing: border-box;
  208. width: 25px;
  209. border: none;
  210. border-radius: 50%;
  211. height: 25px;
  212. background-size: 100% 100%;
  213. }
  214. .goods .number-item .selnum .number {
  215. width: 2em;
  216. text-align: center;
  217. color: #333;
  218. margin-top:-2px;
  219. }
  220. .goods .number-item .selnum .add {
  221. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEX/0WH///8zMzP/02b//fb/+u7/5qj/45z/3oz/1W1KRDj/8c//78j/7L7/6rX/2HfEo1P/3IXeVLZ3AAAA70lEQVRIx52WWQ7DIAxEJzFrNpL7X7ZIbdUUnITh/aIngW1sY6gwiwspisQU3GLq81KxaxCckLDaW8V6KHh7qRgnUBFndGWOuCTOmrLhlq1WPB7wpXLgkeNf8WjAn5UNTWw/ZUYj81cxEY1E81EcmnFvxQqaEZuVi2jt07TrUcuKhcY0jhM0bFZWaIwZaKxZCZwSBhjhFDFYwClZcKziEFglILFKQiwyOFYUOY0QnFGMMqfSo/AX63k+H+SeVPIF01OWfPHzX6zrI/Ptgm9KfOvjGyzfxvlhwY8kfvDx45Uf4vyqwC8kvWtP/3LFr3AvL0kJEWHNe5sAAAAASUVORK5CYII=);
  222. box-sizing: border-box;
  223. width: 25px;
  224. border: none;
  225. border-radius: 50%;
  226. height: 25px;
  227. background-size: 100% 100%;
  228. }
  229. .goods .number-item .selnum .add2 {
  230. display: block;
  231. width: 52rpx;
  232. height: 52rpx;
  233. }
  234. .cart-view .item .b {
  235. height: 28rpx;
  236. line-height: 28rpx;
  237. font-size: 25rpx;
  238. color: #333;
  239. overflow: hidden;
  240. display: inline-flex;
  241. right: 0;
  242. }
  243. .cart-view .group-item .handle {
  244. display: inline-flex;
  245. -webkit-box-pack: justify;
  246. align-items: center;
  247. position: absolute;
  248. right: 0;
  249. margin-right: 17rpx;
  250. }
  251. .cart-view .group-item .handle .del {
  252. display: block;
  253. width: 52rpx;
  254. height: 52rpx;
  255. }
  256. .cart-view .promotion .icon {
  257. display: inline-block;
  258. height: 24rpx;
  259. width: 15rpx;
  260. }
  261. .cart-view .promotion {
  262. margin-top: 25.5rpx;
  263. float: left;
  264. height: 43rpx;
  265. width: 480rpx;
  266. /*margin-right: 84rpx;*/
  267. line-height: 43rpx;
  268. font-size: 0;
  269. }
  270. .cart-view .promotion .tag {
  271. border: 1px solid #f48f18;
  272. height: 37rpx;
  273. line-height: 31rpx;
  274. padding: 0 9rpx;
  275. margin-right: 10rpx;
  276. color: #f48f18;
  277. font-size: 24.5rpx;
  278. }
  279. .cart-view .promotion .txt {
  280. height: 43rpx;
  281. line-height: 43rpx;
  282. padding-right: 10rpx;
  283. color: #333;
  284. font-size: 29rpx;
  285. overflow: hidden;
  286. }
  287. .cart-view .get {
  288. margin-top: 18rpx;
  289. float: right;
  290. height: 58rpx;
  291. padding-left: 14rpx;
  292. border-left: 1px solid #d9d9d9;
  293. line-height: 58rpx;
  294. font-size: 29rpx;
  295. color: #333;
  296. }
  297. .cart-view .coupon-info .header {
  298. width: 100%;
  299. height: 94rpx;
  300. line-height: 94rpx;
  301. text-align: center;
  302. }
  303. .cart-view .coupon-info .txt {
  304. color: #f48f18;
  305. }
  306. .cart-bottom {
  307. position: fixed;
  308. bottom: 0;
  309. left: 0;
  310. height: 100rpx;
  311. width: 100%;
  312. background: #fff;
  313. display: flex;
  314. align-items: center;
  315. z-index: 499;
  316. }
  317. .cart-bottom .checkbox {
  318. height: 34rpx;
  319. padding-left: 60rpx;
  320. line-height: 34rpx;
  321. margin: 0 18rpx 0 36rpx;
  322. background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2GyABbtjAAAByIPHW08157.png) no-repeat;
  323. background-size: 34rpx;
  324. font-size: 29rpx;
  325. }
  326. .cart-bottom .checkbox.checked {
  327. background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2AmALCJBAAABdbLfmi0325.png) no-repeat;
  328. background-size: 34rpx;
  329. }
  330. .cart-bottom .total {
  331. height: 34rpx;
  332. flex: 1;
  333. font-size: 29rpx;
  334. color: #b4282d;
  335. margin-top: -10rpx;
  336. }
  337. .cart-bottom .delete {
  338. height: 34rpx;
  339. width: auto;
  340. margin: 33rpx 18rpx;
  341. font-size: 29rpx;
  342. }
  343. .cart-bottom .checkout {
  344. height: 100rpx;
  345. width: 210rpx;
  346. text-align: center;
  347. line-height: 100rpx;
  348. font-size: 29rpx;
  349. background: #b4282d;
  350. color: #fff;
  351. }
  352. .line-through {
  353. text-decoration: line-through;
  354. }
  355. .a-guess {
  356. width: 750rpx;
  357. height: auto;
  358. overflow: hidden;
  359. background: #fff;
  360. color: #333;
  361. margin-top: 0rpx;
  362. margin-bottom: 150rpx;
  363. }
  364. .a-guess .h {
  365. display: flex;
  366. flex-flow: row nowrap;
  367. align-items: center;
  368. justify-content: center;
  369. height: 90rpx;
  370. }
  371. .a-guess .h .txt {
  372. padding-right: 30rpx;
  373. background: url("http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2W6ATlkvAAAA_rntq4s180.png") right 4rpx no-repeat;
  374. background-size: 16.656rpx 27rpx;
  375. display: inline-block;
  376. height: 36rpx;
  377. font-size: 33rpx;
  378. line-height: 36rpx;
  379. }
  380. .a-guess .b {
  381. width: 750rpx;
  382. height: auto;
  383. overflow: hidden;
  384. border-top: 1rpx solid #f4f4f4;
  385. margin-top: 20rpx;
  386. }
  387. .a-guess .b .item {
  388. float: left;
  389. background: #fff;
  390. width: 375rpx;
  391. padding-bottom: 33.333rpx;
  392. border-bottom: 1rpx solid #f4f4f4;
  393. height: auto;
  394. overflow: hidden;
  395. text-align: center;
  396. }
  397. .a-guess .b .item-b {
  398. border-right: 1rpx solid #f4f4f4;
  399. }
  400. .a-guess .item .img2 {
  401. margin-top: 10rpx;
  402. width: 302rpx;
  403. height: 302rpx;
  404. }
  405. .a-guess .item .name {
  406. display: block;
  407. width: 365.625rpx;
  408. height: 80rpx;
  409. padding: 0 20rpx;
  410. margin: 11.5rpx 0 22rpx 0;
  411. text-align: center;
  412. font-size: 30rpx;
  413. color: #333;
  414. }
  415. .a-guess .item .price {
  416. display: block;
  417. width: 365.625rpx;
  418. height: 30rpx;
  419. text-align: center;
  420. font-size: 30rpx;
  421. color: #b4282d;
  422. }
  423. .a-guess .item .price .cart {
  424. margin-left: 20rpx;
  425. width: 35rpx;
  426. height: 35rpx;
  427. vertical-align: -6rpx;
  428. }
  429. /* //////////////////////////////////////////// */
  430. .attr-pop {
  431. width: 100%;
  432. height: auto;
  433. padding: 31.25rpx;
  434. background: #fff;
  435. position: fixed;
  436. bottom: 100rpx;
  437. z-index: 600;
  438. }
  439. .attr-close {
  440. float: right;
  441. width: 40rpx;
  442. height: 40rpx;
  443. line-height: 40rpx;
  444. border-radius: 50%;
  445. font-size: 40rpx;
  446. text-align: center;
  447. overflow: hidden;
  448. }
  449. .attr-pop .img-info {
  450. width: 687.5rpx;
  451. height: 177rpx;
  452. overflow: hidden;
  453. margin-bottom: 41.5rpx;
  454. }
  455. .attr-pop .img {
  456. float: left;
  457. height: 177rpx;
  458. width: 177rpx;
  459. background: #f4f4f4;
  460. margin-right: 31.25rpx;
  461. }
  462. .attr-pop .info {
  463. float: left;
  464. height: 177rpx;
  465. display: flex;
  466. align-items: flex-start;
  467. }
  468. .attr-pop .p {
  469. font-size: 33rpx;
  470. color: #333;
  471. height: 33rpx;
  472. line-height: 33rpx;
  473. margin-bottom: 10rpx;
  474. }
  475. .attr-pop .a {
  476. font-size: 29rpx;
  477. color: #333;
  478. height: 40rpx;
  479. line-height: 40rpx;
  480. width: 260px;
  481. display: block;
  482. word-break: break-all;
  483. word-wrap: break-word;
  484. }
  485. .spec-con {
  486. width: 100%;
  487. height: auto;
  488. overflow: hidden;
  489. }
  490. .spec-con .name {
  491. height: 32rpx;
  492. margin-bottom: 22rpx;
  493. font-size: 29rpx;
  494. color: #333;
  495. }
  496. .spec-con .values {
  497. height: auto;
  498. margin-bottom: 31.25rpx;
  499. font-size: 0;
  500. }
  501. .spec-con .value {
  502. display: inline-block;
  503. height: 62rpx;
  504. padding: 0 35rpx;
  505. line-height: 56rpx;
  506. text-align: center;
  507. margin-right: 25rpx;
  508. margin-bottom: 16.5rpx;
  509. border: 1px solid #333;
  510. font-size: 25rpx;
  511. color: #333;
  512. }
  513. .spec-con .value.disable {
  514. border: 1px solid #ccc;
  515. color: #ccc;
  516. }
  517. .spec-con .value.selected {
  518. border: 1px solid #b4282d;
  519. color: #b4282d;
  520. }
  521. .spec-con .number-item .selnum {
  522. width: 322rpx;
  523. height: 71rpx;
  524. border: 1px solid #ccc;
  525. display: flex;
  526. }
  527. .spec-con .number-item .cut {
  528. width: 93.75rpx;
  529. height: 100%;
  530. text-align: center;
  531. line-height: 65rpx;
  532. }
  533. .spec-con .number-item .number {
  534. flex: 1;
  535. height: 100%;
  536. text-align: center;
  537. line-height: 68.75rpx;
  538. border-left: 1px solid #ccc;
  539. border-right: 1px solid #ccc;
  540. float: left;
  541. }
  542. .spec-con .number-item .add {
  543. width: 93.75rpx;
  544. height: 100%;
  545. text-align: center;
  546. line-height: 65rpx;
  547. }
  548. .bottom-btn {
  549. position: fixed;
  550. left: 0;
  551. bottom: 0;
  552. z-index: 10;
  553. width: 750rpx;
  554. height: 100rpx;
  555. display: flex;
  556. background: #fff;
  557. }
  558. .bottom-btn .r {
  559. border: 1px solid #b4282d;
  560. background: #b4282d;
  561. float: left;
  562. height: 100rpx;
  563. line-height: 96rpx;
  564. flex: 1;
  565. text-align: center;
  566. color: #fff;
  567. }
  568. .checkbox-biz-type {
  569. float: left;
  570. height: 30rpx;
  571. width: 100%;
  572. margin-top: 10rpx;
  573. margin-left: 24rpx;
  574. background: url(http://120.76.26.84/group1/M00/00/02/rBJEdVvr2GyABbtjAAAByIPHW08157.png) no-repeat;
  575. background-size: 30rpx;
  576. vertical-align: middle;
  577. }
  578. .checkbox-biz-type.checked {
  579. background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2AmALCJBAAABdbLfmi0325.png) no-repeat;
  580. background-size: 30rpx;
  581. }
  582. .search-icon-shop {
  583. width: 30rpx;
  584. height: 30rpx;
  585. /* margin-left: 15rpx;
  586. margin-top: 20rpx;
  587. margin-bottom:-18rpx;*/
  588. margin-bottom:9rpx;
  589. margin-left:40rpx;
  590. vertical-align: middle;
  591. }
  592. .title-name {
  593. width: 100%;
  594. height: 30rpx;
  595. line-height: 30rpx;
  596. text-align: left;
  597. font-size: 28rpx;
  598. color: rgba(87, 86, 86, 0.63);
  599. margin-left: 10rpx;
  600. font-weight: bolder;
  601. padding-bottom: 10rpx;
  602. vertical-align: middle;
  603. }
  604. .number-item-text {
  605. display: inline-flex;
  606. -webkit-box-pack: justify;
  607. align-items: center;
  608. position: absolute;
  609. /* right: 0; */
  610. margin-right: 17rpx;
  611. font-size: 26rpx;
  612. color: black;
  613. }
  614. .shixiao {
  615. float: left;
  616. height: 34rpx;
  617. margin: 65rpx 6rpx 65rpx 4rpx;
  618. background-size: 34rpx;
  619. background-color: rgba(87, 86, 86, 0.63);
  620. border-radius:30rpx;
  621. color: #fff;
  622. font-size: 22rpx;
  623. width: 70rpx;
  624. padding-left: 10rpx;
  625. }