diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index c5c6d8c..5b3ce69 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -941,22 +941,27 @@ onMounted(() => { display: none; } + /* 商品项整体容器 */ .cart-item { - display: block; + display: flex; + flex-wrap: wrap; + align-items: flex-start; padding: 12px; - padding-left: 40px; + padding-left: 44px; position: relative; + gap: 0; } - /* 复选框 - 左上角 */ + /* 复选框 - 左侧固定 */ .cart-item > .el-checkbox { position: absolute; - top: 14px; + top: 50%; left: 12px; + transform: translateY(-50%); width: 24px; } - /* 删除按钮 - 右上角 */ + /* 删除按钮 - 右上角固定 */ .cart-item > .item-action { position: absolute; top: 12px; @@ -964,52 +969,62 @@ onMounted(() => { width: auto; } - /* 商品信息 - 第一行 */ + /* 商品图片+信息 - 占满一行 */ .cart-item > .item-product { + width: 100%; display: flex; gap: 10px; padding-right: 50px; - margin-bottom: 10px; + margin-bottom: 12px; + cursor: pointer; } - /* 隐藏单价列 */ + /* 隐藏单价 */ .cart-item > .item-price { display: none; } - /* 数量 - 单独一行 */ + /* 数量行 - 占满一行 */ .cart-item > .item-quantity { + width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } - /* 小计金额 - 单独一行 */ + /* 小计行 - 占满一行 */ .cart-item > .item-subtotal { + width: 100%; text-align: left; } + /* 商品图片 */ .item-product .item-image { width: 50px; height: 50px; flex-shrink: 0; } + /* 商品信息 */ .item-info { flex: 1; min-width: 0; } + /* 数量输入框 */ .item-quantity :deep(.el-input-number) { width: 100px; } + /* 小计金额样式 */ .item-subtotal .subtotal-price { font-size: 16px; + font-weight: 600; color: #f56c6c; } + /* 支付方式2列 */ .payment-methods { grid-template-columns: repeat(2, 1fr); }