hookehuyr

fix

<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-04 16:18:28
* @LastEditTime: 2024-12-04 16:24:25
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -79,7 +79,7 @@
<div class="card">
<img :src="item.cover" alt="图片" class="card-image">
<div class="card-content">
<h3>{{ item.post_title }}</h3>
<h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3>
<p class="clamp-text" v-html="item.post_description "></p>
<i class="el-icon-right"></i>
</div>
......@@ -135,6 +135,24 @@ import hagerService from '@/components/common/hagerService.vue';
import $ from 'jquery';
import { getSolutionCaseAPI } from "@/api/hager.js";
function clampText(element, lines) {
var $element = $(element);
var lineHeight = parseFloat($element.css('line-height')); // 获取行高
var maxHeight = lineHeight * lines; // 计算三行的最大高度
// 如果内容高度超过三行,进行截断
if ($element.height() > maxHeight) {
var originalText = $element.text(); // 获取原始文本
var truncatedText = originalText;
// 逐字截断文本,直到高度小于或等于三行
while ($element.height() > maxHeight) {
truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
$element.text(truncatedText + '...'); // 添加省略号
}
}
}
export default {
metaInfo: {
// title: '海格电气官方网站',
......@@ -209,24 +227,6 @@ export default {
this.productSlidesPerView = swiper.slidesPerView
});
function clampText(element, lines) {
var $element = $(element);
var lineHeight = parseFloat($element.css('line-height')); // 获取行高
var maxHeight = lineHeight * lines; // 计算三行的最大高度
// 如果内容高度超过三行,进行截断
if ($element.height() > maxHeight) {
var originalText = $element.text(); // 获取原始文本
var truncatedText = originalText;
// 逐字截断文本,直到高度小于或等于三行
while ($element.height() > maxHeight) {
truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
$element.text(truncatedText + '...'); // 添加省略号
}
}
}
clampText('.clamp-text', 3); // 限制显示三行文本
});
},
......@@ -290,6 +290,11 @@ export default {
this.activeProductIndex = 0
this.reach_product_end = false
this.reach_success_end = false
this.$nextTick(() => {
clampText('.clamp-text', 3); // 限制显示三行文本
})
}
}
}
......@@ -390,7 +395,6 @@ export default {
}
.card-content {
padding: 1rem 1.5rem;
margin-bottom: 2rem;
h3 {
color: @secondary-color;
font-size: 1.25rem;
......