Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b247e994 1 parent 7283fb75

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

Inline Side-by-side
Showing 1 changed file with 20 additions and 41 deletions
1 <!-- 1 <!--
2 * @Date: 2024-10-17 11:13:44 2 * @Date: 2024-10-17 11:13:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-23 10:43:05 4 + * @LastEditTime: 2024-10-24 14:19:29
5 * @FilePath: /hager/src/views/about/honors.vue 5 * @FilePath: /hager/src/views/about/honors.vue
6 * @Description: 关于海格-荣誉展示 6 * @Description: 关于海格-荣誉展示
7 --> 7 -->
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
40 <div class="card-image-box"> 40 <div class="card-image-box">
41 <div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div> 41 <div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div>
42 </div> 42 </div>
43 - <div class="card-content"> 43 + <div ref="contentDiv" class="card-content">
44 <h3>{{ x.post_title }}</h3> 44 <h3>{{ x.post_title }}</h3>
45 <p v-html="x.post_content"></p> 45 <p v-html="x.post_content"></p>
46 </div> 46 </div>
...@@ -95,45 +95,7 @@ export default { ...@@ -95,45 +95,7 @@ export default {
95 active_idx: 0, 95 active_idx: 0,
96 button_list: [], 96 button_list: [],
97 all_honors_list: [], 97 all_honors_list: [],
98 - honors_cate_list: [{ 98 + honors_cate_list: [],
99 - id: '1',
100 - year: '2022',
101 - list: [{
102 - img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
103 - title: '金牌合作单位',
104 - content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
105 - }, {
106 - img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
107 - title: '中国建筑学会建筑电气分会',
108 - content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
109 - }, {
110 - img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
111 - title: '金牌合作单位',
112 - content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
113 - }, {
114 - img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
115 - title: '中国建筑学会建筑电气分会',
116 - content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
117 - }],
118 - activeIndex: 0,
119 - reach_end: false,
120 - slidesPerView: 2,
121 - }, {
122 - id: '2',
123 - year: '2023',
124 - list: [{
125 - img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
126 - title: '金牌合作单位',
127 - content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
128 - }, {
129 - img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
130 - title: '中国建筑学会建筑电气分会',
131 - content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
132 - }],
133 - activeIndex: 0,
134 - reach_end: false,
135 - slidesPerView: 2,
136 - }],
137 swiperOption: { 99 swiperOption: {
138 slidesPerView: 2, 100 slidesPerView: 2,
139 spaceBetween: 20, 101 spaceBetween: 20,
...@@ -190,10 +152,17 @@ export default { ...@@ -190,10 +152,17 @@ export default {
190 item.slidesPerView = swiper.slidesPerView; 152 item.slidesPerView = swiper.slidesPerView;
191 }); 153 });
192 } 154 }
155 + this.checkOverflow();
193 }); 156 });
194 }); 157 });
158 + // 监听窗口的 resize 事件
159 + window.addEventListener('resize', this.checkOverflow);
195 } 160 }
196 }, 161 },
162 + beforeDestroy() {
163 + // 在组件销毁前移除监听器，防止内存泄漏
164 + window.removeEventListener('resize', this.checkOverflow);
165 + },
197 methods: { 166 methods: {
198 onClickBtn (idx) { 167 onClickBtn (idx) {
199 this.active_idx = idx; 168 this.active_idx = idx;
...@@ -225,6 +194,16 @@ export default { ...@@ -225,6 +194,16 @@ export default {
225 item.reach_end = false; 194 item.reach_end = false;
226 } 195 }
227 }, 196 },
197 + checkOverflow () { // 检测内容是否超出,避免overflow IE显示问题
198 + this.$refs.contentDiv.forEach(div => {
199 + // 判断内容是否超出 div 的高度
200 + if (div.scrollHeight > div.clientHeight) {
201 + div.style.overflow = 'scroll';
202 + } else {
203 + div.style.overflow = 'visible';
204 + }
205 + });
206 + }
228 } 207 }
229 } 208 }
230 </script> 209 </script>
......