diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index 7bf1209..c5c6d8c 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -944,40 +944,19 @@ onMounted(() => { .cart-item { display: block; padding: 12px; + padding-left: 40px; position: relative; } + /* 复选框 - 左上角 */ .cart-item > .el-checkbox { position: absolute; - top: 12px; + top: 14px; left: 12px; width: 24px; } - .cart-item > .item-product { - display: flex; - gap: 10px; - padding-left: 32px; - padding-right: 60px; - } - - .cart-item > .item-price { - display: none; - } - - .cart-item > .item-quantity { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 10px; - padding-left: 32px; - } - - .cart-item > .item-subtotal { - text-align: right; - margin-top: 8px; - } - + /* 删除按钮 - 右上角 */ .cart-item > .item-action { position: absolute; top: 12px; @@ -985,6 +964,32 @@ onMounted(() => { width: auto; } + /* 商品信息 - 第一行 */ + .cart-item > .item-product { + display: flex; + gap: 10px; + padding-right: 50px; + margin-bottom: 10px; + } + + /* 隐藏单价列 */ + .cart-item > .item-price { + display: none; + } + + /* 数量 - 单独一行 */ + .cart-item > .item-quantity { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; + } + + /* 小计金额 - 单独一行 */ + .cart-item > .item-subtotal { + text-align: left; + } + .item-product .item-image { width: 50px; height: 50px; @@ -1002,6 +1007,7 @@ onMounted(() => { .item-subtotal .subtotal-price { font-size: 16px; + color: #f56c6c; } .payment-methods {