From 137e221f4af1877cd32fc2a46c2953835643caeb Mon Sep 17 00:00:00 2001 From: admin Date: Mon, 1 Jun 2026 18:48:58 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8C=89=E4=B8=BB=E6=B5=81=E7=94=B5?= =?UTF-8?q?=E5=95=86=E6=A0=87=E5=87=86=E9=87=8D=E6=9E=84=E8=B4=AD=E7=89=A9?= =?UTF-8?q?=E8=BD=A6=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 布局结构（参考京东/淘宝）： ┌──────────────────────────────────────────────────┐ │ [☑] [图片] 商品名称... [删除] │ │ 标签 │ │ ¥价格 [数量选择器] │ └──────────────────────────────────────────────────┘ - 复选框+图片+内容三列布局 - 商品名称和删除按钮在同一行 - 价格和数量选择器在底部行 - 桌面端和移动端完全分离的DOM结构 - 各元素位置清晰，不会错位 Co-Authored-By: Claude Opus 4.8 --- frontend/src/views/user/Cart.vue | 192 +++++++++++++++++-------------- 1 file changed, 104 insertions(+), 88 deletions(-) diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue index 045612b..230e111 100644 --- a/frontend/src/views/user/Cart.vue +++ b/frontend/src/views/user/Cart.vue @@ -28,8 +28,10 @@ class="cart-item" :class="{ 'item-disabled': !item.product?.is_active }" > + +

已下架

+ - -
-
- ¥{{ item.product?.price }} -
-
- -
+ +
+ + + +
+ + +
+
+

{{ item.product?.name }}

+ 删除 +
+
+ + 需要: {{ item.product?.credit_cost }} + + + +{{ item.product?.credit_reward }} + +
+

已下架

+
+ ¥{{ item.product?.price }} +
+
¥{{ item.product?.price }}
@@ -555,7 +583,7 @@ onMounted(() => { } > .el-checkbox { width: 60px; flex-shrink: 0; } - > .item-product { flex: 1; min-width: 200px; } + > .item-product { flex: 1; min-width: 200px; display: flex; gap: 12px; } > .item-price { width: 100px; text-align: center; flex-shrink: 0; } > .item-quantity { width: 140px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } > .item-subtotal { width: 100px; text-align: center; flex-shrink: 0; } @@ -570,6 +598,15 @@ onMounted(() => { align-items: flex-start; } +/* 移动端专用元素 - 桌面端隐藏 */ +.item-image-wrap { + display: none; +} + +.item-content { + display: none; +} + .item-image { width: 70px; height: 70px; @@ -998,13 +1035,13 @@ onMounted(() => { gap: 10px !important; } - /* 商品项 - 京东风格卡片布局 */ + /* 商品项 - 主流电商布局 */ .cart-item { display: flex !important; flex-direction: row !important; padding: 12px !important; gap: 10px !important; - align-items: stretch !important; + align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; background: #2d2d44 !important; @@ -1013,136 +1050,115 @@ onMounted(() => { } /* 隐藏桌面端元素 */ + .cart-item > .item-product, .cart-item > .item-price, .cart-item > .item-quantity, - .cart-item > .item-subtotal { + .cart-item > .item-subtotal, + .cart-item > .item-action { display: none !important; } - /* 复选框 - 左侧垂直居中 */ + /* 复选框 */ .cart-item > .item-check { flex: 0 0 20px !important; width: 20px !important; margin-right: 0 !important; - align-self: center !important; + align-self: flex-start !important; + margin-top: 2px !important; } - /* 商品信息区 - 中间主体 */ - .cart-item > .item-product { - flex: 1 1 0 !important; - min-width: 0 !important; - display: flex !important; - flex-direction: row !important; - flex-wrap: wrap !important; - gap: 8px !important; - align-items: flex-start !important; - cursor: pointer !important; + /* 移动端商品图片 */ + .cart-item > .item-image-wrap { + display: block !important; + flex: 0 0 80px !important; + width: 80px !important; } - /* 删除按钮 - 右上角绝对定位 */ - .cart-item > .item-action { - position: absolute !important; - right: 8px !important; - top: 8px !important; - z-index: 10 !important; - } - - /* 商品图片 */ - .item-product .item-image { + .item-image-wrap .item-image { width: 80px !important; height: 80px !important; - flex-shrink: 0 !important; border-radius: 4px !important; } - /* 商品信息区 - 图片右侧 */ - .item-info { - flex: 1 1 calc(100% - 100px) !important; + /* 移动端商品信息区 */ + .cart-item > .item-content { + display: flex !important; + flex: 1 1 0 !important; min-width: 0 !important; - max-width: calc(100% - 100px) !important; - overflow: hidden !important; - padding-right: 30px !important; + flex-direction: column !important; + gap: 6px !important; } - .item-name { + /* 商品名称行 + 删除按钮 */ + .item-content .item-header { + display: flex !important; + justify-content: space-between !important; + align-items: flex-start !important; + gap: 8px !important; + } + + .item-content .item-name { + flex: 1 !important; font-size: 14px !important; line-height: 1.4 !important; - margin-bottom: 4px !important; + margin: 0 !important; + color: #fff !important; word-break: break-all !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; - color: #fff !important; } - .item-tags { + .item-content .item-delete { + flex-shrink: 0 !important; + font-size: 12px !important; + padding: 0 !important; + } + + /* 标签 */ + .item-content .item-tags { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; - margin-top: 2px !important; } - .item-tags .el-tag { + .item-content .item-tags .el-tag { font-size: 10px !important; padding: 0 4px !important; height: 16px !important; line-height: 14px !important; } - /* 移动端底部 - 价格和数量 */ - .item-mobile-bottom { + /* 价格 + 数量行 */ + .item-content .item-footer { display: flex !important; - align-items: center !important; justify-content: space-between !important; - width: 100% !important; - flex: 0 0 100% !important; - padding-left: 0 !important; - margin-top: 8px !important; + align-items: center !important; + margin-top: auto !important; } - .mobile-price-row { - display: flex !important; - align-items: baseline !important; - } - - .item-mobile-bottom .mobile-price { + .item-content .item-price-mobile { font-size: 16px !important; font-weight: 600 !important; color: #f2270c !important; - white-space: nowrap !important; } - .mobile-quantity-row { - display: flex !important; - align-items: center !important; + .item-content .item-footer :deep(.el-input-number) { + width: 100px !important; } - .item-mobile-bottom :deep(.el-input-number) { - width: 90px !important; + .item-content .item-footer :deep(.el-input-number .el-input__wrapper) { + padding: 0 4px !important; } - .item-mobile-bottom :deep(.el-input-number .el-input__wrapper) { - padding: 0 28px 0 8px !important; - background: rgba(255,255,255,0.08) !important; - border-radius: 4px !important; - } - - .item-mobile-bottom :deep(.el-input-number .el-input__inner) { + .item-content .item-footer :deep(.el-input-number .el-input__inner) { font-size: 13px !important; - text-align: left !important; - } - - /* 删除按钮样式 */ - .item-action .el-button { - font-size: 12px !important; - padding: 2px 4px !important; } /* 地址 */ .checkout-section { padding: 12px !important; - margin-top: 0 !important; border-radius: 8px !important; }