From 74ff8affe5c0b1ef6510fd93dfb0425c22f9f648 Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Thu, 18 Sep 2025 09:19:15 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/case-container.vue | 58 +++++++++++++++---- .../productCenter/product-case-list.vue | 28 +++++++-- .../productCenter/product-detail.vue | 32 +++++++--- 3 files changed, 95 insertions(+), 23 deletions(-) diff --git a/src/views/publicService/productCenter/components/case-container.vue b/src/views/publicService/productCenter/components/case-container.vue index 8d86208..623a4c4 100644 --- a/src/views/publicService/productCenter/components/case-container.vue +++ b/src/views/publicService/productCenter/components/case-container.vue @@ -41,7 +41,7 @@

{{ item.caseCompany }}

-
+
+ +
+ {{ item.caseIntroduction }} +
@@ -106,19 +114,19 @@ export default { transitionDuration: '0.5s', // 过渡动画时长 timer: null, // 自动轮播计时器 interval: 5000, // 轮播间隔时间(ms) + extendedCardList: [], } }, computed: { // 扩展列表：在开头添加最后一个元素的副本，在末尾添加第一个元素的副本，实现无缝滚动 - extendedCardList() { - if (this.cardList.length <= 1) return this.cardList - - return [ - this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头 - ...this.cardList, // 原始列表 - this.cardList[0], // 第一个元素的副本放在末尾 - ] - }, + // extendedCardList() { + // if (this.cardList.length <= 1) return this.cardList + // return [ + // this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头 + // ...this.cardList, // 原始列表 + // this.cardList[0], // 第一个元素的副本放在末尾 + // ] + // }, }, mounted() { // 只有在有多项数据时才启动自动轮播 @@ -219,6 +227,34 @@ export default { }) }, }, + + watch: { + cardList: { + handler(newValue) { + if (newValue <= 1) { + this.extendedCardList = newValue + } else { + this.extendedCardList = [ + this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头 + ...this.cardList, // 原始列表 + this.cardList[0], // 第一个元素的副本放在末尾 + ] + } + + this.$nextTick(() => { + this.extendedCardList.forEach((item, index) => { + item.isTextOverflow = + this.$refs[`caseInfoContent-${index}`][0] + .clientHeight < + this.$refs[`caseInfoContent-${index}`][0] + .scrollHeight + }) + }) + }, + deep: true, + immediate: true, + }, + }, } @@ -264,7 +300,7 @@ export default { // 轮播容器样式 - 确保不会显示溢出内容 .carousel-wrapper { width: 100%; - // overflow: hidden; + overflow: hidden; position: relative; // padding: 0 10px; // 添加额外的裁剪区域，确保不会显示相邻项的边缘 diff --git a/src/views/publicService/productCenter/product-case-list.vue b/src/views/publicService/productCenter/product-case-list.vue index 9f83592..74936e8 100644 --- a/src/views/publicService/productCenter/product-case-list.vue +++ b/src/views/publicService/productCenter/product-case-list.vue @@ -30,11 +30,8 @@

{{ item.caseCompany }}

- - - -
+
{{ item.caseIntroduction }} @@ -44,6 +41,13 @@
+
+ {{ item.caseIntroduction }} +
@@ -89,7 +93,21 @@ export default { async getProductCenterDetailInScreenFun(id) { const res = await getProductCenterDetailAPI({ id }) const { list } = res.data - this.cardList = list + this.cardList = list.map((item) => { + return { + ...item, + isTextOverflow: false, + } + }) + + this.$nextTick(() => { + this.cardList.forEach((item) => { + item.isTextOverflow = + this.$refs[`caseInfoContent-${item.id}`][0] + .clientHeight < + this.$refs[`caseInfoContent-${item.id}`][0].scrollHeight + }) + }) }, }, } diff --git a/src/views/publicService/productCenter/product-detail.vue b/src/views/publicService/productCenter/product-detail.vue index 26d0765..258f0b9 100644 --- a/src/views/publicService/productCenter/product-detail.vue +++ b/src/views/publicService/productCenter/product-detail.vue @@ -42,7 +42,15 @@ -
+
+ {{ productDetail.introduction }} +
+ +
{{ productDetail.introduction }} @@ -136,6 +144,8 @@ export default { this.getProductCenterDetailInScreenFun(this.$route.params?.id) }, + mounted() {}, + methods: { // 获取产品中心详情 async getProductCenterDetailInScreenFun(id) { @@ -162,14 +172,23 @@ export default { typeName, linkImage, isAccess, - introduction: - introduction || - '这是一个测试用的长文本内容，用来验证悬浮提示功能是否正常工作。这段文字应该超过四行，从而触发悬浮显示效果。我们添加了更多的文字内容来确保文本能够溢出容器，这样用户就可以通过鼠标悬停来查看完整的产品介绍内容了。这个功能对于长文本的展示非常有用，能够提供更好的用户体验。', + introduction, } - this.productCases = list + this.productCases = list.map((item) => { + return { + ...item, + isTextOverflow: false, + } + }) this.productVideos = videoList this.productBrochures = fileList + + this.$nextTick(() => { + this.isTextOverflow = + this.$refs.productInfoContent.clientHeight < + this.$refs.productInfoContent.scrollHeight + }) }, goBack() { @@ -869,7 +888,7 @@ export default { display: flex; flex-direction: column; justify-content: center; - box-sizing: border-box; + // box-sizing: border-box; } .product-info-header { @@ -919,7 +938,6 @@ export default { font-family: 'PingFang SC', sans-serif; letter-spacing: 1px; line-height: 1.8; - cursor: pointer; transition: all 0.3s ease; display: -webkit-box; -webkit-box-orient: vertical;