优化

src/views/publicService/productCenter/components/case-container.vue

@@ -41,7 +41,7 @@
                     <div class="case-right-content">
                         <h3>{{ item.caseCompany }}</h3>
                         <!-- <div>{{ item.caseIntroduction }} </div> -->
-                        <div>
+                        <div v-if="item.isTextOverflow">
                             <el-tooltip effect="dark" placement="top">
                                 <div
                                     slot="content"
@@ -54,6 +54,14 @@
                                 </div>
                             </el-tooltip>
                         </div>
+
+                        <div
+                            class="product-info-content"
+                            v-else
+                            :ref="`caseInfoContent-${index}`"
+                        >
+                            {{ item.caseIntroduction }}
+                        </div>
                     </div>
                 </div>
             </div>
@@ -106,19 +114,19 @@ export default {
             transitionDuration: '0.5s', // 过渡动画时长
             timer: null, // 自动轮播计时器
             interval: 5000, // 轮播间隔时间(ms)
+            extendedCardList: [],
         }
     },
     computed: {
         // 扩展列表：在开头添加最后一个元素的副本，在末尾添加第一个元素的副本，实现无缝滚动
-        extendedCardList() {
+        // extendedCardList() {
-            if (this.cardList.length <= 1) return this.cardList
+        //     if (this.cardList.length <= 1) return this.cardList
-
+        //     return [
-            return [
+        //         this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
-                this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
+        //         ...this.cardList, // 原始列表
-                ...this.cardList, // 原始列表
+        //         this.cardList[0], // 第一个元素的副本放在末尾
-                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,
+        },
+    },
 }
 </script>
 
@@ -264,7 +300,7 @@ export default {
 // 轮播容器样式 - 确保不会显示溢出内容
 .carousel-wrapper {
     width: 100%;
-    // overflow: hidden;
+    overflow: hidden;
     position: relative;
     // padding: 0 10px;
     // 添加额外的裁剪区域，确保不会显示相邻项的边缘

src/views/publicService/productCenter/product-case-list.vue

@@ -30,11 +30,8 @@
 
             <div class="case-right-content">
                 <h3>{{ item.caseCompany }}</h3>
-                <!-- <div>{{ item.caseIntroduction }} </div> -->
 
-                <!-- <TextTip :maxLines="2" :content="item.caseIntroduction" /> -->
+                <div v-if="item.isTextOverflow">
-
-                <div>
                     <el-tooltip effect="dark" placement="top">
                         <div slot="content" class="product-info-tooltip">
                             {{ item.caseIntroduction }}
@@ -44,6 +41,13 @@
                         </div>
                     </el-tooltip>
                 </div>
+                <div
+                    v-else
+                    class="product-info-content"
+                    :ref="`caseInfoContent-${item.id}`"
+                >
+                    {{ item.caseIntroduction }}
+                </div>
             </div>
         </div>
     </div>
@@ -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
+                })
+            })
         },
     },
 }

src/views/publicService/productCenter/product-detail.vue

@@ -42,7 +42,15 @@
                     </span>
                 </div>
 
-                <div class="product-container">
+                <div
+                    v-if="!isTextOverflow"
+                    ref="productInfoContent"
+                    class="product-info-content"
+                >
+                    {{ productDetail.introduction }}
+                </div>
+
+                <div class="product-container" v-else>
                     <el-tooltip effect="dark" placement="top">
                         <div slot="content" class="product-info-tooltip">
                             {{ 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;