diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index d69e277..13ae463 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -946,42 +946,31 @@ onMounted(() => { overflow-y: visible; } - /* 商品项容器 */ + /* 商品项容器 - 两列布局 */ .cart-item { display: flex !important; - flex-direction: column !important; + flex-direction: row !important; flex-wrap: nowrap !important; - padding: 10px !important; - padding-top: 36px !important; + align-items: flex-start !important; + padding: 12px !important; position: relative !important; - gap: 8px; + gap: 10px !important; } - /* 复选框 - 左上角 */ + /* 复选框 - 左侧 */ .cart-item > .el-checkbox { - position: absolute !important; - top: 10px !important; - left: 10px !important; - width: 24px !important; - z-index: 10 !important; + width: 32px !important; + flex-shrink: 0 !important; + align-self: center !important; + margin-right: 0 !important; } - /* 删除按钮 - 右上角 */ - .cart-item > .item-action { - position: absolute !important; - top: 10px !important; - right: 10px !important; - width: auto !important; - z-index: 10 !important; - } - - /* 商品信息行 */ + /* 商品图片+信息 - 中间主体 */ .cart-item > .item-product { display: flex !important; flex-direction: row !important; - width: 100% !important; - padding-left: 28px !important; - margin-bottom: 8px !important; + flex: 1 !important; + min-width: 0 !important; cursor: pointer; } @@ -990,55 +979,70 @@ onMounted(() => { display: none !important; } - /* 数量行 */ + /* 数量 - 商品信息下方 */ .cart-item > .item-quantity { - width: 100% !important; - flex-direction: row !important; - align-items: center !important; - justify-content: flex-start !important; - padding-left: 28px !important; - margin-bottom: 4px !important; + width: auto !important; + flex-shrink: 0 !important; + align-self: center !important; + margin-left: 8px !important; } - /* 小计行 */ + /* 小计 - 右侧 */ .cart-item > .item-subtotal { - width: 100% !important; - text-align: left !important; - padding-left: 28px !important; + width: auto !important; + flex-shrink: 0 !important; + align-self: center !important; + text-align: right !important; + margin-left: 8px !important; + } + + /* 删除按钮 - 最右侧 */ + .cart-item > .item-action { + width: auto !important; + flex-shrink: 0 !important; + align-self: center !important; } .item-product .item-image { - width: 50px !important; - height: 50px !important; + width: 60px !important; + height: 60px !important; + margin-right: 10px !important; } .item-info { flex: 1; min-width: 0; - gap: 4px !important; + display: flex; + flex-direction: column; + gap: 6px; } .item-name { - font-size: 13px !important; - -webkit-line-clamp: 1 !important; + font-size: 14px !important; + line-height: 1.3 !important; + -webkit-line-clamp: 2 !important; } .item-tags { - display: none; + display: none !important; + } + + .item-off { + font-size: 12px !important; } .item-quantity :deep(.el-input-number) { - width: 90px; + width: 80px !important; } .item-quantity .stock-tip { - font-size: 11px; + display: none !important; } .item-subtotal .subtotal-price { - font-size: 15px; - font-weight: 600; - color: #f56c6c; + font-size: 15px !important; + font-weight: 600 !important; + color: #f56c6c !important; } /* 支付方式 */