From 52048fc2a68b1633862067248ea0b7225ae11a70 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sat, 1 Nov 2025 16:26:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A7=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E7=AB=96=E5=B1=8F=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/products/ProductDetail.vue          |  7 +++++
 .../pages/products/ProductHeader.vue          | 28 +++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/components/pages/products/ProductDetail.vue b/app/components/pages/products/ProductDetail.vue
index 84ba87f..3ece770 100644
--- a/app/components/pages/products/ProductDetail.vue
+++ b/app/components/pages/products/ProductDetail.vue
@@ -42,4 +42,11 @@
     color: var(--el-text-color-primary);
     margin: 0;
   }
+
+  @media (max-width: 768px) {
+    .product-tabs ::v-deep(.el-tabs__nav) {
+      float: none;
+      min-width: 100%;
+    }
+  }
 </style>
diff --git a/app/components/pages/products/ProductHeader.vue b/app/components/pages/products/ProductHeader.vue
index 9c256fa..dc9ba61 100644
--- a/app/components/pages/products/ProductHeader.vue
+++ b/app/components/pages/products/ProductHeader.vue
@@ -10,7 +10,7 @@
       <el-carousel
         v-else
         class="product-carousel"
-        height="500px"
+        height="auto"
         :autoplay="false"
         :loop="false"
         arrow="always"
@@ -18,8 +18,9 @@
         <el-carousel-item
           v-for="(item, index) in product.images || []"
           :key="index"
+          class="product-carousel-item"
         >
-          <div class="product-carousel-item">
+          <div>
             <el-image
               :src="getImageUrl(item.image || '')"
               :alt="product.name"
@@ -59,6 +60,10 @@
     gap: 3rem;
   }
 
+  .product-carousel-item {
+    height: 500px;
+  }
+
   .product-image .el-image {
     position: relative;
     width: 100%;
@@ -99,4 +104,23 @@
     line-height: 1.6;
     margin-bottom: 2rem;
   }
+
+  @media (max-width: 768px) {
+    .product-header {
+      grid-template-columns: 1fr;
+    }
+
+    .product-carousel-item {
+      height: 300px;
+    }
+
+    .product-image .el-image {
+      height: 300px;
+    }
+
+    .product-info h1 {
+      font-size: 1.5rem;
+      margin-top: 0;
+    }
+  }
 </style>