@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ .container { padding-bottom: 134rpx; background-color: #f8f6f6; /* 空白页 */ } .container .empty { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; padding-bottom: 100rpx; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; background: #fff; } .container .empty .emptyImg { width: 300rpx; height: 250rpx; margin-bottom: 30rpx; } .container .empty .empty-tips { display: -webkit-box; display: -webkit-flex; display: flex; font-size: 26rpx; color: #c0c4cc; } .container .empty .empty-tips .navigator { margin-left: 16rpx; color: #901b21; } /* 购物车列表项 */ .cart-item { display: -webkit-box; display: -webkit-flex; display: flex; position: relative; padding: 30rpx 38rpx 27rpx 92rpx; } .cart-item .image-wrapper { width: 160rpx; height: 160rpx; -webkit-flex-shrink: 0; flex-shrink: 0; position: relative; } .cart-item .image-wrapper image { border-radius: 8rpx; } .cart-item .checkbox { position: absolute; left: -67rpx; top: 57rpx; margin: auto 0; z-index: 8; font-size: 44rpx; line-height: 1; padding: 4rpx; color: #c0c4cc; background: #fff; border-radius: 50px; } .cart-item .item-right { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; overflow: hidden; position: relative; padding-left: 30rpx; } .cart-item .item-right .ex-addr { height: 22rpx; font-size: 22rpx; font-weight: 500; color: #dcb876; } .cart-item .item-right .ex-addr image { height: 22rpx; } .cart-item .item-right .ex-addr .name-img { width: 26rpx; margin: 0 4rpx -3rpx 0; } .cart-item .item-right .ex-addr .point-img { width: 16rpx; margin: 0 4rpx -3rpx 14rpx; } .cart-item .item-right .title, .cart-item .item-right .price { font-size: 30rpx; color: #303133; height: 40rpx; line-height: 40rpx; font-weight: bold; color: #333333; } .cart-item .item-right .title .oldprice, .cart-item .item-right .price .oldprice { font-size: 24rpx; color: #9a9a9a; text-decoration: line-through; display: inline-block; padding-left: 10rpx; } .cart-item .item-right .attr { font-size: 26rpx; color: #909399; height: 50rpx; line-height: 50rpx; } .cart-item .item-right .price { position: absolute; bottom: 0; height: 50rpx; line-height: 50rpx; } .cart-item .item-right .step { position: absolute; bottom: 0; right: 0rpx; } .cart-item .item-right .del-btn { padding: 4rpx 10rpx; font-size: 34rpx; height: 50rpx; color: #909399; position: absolute; top: 0; right: 0; } /* 底部栏 */ .action-section { position: fixed; left: 30rpx; bottom: 30rpx; z-index: 95; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 690rpx; height: 100rpx; padding: 0 30rpx; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5); border-radius: 16rpx; } .action-section .checkbox { height: 52rpx; position: relative; } .action-section .checkbox .icon-checked-box { border-radius: 50rpx; background-color: #ffffff; width: 52rpx; height: 100%; position: relative; z-index: 5; font-size: 53rpx; line-height: 1; color: #909399; } .action-section .checkbox .icon-checked { color: #921a23; } .action-section .clear-btn { position: absolute; left: 26rpx; top: 0; z-index: 4; width: 0; height: 52rpx; line-height: 52rpx; padding-left: 38rpx; font-size: 28rpx; color: #fff; background: #c0c4cc; border-radius: 0 50px 50px 0; opacity: 0; -webkit-transition: 0.2s; transition: 0.2s; } .action-section .clear-btn.show { opacity: 1; width: 120rpx; } .action-section .total-box { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; text-align: right; padding-right: 40rpx; } .action-section .total-box .price { font-size: 32rpx; color: #303133; } .action-section .total-box .coupon { font-size: 24rpx; color: #909399; } .action-section .total-box .coupon text { color: #303133; } .action-section .confirm-btn { padding: 0 38rpx; margin: 0; border-radius: 100px; height: 76rpx; line-height: 76rpx; font-size: 30rpx; background: #921a23; } /* 复选框选中状态 */ .action-section .checkbox.checked, .cart-item .checkbox.checked { color: #921a23; }