diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index 0be057a..30684bc 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -923,24 +923,27 @@ onMounted(() => { .cart-container { grid-template-columns: 1fr; } - + .cart-summary-panel { position: static; - order: -1; margin-bottom: 20px; } } @media (max-width: 768px) { + .cart-page { + padding-bottom: 20px; + } + .cart-header { display: none; } - + .cart-item { flex-wrap: wrap; gap: 12px; padding: 14px; - + > .el-checkbox { width: 24px; order: 1; } > .item-product { flex: 1; min-width: 0; order: 2; } > .item-price { width: auto; order: 4; margin-left: 36px; } @@ -948,27 +951,46 @@ onMounted(() => { > .item-subtotal { width: auto; order: 3; margin-left: auto; } > .item-action { width: auto; order: 6; } } - + .item-product { - flex-direction: column; - gap: 8px; - + gap: 12px; + .item-image { - width: 100%; - height: 120px; + width: 80px; + height: 80px; + flex-shrink: 0; } } - - .payment-methods { - grid-template-columns: 1fr; + + .item-info { + flex: 1; + min-width: 0; } - + + .payment-methods { + grid-template-columns: repeat(2, 1fr); + } + .cart-left { gap: 16px; } - + .checkout-section { padding: 16px; } + + .cart-summary-panel { + padding: 16px; + } + + .summary-title { + font-size: 16px; + margin-bottom: 16px; + padding-bottom: 12px; + } + + .summary-total .total-amount { + font-size: 20px; + } }