.good-confirm-container { background: #fff; border-radius: 20px 20px 0 0; padding: 0; max-height: 80vh; overflow: hidden; .header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 16px; border-bottom: 1px solid #f5f5f5; position: relative; .header-title { font-size: 18px; font-weight: 600; color: #333; flex: 1; text-align: center; } .close-btn { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #f8f8f8; transition: background 0.2s; &:active { background: #e8e8e8; } } } .goods-info { display: flex; padding: 20px; gap: 12px; border-bottom: 1px solid #f5f5f5; .goods-image { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; image { width: 100%; height: 100%; object-fit: cover; } } .goods-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; .goods-title { font-size: 16px; font-weight: 500; color: #333; line-height: 22px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .goods-price { display: flex; align-items: baseline; margin-bottom: 8px; .currency { font-size: 14px; color: #ff6b35; font-weight: 500; } .price { font-size: 20px; color: #ff6b35; font-weight: 600; margin-left: 2px; } } .goods-tag { display: inline-block; padding: 2px 8px; background: #fff2e8; color: #ff6b35; font-size: 12px; border-radius: 4px; border: 1px solid #ffdbcc; align-self: flex-start; } } } .quantity-section { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #f5f5f5; .quantity-label { font-size: 16px; color: #333; font-weight: 500; } .quantity-control { display: flex; align-items: center; gap: 0; border: 1px solid #e8e8e8; border-radius: 6px; overflow: hidden; .quantity-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f8f8f8; transition: background 0.2s; &:active:not(.disabled) { background: #e8e8e8; } &.disabled { opacity: 0.4; pointer-events: none; } } .quantity-input { width: 60px; height: 36px; display: flex; align-items: center; justify-content: center; background: #fff; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; input { width: 100%; height: 100%; text-align: center; border: none; outline: none; font-size: 16px; color: #333; background: transparent; } } } } .total-section { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #f8f9fa; .total-label { font-size: 16px; color: #333; font-weight: 500; } .total-price { display: flex; align-items: baseline; .currency { font-size: 16px; color: #ff6b35; font-weight: 600; } .price { font-size: 24px; color: #ff6b35; font-weight: 700; margin-left: 2px; } } } .footer { padding: 20px; background: #fff; .confirm-btn { width: 100%; height: 48px; background: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%); color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.2s; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); &:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3); } &::after { border: none; } } } }