From b283016b69a3920a797f752e4acfe0886c368fc1 Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Sun, 31 May 2026 00:39:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BC=BA=E5=88=B6=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用!important确保样式优先级
- flex-direction: column让元素垂直排列
- 商品信息、数量、小计各占一行
- 复选框左上角、删除按钮右上角
- 隐藏商品标签简化显示

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

diff --git a/frontend/src/views/user/Cart.vue b/frontend/src/views/user/Cart.vue
index 5b3ce69..b39a6b6 100644
--- a/frontend/src/views/user/Cart.vue
+++ b/frontend/src/views/user/Cart.vue
@@ -933,130 +933,176 @@ onMounted(() => {
 @media (max-width: 768px) {
   .cart-page {
     padding-bottom: 20px;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 8px;
+    padding-right: 8px;
   }
 
   .cart-header {
-    display: none;
+    display: none !important;
   }
 
-  /* 商品项整体容器 */
+  .cart-list {
+    max-height: none;
+    overflow-y: visible;
+  }
+
+  /* 商品项容器 */
   .cart-item {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    padding: 12px;
-    padding-left: 44px;
+    display: flex !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    padding: 10px !important;
     position: relative;
-    gap: 0;
+    gap: 8px;
   }
 
-  /* 复选框 - 左侧固定 */
+  /* 复选框 - 左上角 */
   .cart-item > .el-checkbox {
     position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translateY(-50%);
-    width: 24px;
+    top: 10px;
+    left: 10px;
+    width: 24px !important;
   }
 
-  /* 删除按钮 - 右上角固定 */
+  /* 删除按钮 - 右上角 */
   .cart-item > .item-action {
     position: absolute;
-    top: 12px;
-    right: 12px;
-    width: auto;
+    top: 10px;
+    right: 10px;
+    width: auto !important;
+    display: block !important;
   }
 
-  /* 商品图片+信息 - 占满一行 */
+  /* 商品信息行 */
   .cart-item > .item-product {
-    width: 100%;
-    display: flex;
-    gap: 10px;
-    padding-right: 50px;
-    margin-bottom: 12px;
+    display: flex !important;
+    flex-direction: row !important;
+    width: 100% !important;
+    padding-left: 28px !important;
+    padding-right: 40px !important;
+    margin-bottom: 8px !important;
     cursor: pointer;
   }
 
   /* 隐藏单价 */
   .cart-item > .item-price {
-    display: none;
+    display: none !important;
   }
 
-  /* 数量行 - 占满一行 */
+  /* 数量行 */
   .cart-item > .item-quantity {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
+    width: 100% !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    padding-left: 28px !important;
+    margin-bottom: 4px !important;
   }
 
-  /* 小计行 - 占满一行 */
+  /* 小计行 */
   .cart-item > .item-subtotal {
-    width: 100%;
-    text-align: left;
+    width: 100% !important;
+    text-align: left !important;
+    padding-left: 28px !important;
   }
 
-  /* 商品图片 */
   .item-product .item-image {
-    width: 50px;
-    height: 50px;
-    flex-shrink: 0;
+    width: 50px !important;
+    height: 50px !important;
   }
 
-  /* 商品信息 */
   .item-info {
     flex: 1;
     min-width: 0;
+    gap: 4px !important;
+  }
+
+  .item-name {
+    font-size: 13px !important;
+    -webkit-line-clamp: 1 !important;
+  }
+
+  .item-tags {
+    display: none;
   }
 
-  /* 数量输入框 */
   .item-quantity :deep(.el-input-number) {
-    width: 100px;
+    width: 90px;
+  }
+
+  .item-quantity .stock-tip {
+    font-size: 11px;
   }
 
-  /* 小计金额样式 */
   .item-subtotal .subtotal-price {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
     color: #f56c6c;
   }
 
-  /* 支付方式2列 */
+  /* 支付方式 */
   .payment-methods {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr) !important;
   }
 
   .cart-left {
-    gap: 12px;
+    gap: 10px !important;
   }
 
   .checkout-section {
-    padding: 12px;
+    padding: 10px !important;
+  }
+
+  .section-title {
+    font-size: 14px !important;
+    margin-bottom: 10px !important;
   }
 
   .cart-summary-panel {
-    padding: 12px;
+    padding: 10px !important;
   }
 
   .summary-title {
-    font-size: 16px;
-    margin-bottom: 12px;
-    padding-bottom: 10px;
+    font-size: 15px;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+  }
+
+  .summary-row {
+    font-size: 13px !important;
   }
 
   .summary-total .total-amount {
-    font-size: 20px;
+    font-size: 18px !important;
+  }
+
+  .checkout-btn {
+    height: 40px !important;
+    font-size: 14px !important;
   }
 
   .address-item {
-    padding: 12px;
+    padding: 10px !important;
+  }
+
+  .address-name {
+    font-size: 14px !important;
+  }
+
+  .address-detail {
+    font-size: 12px !important;
   }
 
   .payment-item {
-    padding: 12px 8px;
+    padding: 10px 6px !important;
+  }
+
+  .payment-icon {
+    font-size: 22px !important;
+  }
+
+  .payment-name {
+    font-size: 12px !important;
   }
 }
 </style>