diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index ecd02fb..c5e1bbe 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -933,6 +933,8 @@ onMounted(() => { @media (max-width: 768px) { .cart-page { padding-bottom: 20px; + padding-left: 12px; + padding-right: 12px; } .cart-header { @@ -941,23 +943,56 @@ onMounted(() => { .cart-item { flex-wrap: wrap; - gap: 12px; - padding: 14px; + gap: 8px; + padding: 12px; + align-items: flex-start; - > .el-checkbox { width: 24px; order: 1; } - > .item-product { flex: 1; min-width: 0; order: 2; } - > .item-price { width: auto; order: 4; margin-left: 36px; } - > .item-quantity { width: auto; order: 5; } - > .item-subtotal { width: auto; order: 3; margin-left: auto; } - > .item-action { width: auto; order: 6; } + > .el-checkbox { + width: 24px; + order: 1; + margin-top: 24px; + } + > .item-product { + flex: 1; + min-width: 0; + order: 2; + width: calc(100% - 36px); + } + > .item-price { + display: none; + } + > .item-quantity { + order: 4; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 12px; + padding-left: 36px; + margin-top: 8px; + } + > .item-subtotal { + order: 3; + width: auto; + margin-left: auto; + padding-right: 8px; + } + > .item-action { + order: 5; + width: 100%; + padding-left: 36px; + margin-top: 4px; + } } .item-product { - gap: 12px; + gap: 10px; + flex-wrap: nowrap; .item-image { - width: 80px; - height: 80px; + width: 70px; + height: 70px; flex-shrink: 0; } } @@ -965,6 +1000,31 @@ onMounted(() => { .item-info { flex: 1; min-width: 0; + display: flex; + flex-direction: column; + justify-content: center; + gap: 4px; + } + + .item-name { + font-size: 14px; + line-height: 1.4; + } + + .item-quantity { + :deep(.el-input-number) { + width: 100px; + } + + .stock-tip { + font-size: 11px; + } + } + + .item-subtotal { + .subtotal-price { + font-size: 16px; + } } .payment-methods { @@ -972,25 +1032,33 @@ onMounted(() => { } .cart-left { - gap: 16px; + gap: 12px; } .checkout-section { - padding: 16px; + padding: 12px; } .cart-summary-panel { - padding: 16px; + padding: 12px; } .summary-title { font-size: 16px; - margin-bottom: 16px; - padding-bottom: 12px; + margin-bottom: 12px; + padding-bottom: 10px; } .summary-total .total-amount { font-size: 20px; } + + .address-item { + padding: 12px; + } + + .payment-item { + padding: 12px 8px; + } }