From 1d8c2d92ba22e3436e80714eb6ded5cc744e779b Mon Sep 17 00:00:00 2001
From: admin <admin@viaeon.com>
Date: Sat, 30 May 2026 17:07:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AB=AF=E9=A1=B5=E9=9D=A2=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ProductDetail.vue: 添加移动端布局适配
- OrderDetail.vue: 添加移动端布局适配
- Orders.vue: 添加移动端布局适配

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/user/OrderDetail.vue   | 32 +++++++++++++-
 frontend/src/views/user/Orders.vue        | 24 +++++++++++
 frontend/src/views/user/ProductDetail.vue | 52 +++++++++++++++++++++++
 3 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/user/OrderDetail.vue b/frontend/src/views/user/OrderDetail.vue
index e410e4d..f67c211 100644
--- a/frontend/src/views/user/OrderDetail.vue
+++ b/frontend/src/views/user/OrderDetail.vue
@@ -183,10 +183,40 @@ async function applyRefund() {
   padding: 16px;
   background: rgba(245, 158, 11, 0.1);
   border-radius: 8px;
-  
+
   p {
     color: rgba(255, 255, 255, 0.7);
     margin: 8px 0 0;
   }
 }
+
+@media (max-width: 768px) {
+  .detail-card {
+    padding: 16px;
+  }
+
+  .status-section {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .section-title {
+    font-size: 15px;
+  }
+
+  :deep(.el-descriptions) {
+    .el-descriptions__label {
+      width: 80px !important;
+    }
+  }
+
+  :deep(.el-table) {
+    font-size: 13px;
+
+    .el-table__cell {
+      padding: 8px 4px;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/views/user/Orders.vue b/frontend/src/views/user/Orders.vue
index c9c2a1b..277841e 100644
--- a/frontend/src/views/user/Orders.vue
+++ b/frontend/src/views/user/Orders.vue
@@ -97,4 +97,28 @@ onMounted(fetchOrders)
 <style scoped lang="scss">
 .orders-page { padding: 0; }
 .table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }
+
+@media (max-width: 768px) {
+  .table-card {
+    padding: 12px;
+    border-radius: 8px;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+
+    .el-table__cell {
+      padding: 8px 4px;
+    }
+
+    .el-table__header th {
+      padding: 8px 4px;
+    }
+  }
+
+  :deep(.el-button) {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
+}
 </style>
diff --git a/frontend/src/views/user/ProductDetail.vue b/frontend/src/views/user/ProductDetail.vue
index b724d6e..f7c8393 100644
--- a/frontend/src/views/user/ProductDetail.vue
+++ b/frontend/src/views/user/ProductDetail.vue
@@ -125,4 +125,56 @@ h1 { font-size: 28px; color: #fff; margin-bottom: 16px; }
 .meta { display: flex; gap: 8px; margin-bottom: 16px; }
 .custom-fields { margin-bottom: 24px; h4 { color: #fff; margin-bottom: 8px; } .field-item { color: rgba(255, 255, 255, 0.7); margin-bottom: 4px; .field-name { color: rgba(255, 255, 255, 0.5); margin-right: 8px; } } }
 .purchase-section { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
+
+@media (max-width: 768px) {
+  .detail-card {
+    padding: 16px;
+  }
+
+  .el-row {
+    flex-direction: column;
+  }
+
+  .el-col {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+
+  .product-images {
+    height: 300px;
+  }
+
+  .carousel-image, .single-image {
+    height: 300px;
+  }
+
+  .image-placeholder {
+    height: 300px;
+  }
+
+  h1 {
+    font-size: 22px;
+    margin-top: 16px;
+  }
+
+  .price {
+    font-size: 26px;
+  }
+
+  .description {
+    font-size: 14px;
+  }
+
+  .purchase-section {
+    flex-wrap: wrap;
+
+    :deep(.el-input-number) {
+      width: 100%;
+    }
+
+    :deep(.el-button) {
+      flex: 1;
+    }
+  }
+}
 </style>