diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index 5f585c9..66ecd93 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -52,11 +52,6 @@ 奖励: +{{ item.product?.credit_reward }} - -

已下架

@@ -76,11 +71,6 @@ 仅剩 {{ item.product?.stock }} 件 - -
@@ -952,14 +942,14 @@ onMounted(() => { gap: 12px !important; } + /* 订单摘要放底部 */ .cart-left { - order: 2 !important; + order: 1 !important; } .cart-summary-panel { - order: 1 !important; + order: 2 !important; position: static !important; - margin-bottom: 0 !important; } .cart-header { @@ -971,69 +961,65 @@ onMounted(() => { overflow: visible !important; } - /* 商品项 - 卡片式布局 */ + /* 商品项 - 两行布局 */ .cart-item { - display: grid !important; - grid-template-columns: 24px 1fr auto !important; - grid-template-rows: auto auto !important; - grid-template-areas: - "check product delete" - "check bottom bottom" !important; + display: flex !important; + flex-wrap: wrap !important; padding: 12px !important; gap: 10px !important; - align-items: start !important; - } - - /* 复选框 */ - .cart-item > .el-checkbox { - grid-area: check !important; - margin-right: 0 !important; - width: auto !important; - position: static !important; - } - - /* 商品信息区 */ - .cart-item > .item-product { - grid-area: product !important; - display: flex !important; - flex-direction: row !important; align-items: flex-start !important; - gap: 10px !important; - min-width: 0 !important; - width: 100% !important; - padding: 0 !important; } - /* 隐藏单价列 */ - .cart-item > .item-price { - display: none !important; - } - - /* 删除按钮 */ - .cart-item > .item-action { - grid-area: delete !important; + /* 第一行:复选框 + 商品信息 + 删除 */ + .cart-item > .el-checkbox { + order: 1 !important; + flex: 0 0 auto !important; width: auto !important; - position: static !important; + margin-right: 0 !important; } - /* 数量行 - 包含单价、数量、小计 */ - .cart-item > .item-quantity { - grid-area: bottom !important; + .cart-item > .item-product { + order: 2 !important; + flex: 1 1 auto !important; + min-width: 0 !important; + display: flex !important; + gap: 10px !important; + } + + .cart-item > .item-action { + order: 3 !important; + flex: 0 0 auto !important; + width: auto !important; + } + + /* 第二行:单价 + 数量 + 小计 */ + .cart-item > .item-price { + order: 4 !important; + flex: 0 0 auto !important; display: flex !important; - flex-direction: row !important; align-items: center !important; - justify-content: space-between !important; - width: 100% !important; - padding: 0 !important; - gap: 8px !important; - flex-wrap: wrap !important; + margin-left: 32px !important; + width: auto !important; + } + + .cart-item > .item-quantity { + order: 5 !important; + flex: 1 1 auto !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: auto !important; + min-width: 100px !important; } - /* 隐藏原来的小计列 */ .cart-item > .item-subtotal { - display: none !important; + order: 6 !important; + flex: 0 0 auto !important; + width: auto !important; + text-align: right !important; } + /* 商品图片 */ .item-product .item-image { width: 60px !important; height: 60px !important; @@ -1052,6 +1038,10 @@ onMounted(() => { line-height: 1.4 !important; margin-bottom: 4px !important; word-break: break-all !important; + display: -webkit-box !important; + -webkit-line-clamp: 2 !important; + -webkit-box-orient: vertical !important; + overflow: hidden !important; } .item-tags { @@ -1066,32 +1056,18 @@ onMounted(() => { } } - /* 移动端价格显示在商品名下方 */ - .item-info .mobile-price { - display: inline-flex !important; - align-items: baseline !important; - gap: 4px !important; - margin-top: 4px !important; - } - - .item-info .mobile-price .price-label { - font-size: 12px !important; - color: rgba(255, 255, 255, 0.5) !important; - } - - .item-info .mobile-price .price-value { - font-size: 15px !important; - font-weight: 600 !important; - color: #fff !important; + /* 单价 */ + .item-price .price-current { + font-size: 14px !important; } /* 数量选择器 */ .item-quantity :deep(.el-input-number) { - width: 100px !important; + width: 90px !important; } .item-quantity :deep(.el-input-number .el-input__wrapper) { - padding: 0 4px !important; + padding: 0 2px !important; } .item-quantity :deep(.el-input-number .el-input__inner) { @@ -1099,29 +1075,12 @@ onMounted(() => { } .item-quantity .stock-tip { - font-size: 10px !important; - width: 100% !important; - text-align: center !important; - margin-top: 2px !important; + display: none !important; } - /* 移动端小计显示 */ - .mobile-subtotal { - display: flex !important; - flex-direction: column !important; - align-items: flex-end !important; - gap: 2px !important; - } - - .mobile-subtotal .subtotal-label { - font-size: 11px !important; - color: rgba(255, 255, 255, 0.4) !important; - } - - .mobile-subtotal .subtotal-value { - font-size: 16px !important; - font-weight: 600 !important; - color: #f56c6c !important; + /* 小计 */ + .item-subtotal .subtotal-price { + font-size: 15px !important; } /* 地址 */