首页的产品中心图片展示是正方形

 <!--
 <!--
  * @Date: 2024-08-27 10:06:30
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 12:51:53
+ * @LastEditTime: 2024-10-24 15:39:51
  * @FilePath: /hager/src/views/index.vue
  * @FilePath: /hager/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -102,8 +102,8 @@
         <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
         <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
           <swiper-slide v-for="(item, index) in product_list" :key="index">
           <swiper-slide v-for="(item, index) in product_list" :key="index">
             <div @click="goToProduct(item)" class="product-item xs">
             <div @click="goToProduct(item)" class="product-item xs">
-              <div class="img" :style="{ height: '8rem', backgroundImage: 'url('+item.cover+')' }"></div>
-              <p style="margin: 0.5rem;">{{ item.category_name }}</p>
+              <div class="img" :style="{ height: product_box_height, backgroundImage: 'url('+item.cover+')' }"></div>
+              <p class="product-title" style="margin: 0.5rem;">{{ item.category_name }}</p>
             </div>
             </div>
           </swiper-slide>
           </swiper-slide>
         </swiper>
         </swiper>
@@ -118,7 +118,7 @@
               <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
               <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
             </div>
             </div>
           </div>
           </div>
-        </div>{{ product_list.length > productSlidesPerView }}/{{ is_xs }}/{{ !isEnd }}
+        </div>
       </div>
       </div>
     </hager-box>
     </hager-box>
     <hager-box v-if="!is_xs" class="box-2n">
     <hager-box v-if="!is_xs" class="box-2n">
@@ -249,6 +249,7 @@ export default {
       reach_product_end: false,
       reach_product_end: false,
       productSlidesPerView: 5,
       productSlidesPerView: 5,
       isEnd: false,
       isEnd: false,
+      product_box_height: '10rem'
     }
     }
   },
   },
   async mounted () {
   async mounted () {
@@ -266,6 +267,14 @@ export default {
         this.productSlidesPerView = swiper.slidesPerView;
         this.productSlidesPerView = swiper.slidesPerView;
       });
       });
     });
     });
+    // 高度监听
+    this.$nextTick(() => {
+      this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px';
+    })
+  },
+  beforeDestroy() {
+    // 在组件销毁前移除监听器，防止内存泄漏
+    window.removeEventListener('resize', this.handleHeightResize);
   },
   },
   watch: {
   watch: {
     // 监听$route对象的变化
     // 监听$route对象的变化
@@ -274,6 +283,10 @@ export default {
     }
     }
   },
   },
   methods: {
   methods: {
+    handleHeightResize () {
+      // 高度监听
+      this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px';
+    },
     getToGroup () {
     getToGroup () {
       this.$router.push({
       this.$router.push({
         path: '/about/global'
         path: '/about/global'