fix: 修复购物车移动端布局问题

- 订单摘要放底部，商品列表在上
- 使用flexbox+order重新排列商品项元素
- 第一行：复选框+商品信息+删除按钮
- 第二行：单价+数量选择器+小计
- 移除不可靠的内联display:none元素

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/user/Cart.vue

@@ -52,11 +52,6 @@
                       奖励: +{{ item.product?.credit_reward }}
                     </el-tag>
                   </div>
-                  <!-- 移动端单价显示 -->
-                  <div class="mobile-price" style="display: none;">
-                    <span class="price-label">单价</span>
-                    <span class="price-value">¥{{ item.product?.price }}</span>
-                  </div>
                   <p v-if="!item.product?.is_active" class="item-off">已下架</p>
                 </div>
               </div>
@@ -76,11 +71,6 @@
                 <span v-if="item.product?.stock !== undefined && item.product?.stock <= 10" class="stock-tip">
                   仅剩 {{ item.product?.stock }} 件
                 </span>
-                <!-- 移动端小计显示 -->
-                <div class="mobile-subtotal" style="display: none;">
-                  <span class="subtotal-label">小计</span>
-                  <span class="subtotal-value">¥{{ ((item.product?.price || 0) * item.quantity).toFixed(2) }}</span>
-                </div>
               </div>
               
               <div class="item-subtotal">
@@ -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;
+    display: flex !important;
-    grid-template-columns: 24px 1fr auto !important;
+    flex-wrap: wrap !important;
-    grid-template-rows: auto auto !important;
-    grid-template-areas:
-      "check product delete"
-      "check bottom bottom" !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 {
+  .cart-item > .el-checkbox {
-    display: none !important;
+    order: 1 !important;
-  }
+    flex: 0 0 auto !important;
-
-  /* 删除按钮 */
-  .cart-item > .item-action {
-    grid-area: delete !important;
     width: auto !important;
-    position: static !important;
+    margin-right: 0 !important;
   }
 
-  /* 数量行 - 包含单价、数量、小计 */
+  .cart-item > .item-product {
-  .cart-item > .item-quantity {
+    order: 2 !important;
-    grid-area: bottom !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;
+    margin-left: 32px !important;
-    width: 100% !important;
+    width: auto !important;
-    padding: 0 !important;
+  }
-    gap: 8px !important;
+
-    flex-wrap: wrap !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 {
+  .item-price .price-current {
-    display: inline-flex !important;
+    font-size: 14px !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-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;
+    display: none !important;
-    width: 100% !important;
-    text-align: center !important;
-    margin-top: 2px !important;
   }
 
-  /* 移动端小计显示 */
+  /* 小计 */
-  .mobile-subtotal {
+  .item-subtotal .subtotal-price {
-    display: flex !important;
+    font-size: 15px !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;
   }
 
   /* 地址 */