✨ feat: 产品中心页面自适应调整

 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 16:48:54
+ * @LastEditTime: 2024-10-11 15:19:35
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="product-index">
     <hager-box>
-      <div>
+      <div v-if="!is_xs">
         <el-breadcrumb separator="/">
           <el-breadcrumb-item>所有产品</el-breadcrumb-item>
           <el-breadcrumb-item>配电产品</el-breadcrumb-item>
@@ -16,7 +16,7 @@
         </el-breadcrumb>
       </div>
       <hager-h1 title="低压主配电" sub="Automatic conversion switch" style="margin: 2rem 0;"></hager-h1>
-      <el-row :gutter="0" style="margin: 1rem 0;">
+      <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
         <el-col :span="6">
           <div class="product-nav-wrapper">
             <div class="product-nav-title">按产品类别查找</div>
@@ -40,6 +40,15 @@
           <div style="height: 5rem;"></div>
         </el-col>
       </el-row>
+      <div v-else class="product-list">
+        <div class="product-item xs" v-for="(item, index) in 6" :key="index">
+          <div class="product-item-img">
+            <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
+          </div>
+          <p class="product-item-title">acb hw 空气断路器</p>
+        </div>
+      </div>
+      <div style="height: 5rem;"></div>
     </hager-box>
   </div>
 </template>
@@ -115,6 +124,9 @@ export default {
     }
     .product-item {
       width: calc(33.33% - 1rem);
+      &.xs {
+        width: calc(50% - 1rem);
+      }
     }
     .product-item-img {
         background-color: #f5f5f5;