fix: 修复购物车移动端布局排序和商品图片显示问题

- 移除订单摘要的order: -1，保持正常顺序
- 移动端商品图片改为横向布局，图片大小80x80px
- 支付方式改为2列显示

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

frontend/src/views/user/Cart.vue

@@ -923,24 +923,27 @@ onMounted(() => {
   .cart-container {
     grid-template-columns: 1fr;
   }
-  
+
   .cart-summary-panel {
     position: static;
-    order: -1;
     margin-bottom: 20px;
   }
 }
 
 @media (max-width: 768px) {
+  .cart-page {
+    padding-bottom: 20px;
+  }
+
   .cart-header {
     display: none;
   }
-  
+
   .cart-item {
     flex-wrap: wrap;
     gap: 12px;
     padding: 14px;
-    
+
     > .el-checkbox { width: 24px; order: 1; }
     > .item-product { flex: 1; min-width: 0; order: 2; }
     > .item-price { width: auto; order: 4; margin-left: 36px; }
@@ -948,27 +951,46 @@ onMounted(() => {
     > .item-subtotal { width: auto; order: 3; margin-left: auto; }
     > .item-action { width: auto; order: 6; }
   }
-  
+
   .item-product {
-    flex-direction: column;
-    gap: 8px;
-    
+    gap: 12px;
+
     .item-image {
-      width: 100%;
-      height: 120px;
+      width: 80px;
+      height: 80px;
+      flex-shrink: 0;
     }
   }
-  
-  .payment-methods {
-    grid-template-columns: 1fr;
+
+  .item-info {
+    flex: 1;
+    min-width: 0;
   }
-  
+
+  .payment-methods {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   .cart-left {
     gap: 16px;
   }
-  
+
   .checkout-section {
     padding: 16px;
   }
+
+  .cart-summary-panel {
+    padding: 16px;
+  }
+
+  .summary-title {
+    font-size: 16px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+  }
+
+  .summary-total .total-amount {
+    font-size: 20px;
+  }
 }
 </style>