fix: 修复用户端页面移动端响应式布局问题

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

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

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>