page { background: #f2f3f7; } .cart { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 750rpx; margin: auto; } .cart .cart-con { height: calc(100% - 200rpx - env(safe-area-inset-bottom)); overflow-y: scroll; -webkit-overflow-scrolling: touch; position: relative; } /* #ifdef MP-WEIXIN */ .cart .cart-con { height: calc(100% - 100rpx); } /* #endif */ .cart .cart-con::after { min-height: calc(100% + 2rpx); } .cart .cart-con .con-box { padding: 88rpx 0 30rpx; } /* 购物车头部 */ .cart .cart-top { padding: 30rpx; background: #fff; border-radius: 0 0 10rpx 10rpx; display: flex; align-items: center; justify-content: space-between; font-weight: 600; position: fixed; top: 0; left: 0; right: 0; max-width: 750rpx; margin: auto; height: 28rpx; z-index: 10; box-shadow: 0 6rpx 6rpx rgba(0,0,0,.01); } .cart .cart-top .address { display: flex; align-items: center; } .cart .cart-top .address .img { width: 24rpx; height: 24rpx; font-size: 0; } .cart .cart-top .address .text { margin-left: 10rpx; } /* 店铺商品 */ .cart .shop-item { background: #fff; border-radius: 10rpx; padding: 30rpx; margin-top: 30rpx; } .cart .shop-item .shop-info { display: flex; align-items: center; } .cart .shop-item .shop-info .info { flex: 1; display: flex; align-items: center; } .cart .shop-item .shop-info .info .icon { width: 24rpx; height: 24rpx; font-size: 0; margin: 0 10rpx 0 30rpx; } .cart .shop-item .shop-info .info .name { font-weight: 600; } .cart .shop-item .shop-info .get-coupon { color: #fc1b35; background: #fdf1f2; line-height: 24rpx; padding: 4rpx 12rpx; font-size: 20rpx; border-radius: 60rpx; } .cart .shop-item .item-box .discount-prod { padding: 30rpx 0; border-bottom: 2rpx dashed #f2f2f2; } .cart .shop-item .item-box .discount-prod:first-child { margin-top: 24rpx; border-top: 2rpx dashed #f2f2f2; } .cart .shop-item .prod-item .discount-info { display: none; align-items: center; } .cart .shop-item .prod-item.discount-prod .discount-info { display: flex; } .cart .shop-item .prod-item .discount-info .d-name { padding: 4rpx 6rpx; background: #fc1b35; border-radius: 4rpx; color: #fff; font-size: 20rpx; line-height: 1; } .cart .shop-item .prod-item .discount-info .d-des { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; margin: 0 10rpx; font-weight: 600; } .cart .shop-item .prod-item .prod-box { display: flex; padding-top: 30rpx; } .cart .shop-item .prod-item .prod-box .check { margin-top: 72rpx; } .cart .shop-item .prod-item .prod-box .prod-img { width: 180rpx; height: 180rpx; border-radius: 10rpx; overflow: hidden; font-size: 0; margin: 0 20rpx 0 30rpx; } .cart .shop-item .prod-item .prod-box .prod-info { flex: 1; } .cart .shop-item .prod-item .prod-box .prod-info .name { max-height: 64rpx; line-height: 32rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .cart .shop-item .prod-item .prod-box .prod-info .activity, .cart .shop-item .prod-item .prod-box .prod-info .sku { display: inline-block; line-height: 28rpx; padding: 4rpx 36rpx 4rpx 16rpx; font-size: 20rpx; border-radius: 60rpx; margin-top: 16rpx; margin-right: 10rpx; position: relative; } .cart .shop-item .prod-item .prod-box .prod-info .activity { color: #fc1b35; background: #fdf1f2; } .cart .shop-item .prod-item .prod-box .prod-info .sku { color: #666; background: #f3f3f3; } .cart .shop-item .prod-item .prod-box .prod-info .activity::after, .cart .shop-item .prod-item .prod-box .prod-info .sku::after { position: absolute; top: 43%; right: 20rpx; display: block; width: 8rpx; height: 8rpx; content: " "; font-size: 0; transform: rotate(45deg) translateY(-50%); } .cart .shop-item .prod-item .prod-box .prod-info .activity::after { border-right: 2rpx solid #fc1b35; border-bottom: 2rpx solid #fc1b35; } .cart .shop-item .prod-item .prod-box .prod-info .sku::after { border-right: 2rpx solid #666; border-bottom: 2rpx solid #666; } .cart .shop-item .prod-item .prod-box .prod-info .price-number { margin-top: 20rpx; display: flex; align-items: center; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .price { flex: 1; margin-right: 20rpx; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box { display: flex; align-items: center; font-family: PingFangSC-Medium, tahoma; font-weight: 600; text-align: center; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .minus, .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .plus { background: #f2f2f2; width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; position: relative; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .minus::after, .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .plus::after { position: absolute; left: 50%; top: 45%; display: block; transform: translate(-50%,-50%); } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .minus::after { font-size: 26rpx; content: "-"; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .plus::after { font-size: 28rpx; content: "+"; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .limit { opacity: 0.7; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .limit::after { color: #ccc; } .cart .shop-item .prod-item .prod-box .prod-info .price-number .number-box .number { width: 60rpx; padding: 0 10rpx; } /* 失效商品 */ .cart .shop-item.invalid .tit { display: flex; align-items: center; justify-content: space-between; } .cart .shop-item.invalid .tit .text { font-weight: 600; } .cart .shop-item.invalid .tit .clear { color: #fc1b35; } .cart .shop-item.invalid .prod-item .prod-box .invalid-icon { background: #bbb; width: 56rpx; height: 28rpx; line-height: 28rpx; text-align: center; border-radius: 28rpx; align-self: center; color: #fff; font-size: 20rpx; margin-right: -20rpx; } .cart .shop-item.invalid .prod-item .prod-box .check { display: none; } .cart .shop-item.invalid .prod-item .prod-box .prod-info .price-number .price { color: #666; } .cart .shop-item.invalid .prod-item .prod-box .find-similar { padding: 6rpx 30rpx; border-radius: 60rpx; color: #fc1b35; border: 2rpx solid #fc1b35; font-size: 22rpx; } /* 底部 */ .settlement { position: fixed; bottom: calc(100rpx + env(safe-area-inset-bottom)); left: 0; right: 0; max-width: 750rpx; margin: auto; height: 100rpx; box-sizing: border-box; padding: 0 30rpx; display: flex; align-items: center; background: #fff; box-shadow: 0 -6rpx 6rpx rgba(0,0,0,.01); border-radius: 10rpx 10rpx 0 0; z-index: 200; } /* #ifdef MP-WEIXIN */ .settlement { bottom: 0; } /* #endif */ .settlement .all-check { display: flex; align-items: center; } .settlement .all-check .text { margin-left: 20rpx; } .settlement .price-box { flex: 1; margin: 0 20rpx; position: relative; padding-right: 40rpx; } .settlement .price-box .total { display: flex; justify-content: flex-end; align-items: baseline; font-weight: 600; } .settlement .price-box .discount { text-align: right; font-size: 20rpx; font-weight: 600; } .settlement .btn-box { flex: 1; display: none; justify-content: flex-end; } .settlement .btn-box .gray-btn { padding: 0 40rpx; height: 56rpx; line-height: 58rpx; border-radius: 56rpx; border: 2rpx solid #ddd; margin-left: 20rpx; } .settlement .btn-box .gray-btn.add-collection { color: #fc1b35; border: 2rpx solid #fc1b35; } .settlement .btn { padding: 0 40rpx; height: 70rpx; line-height: 70rpx; color: #fff; background: #fc1b35; border-radius: 70rpx; font-size: 26rpx; font-weight: 600; } /* 猜你喜欢 */ .guess-like .prods { padding-bottom: 0; } /* 编辑购物车 */ .cart.edit-cart .shop-item .shop-info .get-coupon, .cart.edit-cart .shop-item.invalid .prod-item .prod-box .invalid-icon, .cart.edit-cart .settlement .price-box, .cart.edit-cart .settlement .btn { display: none; } .cart.edit-cart .settlement .btn-box { display: flex; } .cart.edit-cart .shop-item.invalid .prod-item .prod-box .check { display: block; } /* 弹窗 */ .cart .popup .con-box { bottom: calc(100rpx + env(safe-area-inset-bottom)); } .cart .popup .btn-box { bottom: calc(100rpx + env(safe-area-inset-bottom)); } /* #ifdef MP-WEIXIN */ .cart .popup .con-box { bottom: 110rpx !important; } .cart .popup .btn-box { bottom: 0; } /* #endif */ /* 优惠活动弹窗 */ .cart .popup .check-discount .con-box { bottom: calc(210rpx + env(safe-area-inset-bottom)); } /* sku弹窗 */ .cart .popup .check-sku .con-box { bottom: calc(210rpx + env(safe-area-inset-bottom)); } /* 金额明细弹窗 */ .popup.price-detail { z-index: 190; } .popup.price-detail .popup-con-bottom { height: 40%; bottom: calc(190rpx + env(safe-area-inset-bottom)); } /* #ifdef MP-WEIXIN */ .popup.price-detail .popup-con-bottom { bottom: 90rpx; } /* #endif */ .popup.price-detail .popup-con-bottom .con-box { bottom: 0; } .popup.price-detail .price-item { display: flex; justify-content: space-between; align-items: center; padding-bottom: 30rpx; } .popup.price-detail .price-item:first-child { padding-top: 20rpx; } .popup.price-detail .price-item:last-child { padding-bottom: 40rpx; } .popup.price-detail .price-item .color-black { color: #333; } /* 配送方式弹窗 */ .popup .check-distribution { height: 80%; } .popup .check-distribution .des { color: #999; margin-top: 20rpx; } .popup .check-distribution .p-item { margin-top: 30rpx; background: #f9f9f9; border-radius: 10rpx; padding: 30rpx; } .popup .check-distribution .p-item:last-child { margin-bottom: 30rpx; } .popup .check-distribution .p-item .p-tit { font-weight: 600; } .popup .check-distribution .p-item .p-con { display: flex; align-items: center; justify-content: space-between; margin: 20rpx 0; } .popup .check-distribution .p-item .p-con .prods-item { max-width: 320rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; font-size: 28rpx; } .popup .check-distribution .p-item .p-con .prods-item .pic { width: 80rpx; height: 80rpx; font-size: 0; margin-right: 20rpx; display: inline-block; } .popup .check-distribution .p-item .p-con .p-btn { background: #fc1b35; padding: 8rpx 30rpx; color: #fff; font-size: 24rpx; border-radius: 40rpx; margin-top: 10rpx; } .popup .check-distribution .p-item .p-total { display: flex; align-items: baseline; font-size: 24rpx; } .popup .check-distribution .p-item .p-total .num { color: #fc1b35; font-family: arial; }