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>

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>