From 730e12e9b98bb42c0b7465817f9237d7d79f678b Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Mon, 1 Jun 2026 18:01:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8F=82=E8=80=83=E4=BA=AC=E4=B8=9C?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1=E8=B4=AD?=
 =?UTF-8?q?=E7=89=A9=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

- 商品项采用卡片式布局，圆角设计
- 复选框在左侧，商品图片80x80px
- 商品名称和标签在图片右侧
- 价格(红色醒目)和数量选择器在底部
- 删除按钮绝对定位在右上角
- 订单摘要和各区块统一宽度100%
- 整体风格简洁清晰，符合主流电商设计

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

diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue
index 5dc0035..045612b 100644
--- a/frontend/src/views/user/Cart.vue
+++ b/frontend/src/views/user/Cart.vue
@@ -46,14 +46,31 @@
                   <h4 class="item-name">{{ item.product?.name }}</h4>
                   <div class="item-tags">
                     <el-tag v-if="item.product?.require_credit" size="small" type="warning">
-                      需要资格: {{ item.product?.credit_cost }}
+                      需要: {{ item.product?.credit_cost }}
                     </el-tag>
                     <el-tag v-if="item.product?.credit_reward > 0" size="small" type="success">
-                      奖励: +{{ item.product?.credit_reward }}
+                      +{{ item.product?.credit_reward }}
                     </el-tag>
                   </div>
                   <p v-if="!item.product?.is_active" class="item-off">已下架</p>
                 </div>
+
+                <!-- 移动端底部：价格 + 数量 -->
+                <div class="item-mobile-bottom">
+                  <div class="mobile-price-row">
+                    <span class="mobile-price">¥{{ item.product?.price }}</span>
+                  </div>
+                  <div class="mobile-quantity-row">
+                    <el-input-number
+                      v-model="item.quantity"
+                      :min="1"
+                      :max="getMaxQuantity(item.product)"
+                      size="small"
+                      controls-position="right"
+                      @change="(val: number) => updateQuantity(item, val)"
+                    />
+                  </div>
+                </div>
               </div>
 
               <div class="item-price">
@@ -80,19 +97,6 @@
               <div class="item-action">
                 <el-button link type="danger" size="small" @click="removeItem(item.id)">删除</el-button>
               </div>
-
-              <!-- 移动端底部行：单价+数量+小计 -->
-              <div class="item-mobile-bottom">
-                <span class="mobile-price">¥{{ item.product?.price }}</span>
-                <el-input-number
-                  v-model="item.quantity"
-                  :min="1"
-                  :max="getMaxQuantity(item.product)"
-                  size="small"
-                  @change="(val: number) => updateQuantity(item, val)"
-                />
-                <span class="mobile-subtotal">¥{{ ((item.product?.price || 0) * item.quantity).toFixed(2) }}</span>
-              </div>
             </div>
           </div>
         </div>
@@ -562,6 +566,8 @@ onMounted(() => {
   display: flex;
   gap: 12px;
   cursor: pointer;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 
 .item-image {
@@ -987,132 +993,157 @@ onMounted(() => {
     max-height: none !important;
     overflow: visible !important;
     width: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 10px !important;
   }
 
-  /* 商品项 - 两行布局 */
+  /* 商品项 - 京东风格卡片布局 */
   .cart-item {
     display: flex !important;
-    flex-wrap: wrap !important;
+    flex-direction: row !important;
     padding: 12px !important;
-    gap: 6px !important;
-    align-items: flex-start !important;
+    gap: 10px !important;
+    align-items: stretch !important;
     width: 100% !important;
     box-sizing: border-box !important;
+    background: #2d2d44 !important;
+    border-radius: 8px !important;
+    border-bottom: none !important;
   }
 
-  /* 隐藏桌面端元素 - 只隐藏价格、数量、小计 */
+  /* 隐藏桌面端元素 */
   .cart-item > .item-price,
   .cart-item > .item-quantity,
   .cart-item > .item-subtotal {
     display: none !important;
   }
 
-  /* 第一行：复选框 + 商品信息 + 删除按钮 */
+  /* 复选框 - 左侧垂直居中 */
   .cart-item > .item-check {
-    flex: 0 0 24px !important;
-    max-width: 24px !important;
+    flex: 0 0 20px !important;
+    width: 20px !important;
     margin-right: 0 !important;
-    align-self: flex-start !important;
+    align-self: center !important;
   }
 
+  /* 商品信息区 - 中间主体 */
   .cart-item > .item-product {
     flex: 1 1 0 !important;
     min-width: 0 !important;
-    max-width: calc(100% - 70px) !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-action {
-    flex: 0 0 40px !important;
-    max-width: 40px !important;
-    display: flex !important;
-    justify-content: flex-end !important;
-    align-self: flex-start !important;
-  }
-
-  /* 移动端底部行 - 显示 */
-  .item-mobile-bottom {
-    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: 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: 85px !important;
-    flex-shrink: 0 !important;
-  }
-
-  .item-mobile-bottom :deep(.el-input-number .el-input__wrapper) {
-    padding: 0 4px !important;
-  }
-
-  .item-mobile-bottom :deep(.el-input-number .el-input__inner) {
-    font-size: 13px !important;
-  }
-
-  .item-mobile-bottom .mobile-subtotal {
-    font-size: 15px !important;
-    font-weight: 600 !important;
-    color: #f56c6c !important;
-    white-space: nowrap !important;
-    min-width: 70px !important;
-    text-align: right !important;
+    position: absolute !important;
+    right: 8px !important;
+    top: 8px !important;
+    z-index: 10 !important;
   }
 
   /* 商品图片 */
   .item-product .item-image {
-    width: 50px !important;
-    height: 50px !important;
+    width: 80px !important;
+    height: 80px !important;
     flex-shrink: 0 !important;
-    border-radius: 6px !important;
+    border-radius: 4px !important;
   }
 
+  /* 商品信息区 - 图片右侧 */
   .item-info {
-    flex: 1 !important;
+    flex: 1 1 calc(100% - 100px) !important;
     min-width: 0 !important;
+    max-width: calc(100% - 100px) !important;
     overflow: hidden !important;
+    padding-right: 30px !important;
   }
 
   .item-name {
-    font-size: 13px !important;
+    font-size: 14px !important;
     line-height: 1.4 !important;
-    margin-bottom: 0 !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;
+    color: #fff !important;
   }
 
   .item-tags {
-    display: none !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 4px !important;
+    margin-top: 2px !important;
+  }
+
+  .item-tags .el-tag {
+    font-size: 10px !important;
+    padding: 0 4px !important;
+    height: 16px !important;
+    line-height: 14px !important;
+  }
+
+  /* 移动端底部 - 价格和数量 */
+  .item-mobile-bottom {
+    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;
+  }
+
+  .mobile-price-row {
+    display: flex !important;
+    align-items: baseline !important;
+  }
+
+  .item-mobile-bottom .mobile-price {
+    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-mobile-bottom :deep(.el-input-number) {
+    width: 90px !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) {
+    font-size: 13px !important;
+    text-align: left !important;
   }
 
   /* 删除按钮样式 */
   .item-action .el-button {
     font-size: 12px !important;
-    padding: 4px 0 !important;
+    padding: 2px 4px !important;
   }
 
   /* 地址 */
   .checkout-section {
     padding: 12px !important;
+    margin-top: 0 !important;
+    border-radius: 8px !important;
   }
 
   .section-title {
@@ -1158,6 +1189,7 @@ onMounted(() => {
   /* 订单摘要 */
   .cart-summary-panel {
     padding: 12px !important;
+    border-radius: 8px !important;
   }
 
   .summary-title {