From d3f765c6e4cbf3a99c3c8fbf373dc08a0e76cad4 Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Mon, 1 Jun 2026 09:14:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B4=AD=E7=89=A9?=
 =?UTF-8?q?=E8=BD=A6=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=95=86=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=92=8C=E8=AE=A2=E5=8D=95=E6=91=98=E8=A6=81=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 商品项使用稳定的flex布局，宽度约束明确
- 第一行：复选框(24px) + 商品信息 + 删除按钮(40px)
- 第二行：单价 + 数量选择器 + 小计，均匀分布
- 订单摘要宽度设为100%，防止溢出
- 各元素添加min-width防止压缩变形
- 商品图片缩小为50px节省空间

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/user/Cart.vue | 70 +++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue
index 31c8744..5dc0035 100644
--- a/frontend/src/views/user/Cart.vue
+++ b/frontend/src/views/user/Cart.vue
@@ -959,25 +959,34 @@ onMounted(() => {
     display: flex !important;
     flex-direction: column !important;
     gap: 12px !important;
+    width: 100% !important;
   }
 
   /* 订单摘要放底部 */
   .cart-left {
     order: 1 !important;
+    width: 100% !important;
   }
 
   .cart-summary-panel {
     order: 2 !important;
     position: static !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
   }
 
   .cart-header {
     display: none !important;
   }
 
+  .cart-main {
+    width: 100% !important;
+  }
+
   .cart-list {
     max-height: none !important;
     overflow: visible !important;
+    width: 100% !important;
   }
 
   /* 商品项 - 两行布局 */
@@ -985,41 +994,42 @@ onMounted(() => {
     display: flex !important;
     flex-wrap: wrap !important;
     padding: 12px !important;
-    gap: 8px !important;
+    gap: 6px !important;
     align-items: flex-start !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
   }
 
-  /* 隐藏桌面端元素 */
+  /* 隐藏桌面端元素 - 只隐藏价格、数量、小计 */
   .cart-item > .item-price,
   .cart-item > .item-quantity,
   .cart-item > .item-subtotal {
     display: none !important;
   }
 
-  /* 复选框 */
+  /* 第一行：复选框 + 商品信息 + 删除按钮 */
   .cart-item > .item-check {
-    flex: 0 0 20px !important;
-    width: 20px !important;
+    flex: 0 0 24px !important;
+    max-width: 24px !important;
     margin-right: 0 !important;
+    align-self: flex-start !important;
   }
 
-  /* 商品信息 */
   .cart-item > .item-product {
-    flex: 1 1 calc(100% - 80px) !important;
+    flex: 1 1 0 !important;
     min-width: 0 !important;
+    max-width: calc(100% - 70px) !important;
     display: flex !important;
-    gap: 10px !important;
+    gap: 8px !important;
     align-items: flex-start !important;
-    padding-right: 40px !important;
   }
 
-  /* 删除按钮 */
   .cart-item > .item-action {
-    position: absolute !important;
-    right: 12px !important;
-    top: 12px !important;
-    flex: 0 0 auto !important;
-    width: auto !important;
+    flex: 0 0 40px !important;
+    max-width: 40px !important;
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-self: flex-start !important;
   }
 
   /* 移动端底部行 - 显示 */
@@ -1027,25 +1037,29 @@ onMounted(() => {
     display: flex !important;
     flex: 0 0 100% !important;
     width: 100% !important;
+    max-width: 100% !important;
     align-items: center !important;
     justify-content: space-between !important;
-    padding-left: 28px !important;
-    gap: 8px !important;
-    margin-top: 4px !important;
+    padding-left: 24px !important;
+    gap: 6px !important;
+    margin-top: 6px !important;
+    box-sizing: border-box !important;
   }
 
   .item-mobile-bottom .mobile-price {
     font-size: 13px !important;
     color: rgba(255, 255, 255, 0.8) !important;
     white-space: nowrap !important;
+    min-width: 60px !important;
   }
 
   .item-mobile-bottom :deep(.el-input-number) {
-    width: 90px !important;
+    width: 85px !important;
+    flex-shrink: 0 !important;
   }
 
   .item-mobile-bottom :deep(.el-input-number .el-input__wrapper) {
-    padding: 0 2px !important;
+    padding: 0 4px !important;
   }
 
   .item-mobile-bottom :deep(.el-input-number .el-input__inner) {
@@ -1057,12 +1071,14 @@ onMounted(() => {
     font-weight: 600 !important;
     color: #f56c6c !important;
     white-space: nowrap !important;
+    min-width: 70px !important;
+    text-align: right !important;
   }
 
   /* 商品图片 */
   .item-product .item-image {
-    width: 55px !important;
-    height: 55px !important;
+    width: 50px !important;
+    height: 50px !important;
     flex-shrink: 0 !important;
     border-radius: 6px !important;
   }
@@ -1075,8 +1091,8 @@ onMounted(() => {
 
   .item-name {
     font-size: 13px !important;
-    line-height: 1.35 !important;
-    margin-bottom: 2px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 0 !important;
     word-break: break-all !important;
     display: -webkit-box !important;
     -webkit-line-clamp: 2 !important;
@@ -1088,6 +1104,12 @@ onMounted(() => {
     display: none !important;
   }
 
+  /* 删除按钮样式 */
+  .item-action .el-button {
+    font-size: 12px !important;
+    padding: 4px 0 !important;
+  }
+
   /* 地址 */
   .checkout-section {
     padding: 12px !important;