hookehuyr

fix

1 <!-- 1 <!--
2 * @Date: 2024-09-29 15:49:27 2 * @Date: 2024-09-29 15:49:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-12-04 16:18:28 4 + * @LastEditTime: 2024-12-04 16:24:25
5 * @FilePath: /hager/src/views/solution/detail.vue 5 * @FilePath: /hager/src/views/solution/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
79 <div class="card"> 79 <div class="card">
80 <img :src="item.cover" alt="图片" class="card-image"> 80 <img :src="item.cover" alt="图片" class="card-image">
81 <div class="card-content"> 81 <div class="card-content">
82 - <h3>{{ item.post_title }}</h3> 82 + <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3>
83 <p class="clamp-text" v-html="item.post_description "></p> 83 <p class="clamp-text" v-html="item.post_description "></p>
84 <i class="el-icon-right"></i> 84 <i class="el-icon-right"></i>
85 </div> 85 </div>
...@@ -135,6 +135,24 @@ import hagerService from '@/components/common/hagerService.vue'; ...@@ -135,6 +135,24 @@ import hagerService from '@/components/common/hagerService.vue';
135 import $ from 'jquery'; 135 import $ from 'jquery';
136 import { getSolutionCaseAPI } from "@/api/hager.js"; 136 import { getSolutionCaseAPI } from "@/api/hager.js";
137 137
138 +function clampText(element, lines) {
139 + var $element = $(element);
140 + var lineHeight = parseFloat($element.css('line-height')); // 获取行高
141 + var maxHeight = lineHeight * lines; // 计算三行的最大高度
142 +
143 + // 如果内容高度超过三行,进行截断
144 + if ($element.height() > maxHeight) {
145 + var originalText = $element.text(); // 获取原始文本
146 + var truncatedText = originalText;
147 +
148 + // 逐字截断文本,直到高度小于或等于三行
149 + while ($element.height() > maxHeight) {
150 + truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
151 + $element.text(truncatedText + '...'); // 添加省略号
152 + }
153 + }
154 +}
155 +
138 export default { 156 export default {
139 metaInfo: { 157 metaInfo: {
140 // title: '海格电气官方网站', 158 // title: '海格电气官方网站',
...@@ -209,24 +227,6 @@ export default { ...@@ -209,24 +227,6 @@ export default {
209 this.productSlidesPerView = swiper.slidesPerView 227 this.productSlidesPerView = swiper.slidesPerView
210 }); 228 });
211 229
212 - function clampText(element, lines) {
213 - var $element = $(element);
214 - var lineHeight = parseFloat($element.css('line-height')); // 获取行高
215 - var maxHeight = lineHeight * lines; // 计算三行的最大高度
216 -
217 - // 如果内容高度超过三行,进行截断
218 - if ($element.height() > maxHeight) {
219 - var originalText = $element.text(); // 获取原始文本
220 - var truncatedText = originalText;
221 -
222 - // 逐字截断文本,直到高度小于或等于三行
223 - while ($element.height() > maxHeight) {
224 - truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
225 - $element.text(truncatedText + '...'); // 添加省略号
226 - }
227 - }
228 - }
229 -
230 clampText('.clamp-text', 3); // 限制显示三行文本 230 clampText('.clamp-text', 3); // 限制显示三行文本
231 }); 231 });
232 }, 232 },
...@@ -290,6 +290,11 @@ export default { ...@@ -290,6 +290,11 @@ export default {
290 this.activeProductIndex = 0 290 this.activeProductIndex = 0
291 this.reach_product_end = false 291 this.reach_product_end = false
292 this.reach_success_end = false 292 this.reach_success_end = false
293 +
294 + this.$nextTick(() => {
295 + clampText('.clamp-text', 3); // 限制显示三行文本
296 +
297 + })
293 } 298 }
294 } 299 }
295 } 300 }
...@@ -390,7 +395,6 @@ export default { ...@@ -390,7 +395,6 @@ export default {
390 } 395 }
391 .card-content { 396 .card-content {
392 padding: 1rem 1.5rem; 397 padding: 1rem 1.5rem;
393 - margin-bottom: 2rem;
394 h3 { 398 h3 {
395 color: @secondary-color; 399 color: @secondary-color;
396 font-size: 1.25rem; 400 font-size: 1.25rem;
......