From 99a503fd67193b7c0bdfbbb3ef0ba011519a096c Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Sat, 30 May 2026 21:49:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=B4=AD=E7=89=A9?=
 =?UTF-8?q?=E8=BD=A6=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 表头和商品项列宽度统一对齐
- 调整各列宽度：选择60px、商品flex1、价格100px、数量140px、小计100px、操作60px
- 图片添加overflow:hidden防止溢出

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

diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue
index 30684bc..ecd02fb 100644
--- a/frontend/src/views/user/Cart.vue
+++ b/frontend/src/views/user/Cart.vue
@@ -493,22 +493,22 @@ onMounted(() => {
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
-  
-  :deep(.el-checkbox) { 
-    width: 50px; 
+
+  :deep(.el-checkbox) {
+    width: 60px;
     flex-shrink: 0;
     margin-right: 0;
-    
+
     .el-checkbox__label {
       font-size: 13px;
       padding-left: 8px;
     }
   }
-  
-  .header-product { flex: 1; min-width: 200px; padding-left: 12px; }
-  .header-price { width: 80px; text-align: center; flex-shrink: 0; }
-  .header-quantity { width: 120px; text-align: center; flex-shrink: 0; }
-  .header-subtotal { width: 90px; text-align: center; flex-shrink: 0; }
+
+  .header-product { flex: 1; min-width: 200px; }
+  .header-price { width: 100px; text-align: center; flex-shrink: 0; }
+  .header-quantity { width: 140px; text-align: center; flex-shrink: 0; }
+  .header-subtotal { width: 100px; text-align: center; flex-shrink: 0; }
   .header-action { width: 60px; text-align: center; flex-shrink: 0; }
 }
 
@@ -523,24 +523,24 @@ onMounted(() => {
   padding: 16px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   transition: background 0.2s;
-  
+
   &:hover {
     background: rgba(255, 255, 255, 0.02);
   }
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   &.item-disabled {
     opacity: 0.5;
   }
-  
-  > .el-checkbox { width: 50px; flex-shrink: 0; }
-  > .item-product { flex: 1; min-width: 200px; padding-left: 12px; }
-  > .item-price { width: 80px; text-align: center; flex-shrink: 0; }
-  > .item-quantity { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
-  > .item-subtotal { width: 90px; text-align: center; flex-shrink: 0; }
+
+  > .el-checkbox { width: 60px; flex-shrink: 0; }
+  > .item-product { flex: 1; min-width: 200px; }
+  > .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; }
   > .item-action { width: 60px; display: flex; justify-content: center; flex-shrink: 0; }
 }
 
@@ -548,7 +548,6 @@ onMounted(() => {
   display: flex;
   gap: 12px;
   cursor: pointer;
-  padding-left: 12px;
 }
 
 .item-image {
@@ -557,6 +556,7 @@ onMounted(() => {
   border-radius: 8px;
   flex-shrink: 0;
   background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
 }
 
 .image-placeholder {
@@ -600,9 +600,9 @@ onMounted(() => {
 
 .item-price {
   text-align: center;
-  width: 80px;
+  width: 100px;
   flex-shrink: 0;
-  
+
   .price-current {
     font-size: 15px;
     font-weight: 600;
@@ -611,9 +611,9 @@ onMounted(() => {
 }
 
 .item-quantity {
-  width: 120px;
+  width: 140px;
   flex-shrink: 0;
-  
+
   .stock-tip {
     font-size: 11px;
     color: #f59e0b;
@@ -622,9 +622,9 @@ onMounted(() => {
 
 .item-subtotal {
   text-align: center;
-  width: 90px;
+  width: 100px;
   flex-shrink: 0;
-  
+
   .subtotal-price {
     font-size: 16px;
     font-weight: 600;