basket.wxss 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
  1. /* pages/basket/basket.wxss */
  2. page {
  3. height: 100%;
  4. background: #f4f4f4;
  5. }
  6. .my-tabbar .tabbar{
  7. box-shadow: none!important;
  8. border-radius: 0!important;
  9. }
  10. .container {
  11. padding-bottom: 120rpx;
  12. height: auto;
  13. }
  14. .prod-list {
  15. /* margin-bottom: 120rpx; */
  16. }
  17. .shop-item {
  18. margin-top: 20rpx;
  19. background: #fff;
  20. margin: 20rpx 24rpx 0;
  21. }
  22. /* 店铺 */
  23. .choose-btn {
  24. display: inline-block;
  25. }
  26. .shop-item .head-shop {
  27. padding: 20rpx;
  28. background: #fff;
  29. display: flex;
  30. align-items: center;
  31. }
  32. .shop-item .head-shop image {
  33. width: 100%;
  34. height: 100%;
  35. display: block;
  36. }
  37. .shop-item .head-shop .shop-box {
  38. flex: 1;
  39. display: flex;
  40. align-items: center;
  41. margin-left: 8rpx;
  42. }
  43. .shop-item .head-shop .shop-icon {
  44. width: 32rpx;
  45. height: 32rpx;
  46. margin-right: 10rpx;
  47. }
  48. .shop-item .head-shop .shop-name {
  49. font-size: 28rpx;
  50. display: -webkit-box;
  51. -webkit-box-orient: vertical;
  52. -webkit-line-clamp: 1;
  53. overflow: hidden;
  54. text-overflow: ellipsis;
  55. }
  56. .shop-item .prod-block .discount-tips {
  57. border-top: 2rpx solid #eee;
  58. padding: 20rpx 16rpx;
  59. height: 40rpx;
  60. line-height: 40rpx;
  61. }
  62. .shop-item .prod-block .discount-tips .text-block {
  63. padding: 4rpx 6rpx;
  64. border-radius: 4rpx;
  65. font-size: 20rpx;
  66. background: #e43130;
  67. color: #fff;
  68. position: relative;
  69. }
  70. .shop-item .prod-block .discount-tips .text-block::before{
  71. position: absolute;
  72. left: 14rpx;
  73. bottom: -16rpx;
  74. content: "";
  75. display: block;
  76. width: 0;
  77. height: 0;
  78. border: 8rpx solid transparent;
  79. border-top: 8rpx solid #e43130;
  80. }
  81. .shop-item .prod-block .discount-tips .text-list {
  82. font-size: 24rpx;
  83. margin-left: 10rpx;
  84. font-weight: 600;
  85. }
  86. .shop-item .prod-block .discount-tips .text-list.reduce-amount {
  87. font-weight: normal;
  88. color: #e43130;
  89. padding-left: 20rpx;
  90. }
  91. .shop-item .prod-block .goods-item {
  92. position: relative;
  93. }
  94. .shop-item .prod-block.discount .goods-item::after{
  95. position: absolute;
  96. left: 36rpx;
  97. top: 0;
  98. bottom: 0;
  99. width: 2rpx;
  100. height: auto;
  101. content: "";
  102. border-left: 2rpx dashed #eee;
  103. z-index: 0;
  104. }
  105. .shop-item .prod-block .item {
  106. background: #fff;
  107. display: flex;
  108. align-items: center;
  109. padding: 20rpx;
  110. border-top: 2rpx solid #f2f2f2;
  111. z-index: 2;
  112. }
  113. .shop-item .prod-block .item .btn {
  114. z-index: 3;
  115. }
  116. .shop-item .prod-block .item .prodinfo {
  117. position: relative;
  118. color: #999;
  119. flex: 1;
  120. display: flex;
  121. margin-left: 10rpx;
  122. }
  123. .shop-item .prod-block .item .prodinfo .pic {
  124. text-align: center;
  125. width: 200rpx;
  126. height: 200rpx;
  127. width: 160rpx;
  128. height: 160rpx;
  129. line-height: 180rpx;
  130. font-size: 0;
  131. }
  132. .shop-item .prod-block .item .prodinfo .pic image {
  133. width: 100%;
  134. height: 100%;
  135. border-radius: 16rpx;
  136. }
  137. .shop-item .prod-block .item .prodinfo .opt {
  138. margin-left: 20rpx;
  139. flex: 1;
  140. }
  141. .shop-item .prod-block .item .prodinfo .opt .prod-name {
  142. font-size: 28rpx;
  143. color: #333;
  144. max-height: 72rpx;
  145. line-height: 36rpx;
  146. display: -webkit-box;
  147. word-break: break-all;
  148. overflow: hidden;
  149. text-overflow: ellipsis;
  150. -webkit-line-clamp: 2;
  151. -webkit-box-orient: vertical;
  152. }
  153. .shop-item .prod-block .item .prodinfo .opt .prod-center-row {
  154. display: flex;
  155. align-items: center;
  156. margin-top: 10rpx;
  157. height: 36rpx;
  158. line-height: 36rpx;
  159. }
  160. .shop-item .prod-block .item .prodinfo .opt .prod-center-row .prod-discount {
  161. padding: 0 16rpx;
  162. background: #fdf1f2;
  163. margin-right: 20rpx;
  164. display: flex;
  165. align-items: center;
  166. border-radius: 20rpx;
  167. }
  168. .shop-item .prod-block .item .prodinfo .opt .prod-center-row .prod-discount .discount-name {
  169. color: #e43130;
  170. font-size: 22rpx;
  171. display: -webkit-box;
  172. -webkit-box-orient: vertical;
  173. -webkit-line-clamp: 1;
  174. overflow: hidden;
  175. text-overflow: ellipsis;
  176. }
  177. .shop-item .prod-block .item .prodinfo .opt .prod-center-row .prod-discount .down-arrow {
  178. width: 10rpx;
  179. height: 10rpx;
  180. border-bottom: 2rpx solid #e43130;
  181. border-right: 2rpx solid #e43130;
  182. transform: rotate(45deg);
  183. margin-left: 10rpx;
  184. margin-bottom: 6rpx;
  185. }
  186. .shop-item .prod-block .item .prodinfo .opt .prod-center-row .prod-info-text {
  187. color: #666;
  188. background: #f3f3f3;
  189. padding: 0 16rpx;
  190. border-radius: 20rpx;
  191. font-size: 22rpx;
  192. position: relative;
  193. font-family: arial;
  194. display: -webkit-box;
  195. -webkit-box-orient: vertical;
  196. -webkit-line-clamp: 1;
  197. overflow: hidden;
  198. text-overflow: ellipsis;
  199. }
  200. .shop-item .prod-block .item .prodinfo .opt .prod-center-row .prod-info-text.empty-n {
  201. display: none;
  202. }
  203. .shop-item .prod-block .item .prodinfo .opt .price-count {
  204. display: flex;
  205. align-items: center;
  206. justify-content: space-between;
  207. height: 56rpx;
  208. margin-top: 20rpx;
  209. }
  210. /* 加减框 */
  211. /* .car-box .item .info .price-box .num-box{ */
  212. .num-box{
  213. display: flex;
  214. align-items: center;
  215. }
  216. /* .car-box .item .info .price-box .num-box .btn{ */
  217. .num-box .btn{
  218. font-size: 20rpx;
  219. width: 44rpx;
  220. height: 44rpx;
  221. text-align: center;
  222. }
  223. /* .car-box .item .info .price-box .num-box .num{ */
  224. .num-box .num{
  225. width: 80rpx;
  226. height: 44rpx;
  227. background: #FFFFFF;
  228. text-align: center;
  229. line-height: 40rpx;
  230. font-size: 24rpx ;
  231. color: #222222;
  232. border-bottom: 2rpx solid #F0F0F0;
  233. border-top: 2rpx solid #F0F0F0;
  234. box-sizing: border-box;
  235. }
  236. .shop-item .prod-block .item .prodinfo .opt .num-box:not(.disabled) .btn:not(.disabled):active {
  237. opacity: 0.6;
  238. }
  239. /*checkbox 选项框大小 */
  240. checkbox .wx-checkbox-input {
  241. border-radius: 50%;
  242. width: 32rpx;
  243. height: 32rpx;
  244. }
  245. /*checkbox选中后样式 */
  246. checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  247. /* background: #e43130;
  248. border-color: #e43130; */
  249. background: #006CE8;
  250. border-color: #006CE8;
  251. }
  252. /*checkbox选中后图标样式 */
  253. checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  254. text-align: center;
  255. font-size: 20rpx;
  256. color: #fff;
  257. background: transparent;
  258. transform: translate(-50%, -50%) scale(1);
  259. -webkit-transform: translate(-50%, -50%) scale(1);
  260. }
  261. /** 底部按钮 */
  262. .cart-footer {
  263. position: fixed;
  264. bottom: 166rpx;
  265. left: 0;
  266. width: 100%;
  267. display: flex;
  268. align-items: center;
  269. height: 90rpx;
  270. z-index: 999;
  271. background: #fff;
  272. box-shadow: -6rpx 0 6rpx rgba(0, 0, 0, 0.1);
  273. }
  274. .cart-footer .all {
  275. font-size: 28rpx;
  276. margin-left: 20rpx;
  277. }
  278. .cart-footer .all label {
  279. display: flex;
  280. align-items: center;
  281. }
  282. .cart-footer .del {
  283. color: #e43130;
  284. font-size: 24rpx;
  285. margin-left: 20rpx;
  286. }
  287. .cart-footer .total {
  288. flex: 1;
  289. display: flex;
  290. align-items: center;
  291. margin-left: 40rpx;
  292. }
  293. .cart-footer .total .total-con .finally .blod {
  294. font-weight: bold;
  295. font-size: 28rpx;
  296. }
  297. .cart-footer .total .total-con .finally .price {
  298. font-size: 30rpx;
  299. }
  300. .cart-footer .total .total-msg {
  301. font-size: 22rpx;
  302. text-align: right;
  303. }
  304. .cart-footer .total .arrow-icon {
  305. width: 40rpx;
  306. height: 20rpx;
  307. margin-left: 10rpx;
  308. }
  309. .cart-footer .total .arrow-icon image {
  310. display: block;
  311. width: 100%;
  312. height: 100%;
  313. }
  314. .cart-footer .settle {
  315. height: 70rpx;
  316. line-height: 70rpx;
  317. /* padding: 0 50rpx; */
  318. width: 220rpx;
  319. text-align: center;
  320. background: #006CE8;
  321. color: #fff;
  322. border-radius: 70rpx;
  323. margin-right: 20rpx;
  324. font-size: 28rpx;
  325. }
  326. /** end 底部按钮 */
  327. /* 满减活动弹框 */
  328. /*模态框*/
  329. .modals {
  330. position: fixed;
  331. z-index: 999;
  332. top: 0;
  333. left: 0;
  334. right: 0;
  335. bottom: 0;
  336. }
  337. .pri-modal {
  338. position: fixed;
  339. z-index: 99;
  340. top: 0;
  341. left: 0;
  342. right: 0;
  343. bottom: 0;
  344. }
  345. .modals-cancel {
  346. position: absolute;
  347. z-index: 1000;
  348. top: 0;
  349. left: 0;
  350. right: 0;
  351. bottom: 0;
  352. background-color: rgba(0, 0, 0, 0.5);
  353. }
  354. .bottom-dialog-body {
  355. position: absolute;
  356. z-index: 10001;
  357. bottom: 0;
  358. left: 0;
  359. right: 0;
  360. height: 500rpx;
  361. background-color: #fff;
  362. }
  363. .bottom-dialog-box {
  364. position: absolute;
  365. z-index: 10001;
  366. bottom: 90rpx;
  367. left: 0;
  368. right: 0;
  369. height: 500rpx;
  370. background-color: #fff;
  371. }
  372. .radius {
  373. border-radius: 20rpx 20rpx 0 0;
  374. }
  375. /*动画前初始位置*/
  376. .bottom-pos {
  377. -webkit-transform: translateY(100%);
  378. transform: translateY(100%);
  379. }
  380. .radio-group {
  381. display: block;
  382. width: 100%;
  383. height: 350rpx;
  384. overflow-y:auto;
  385. }
  386. .discount-title {
  387. font-size: 30rpx;
  388. margin-bottom: 20rpx;
  389. padding:26rpx;
  390. background: #f1f1f1;
  391. text-align: center;
  392. }
  393. radio {
  394. transform: scale(0.8);
  395. }
  396. radio .wx-radio-input{
  397. text-align: left;
  398. }
  399. .discount-radio label{
  400. display: inline-block;
  401. height:60rpx;
  402. line-height: 60rpx;
  403. }
  404. .discount-radio{
  405. font-size: 28rpx;
  406. height:60rpx;
  407. line-height: 60rpx;
  408. padding:0 20rpx
  409. }
  410. /* 购物车为空 */
  411. .empty {
  412. margin-top: 100rpx;
  413. text-align: cneter;
  414. }
  415. .empty-icon {
  416. display: block;
  417. width: 100rpx;
  418. height: 100rpx;
  419. margin: 0 auto;
  420. margin-bottom: 20rpx;
  421. }
  422. .empty-icon > image {
  423. width: 100%;
  424. height: 100%;
  425. }
  426. .empty-text {
  427. font-size: 28rpx;
  428. text-align: center;
  429. color: #999;
  430. line-height: 2em;
  431. }
  432. /* 金额明细 */
  433. .price-detail {
  434. max-height: 220rpx;
  435. overflow-y: scroll;
  436. padding: 10rpx 20rpx;
  437. }
  438. .price-detail-item {
  439. display: flex;
  440. align-items: center;
  441. justify-content: space-between;
  442. height: 3em;
  443. font-size: 28rpx;
  444. border-bottom: 1px solid #f2f2f2;
  445. }
  446. .price-detail-item:last-child {
  447. border: 0;
  448. }
  449. .det-num {
  450. color: #e43130;
  451. }