From f3137097ff6ad8c2b8b14d4bf77ebd21453f628f Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Thu, 29 May 2025 16:58:38 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShoppingCartDrawer.vue | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/ShoppingCartDrawer.vue b/src/components/ShoppingCartDrawer.vue
index c234b64..30c5a56 100644
--- a/src/components/ShoppingCartDrawer.vue
+++ b/src/components/ShoppingCartDrawer.vue
@@ -7,7 +7,7 @@
   >
     <div class="cart-content h-full flex flex-col">
       <!-- 购物车列表 -->
-      <div class="cart-items flex-1 overflow-y-auto">
+      <div class="cart-items flex-1 overflow-y-auto p-4">
         <div v-if="items.length === 0" class="empty-cart text-center py-8">
           <div class="text-6xl mb-4">🛒</div>
           <p class="text-gray-500">购物车是空的</p>
@@ -20,7 +20,7 @@
           <div
               v-for="(item, index) in items"
               :key="`${item.productId}-${item.color}-${item.size}`"
-              class="cart-item p-4 border border-gray-200 rounded-lg"
+              class="cart-item p-4 border border-gray-200 rounded-lg shadow-sm transition duration-300 ease-in-out hover:shadow-md"
           >
             <div class="flex space-x-3">
               <!-- 商品图片 -->
@@ -74,9 +74,9 @@
       </div>
 
       <!-- 底部结算 -->
-      <div v-if="items.length > 0" class="cart-footer border-t pt-4 mt-4">
+      <div v-if="items.length > 0" class="cart-footer border-t pt-4 mt-4 p-4">
         <!-- 优惠信息 -->
-        <div class="discount-info mb-4 p-3 bg-yellow-50 rounded-lg">
+        <div class="discount-info mb-4 p-3 bg-yellow-50 rounded-lg shadow-sm">
           <div class="flex items-center justify-between text-sm">
             <span>满减优惠</span>
             <span class="text-orange-600">-¥{{ discountAmount }}</span>
@@ -90,7 +90,7 @@
         <div class="total-section mb-4">
           <div class="flex justify-between items-center mb-2">
             <span>商品总计：</span>
-            <span>¥{{ subtotal }}</span>
+            <span class="text-red-600">¥{{ subtotal }}</span>
           </div>
           <div class="flex justify-between items-center mb-2">
             <span>运费：</span>
@@ -110,7 +110,7 @@
         <el-button
             type="primary"
             size="large"
-            class="w-full"
+            class="w-full py-3 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
             @click="handleCheckout"
         >
           去结算 ({{ totalQuantity }})
@@ -119,7 +119,7 @@
         <!-- 继续购物 -->
         <el-button
             size="large"
-            class="w-full mt-2"
+            class="w-full py-3 mt-2 rounded-lg border border-gray-300 hover:border-red-300 hover:text-red-600 transition duration-300 ease-in-out"
             @click="drawerVisible = false"
         >
           继续购物
@@ -199,4 +199,15 @@ const handleCheckout = () => {
 .empty-cart {
   @apply text-gray-400;
 }
-</style>
+
+.el-button--primary {
+  background-color: #dc3545;
+  border-color: #dc3545;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #c82333;
+  border-color: #bd2130;
+}
+</style>
\ No newline at end of file