.footer-cont { background-color: #fff; padding: 12rpx 12rpx calc(env(safe-area-inset-bottom) + 12rpx) 12rpx; display: flex; align-items: center; gap: 20rpx; position: sticky; bottom: 0; left: 0; right: 0; z-index: 10; box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.05); box-sizing: border-box; } .icon-warp { width: 100rpx; height: 80rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #f8f8f8; border-radius: 16rpx; border: 1rpx solid #f0f0f0; transition: all 0.3s ease; } .icon-warp:active { background: #f0f0f0; transform: scale(0.95); } .operate-wrap { position: relative; flex: 1; } .bottom-operate-left { display: flex; gap: 12rpx; flex: none; min-width: 0; } .bottom-operate-left .icon-warp { width: 100rpx; flex: none; } .tag-cart-num { display: inline-block; position: absolute; left: 50rpx; right: auto; top: 6rpx; color: #fff; line-height: 24rpx; text-align: center; z-index: 99; white-space: nowrap; min-width: 28rpx; border-radius: 14rpx; background-color: #fa550f !important; font-size: 20rpx; font-weight: 400; padding: 2rpx 6rpx; } .operate-text { color: #666; font-size: 20rpx; margin-top: 4rpx; font-weight: 400; } .soldout { height: 80rpx; background: linear-gradient(135deg, #ccc 0%, #aaa 100%); width: 100%; color: #fff; border-radius: 16rpx; font-size: 28rpx; font-weight: 500; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); } .addCart-disabled, .bar-addCart-disabled { background: linear-gradient(135deg, #ddd 0%, #ccc 100%) !important; color: #fff !important; font-size: 28rpx; border-radius: 16rpx 0 0 16rpx !important; } .buyNow-disabled, .bar-buyNow-disabled { background: linear-gradient(135deg, #ccc 0%, #aaa 100%) !important; color: #fff !important; font-size: 28rpx; border-radius: 0 16rpx 16rpx 0 !important; } .bar-separately, .bar-buy { height: 80rpx; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 4rpx 12rpx rgba(250, 65, 38, 0.2); flex: 1 1 auto; min-width: 160rpx; box-sizing: border-box; } .bar-separately { background: linear-gradient(135deg, #fff5f4 0%, #ffece9 100%); color: #fa4126; border-radius: 16rpx 0 0 16rpx; border: 2rpx solid #fa4126; box-shadow: 0 4rpx 12rpx rgba(250, 65, 38, 0.1); } .bar-separately:active { background: linear-gradient(135deg, #ffece9 0%, #ffe0dc 100%); transform: scale(0.98); } .bar-buy { background: linear-gradient(135deg, #fa4126 0%, #e63312 100%); border-radius: 0 16rpx 16rpx 0; } .bar-buy:active { background: linear-gradient(135deg, #e63312 0%, #d12a0f 100%); transform: scale(0.98); } /* 收藏按钮样式 */ .favorite-wrap { position: relative; } .favorite-wrap .operate-text { color: #666; transition: color 0.3s ease; } .favorite-wrap:active .operate-text { color: #ff4757; } .flex { display: flex; display: -webkit-flex; } .flex-center { justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; } .flex-between { justify-content: space-between; -webkit-justify-content: space-between; } /* 购买按钮容器自适应剩余空间 */ .buy-buttons { display: flex; gap: 0; flex: 1 1 auto; min-width: 0; }