海格荣誉内容显示滚动条判断优化

 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 10:43:05
+ * @LastEditTime: 2024-10-24 14:19:29
  * @FilePath: /hager/src/views/about/honors.vue
  * @Description: 关于海格-荣誉展示
 -->
@@ -40,7 +40,7 @@
           <div class="card-image-box">
             <div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div>
           </div>
-          <div class="card-content">
+          <div ref="contentDiv" class="card-content">
             <h3>{{ x.post_title }}</h3>
             <p v-html="x.post_content"></p>
           </div>
@@ -95,45 +95,7 @@ export default {
       active_idx: 0,
       button_list: [],
       all_honors_list: [],
-      honors_cate_list: [{
-        id: '1',
-        year: '2022',
-        list: [{
-          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
-          title: '金牌合作单位',
-          content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
-        }, {
-          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
-          title: '中国建筑学会建筑电气分会',
-          content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
-        }, {
-          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
-          title: '金牌合作单位',
-          content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
-        }, {
-          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
-          title: '中国建筑学会建筑电气分会',
-          content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
-        }],
-        activeIndex: 0,
-        reach_end: false,
-        slidesPerView: 2,
-      }, {
-        id: '2',
-        year: '2023',
-        list: [{
-          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
-          title: '金牌合作单位',
-          content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
-        }, {
-          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
-          title: '中国建筑学会建筑电气分会',
-          content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
-        }],
-        activeIndex: 0,
-        reach_end: false,
-        slidesPerView: 2,
-      }],
+      honors_cate_list: [],
       swiperOption: {
         slidesPerView: 2,
         spaceBetween: 20,
@@ -190,10 +152,17 @@ export default {
               item.slidesPerView = swiper.slidesPerView;
             });
           }
+          this.checkOverflow();
         });
       });
+      // 监听窗口的 resize 事件
+      window.addEventListener('resize', this.checkOverflow);
     }
   },
+  beforeDestroy() {
+    // 在组件销毁前移除监听器，防止内存泄漏
+    window.removeEventListener('resize', this.checkOverflow);
+  },
   methods: {
     onClickBtn (idx) {
       this.active_idx = idx;
@@ -225,6 +194,16 @@ export default {
         item.reach_end = false;
       }
     },
+    checkOverflow () { // 检测内容是否超出,避免overflow IE显示问题
+      this.$refs.contentDiv.forEach(div => {
+        // 判断内容是否超出 div 的高度
+        if (div.scrollHeight > div.clientHeight) {
+          div.style.overflow = 'scroll';
+        } else {
+          div.style.overflow = 'visible';
+        }
+      });
+    }
   }
 }
 </script>