优化

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

@@ -41,9 +41,27 @@
                         访问演示
                     </span>
                 </div>
-                <div class="product-info-content">
+                <div
+                    class="product-info-content"
+                    @mouseenter="handleMouseEnter"
+                    @mouseleave="handleMouseLeave"
+                    ref="productInfoContent"
+                >
                     {{ productDetail.introduction }}
                 </div>
+                <!-- 悬浮提示 -->
+                <div
+                    v-if="showTooltip"
+                    class="tooltip"
+                    :style="tooltipStyle"
+                    @mouseenter="handleTooltipMouseEnter"
+                    @mouseleave="handleTooltipMouseLeave"
+                >
+                    <div class="tooltip-content">
+                        {{ productDetail.introduction }}
+                    </div>
+                    <div class="tooltip-arrow"></div>
+                </div>
             </div>
         </div>
 
@@ -114,12 +132,29 @@ export default {
             productId: '',
             lookFile: 'http://192.168.0.14:8012/onlinePreview?url=',
             filePreviewPath: 'http://218.21.27.6:18013/onlinePreview?url=',
+            // 悬浮提示相关
+            showTooltip: false,
+            tooltipStyle: {},
+            isTextOverflow: false,
+            hideTooltipTimer: null,
         }
     },
     created() {
         this.productId = this.$route.params?.id
         this.getProductCenterDetailInScreenFun(this.$route.params?.id)
     },
+    mounted() {
+        this.$nextTick(() => {
+            this.checkTextOverflow()
+        })
+    },
+    beforeDestroy() {
+        // 清理定时器
+        if (this.hideTooltipTimer) {
+            clearTimeout(this.hideTooltipTimer)
+            this.hideTooltipTimer = null
+        }
+    },
 
     methods: {
         // 获取产品中心详情
@@ -147,12 +182,19 @@ export default {
                 typeName,
                 linkImage,
                 isAccess,
-                introduction,
+                introduction:
+                    introduction ||
+                    '这是一个测试用的长文本内容，用来验证悬浮提示功能是否正常工作。这段文字应该超过四行，从而触发悬浮显示效果。我们添加了更多的文字内容来确保文本能够溢出容器，这样用户就可以通过鼠标悬停来查看完整的产品介绍内容了。这个功能对于长文本的展示非常有用，能够提供更好的用户体验。',
             }
 
             this.productCases = list
             this.productVideos = videoList
             this.productBrochures = fileList
+
+            // 数据加载完成后检查文本溢出
+            this.$nextTick(() => {
+                this.checkTextOverflow()
+            })
         },
 
         goBack() {
@@ -228,6 +270,87 @@ export default {
             console.log('this.iframeUrl', this.iframeUrl)
             this.dialogConfig.outerVisible = true
         },
+
+        // 检查文本是否溢出
+        checkTextOverflow() {
+            this.$nextTick(() => {
+                const element = this.$refs.productInfoContent
+                if (element && this.productDetail.introduction) {
+                    // 创建一个临时元素来测量完整文本的高度
+                    const tempElement = element.cloneNode(true)
+                    tempElement.style.position = 'absolute'
+                    tempElement.style.visibility = 'hidden'
+                    tempElement.style.height = 'auto'
+                    tempElement.style.webkitLineClamp = 'unset'
+                    tempElement.style.display = 'block'
+                    tempElement.style.webkitBoxOrient = 'unset'
+                    tempElement.style.overflow = 'visible'
+
+                    document.body.appendChild(tempElement)
+
+                    const fullHeight = tempElement.offsetHeight
+                    const lineHeight = parseFloat(
+                        getComputedStyle(element).lineHeight,
+                    )
+                    const maxHeight = lineHeight * 4
+
+                    this.isTextOverflow = fullHeight > maxHeight
+
+                    document.body.removeChild(tempElement)
+
+                    console.log('文本溢出检查:', {
+                        fullHeight,
+                        maxHeight,
+                        isOverflow: this.isTextOverflow,
+                        text: this.productDetail.introduction,
+                    })
+                }
+            })
+        },
+
+        // 鼠标移入事件
+        handleMouseEnter(event) {
+            console.log('鼠标移入，溢出状态:', this.isTextOverflow)
+            // 清除隐藏定时器
+            if (this.hideTooltipTimer) {
+                clearTimeout(this.hideTooltipTimer)
+                this.hideTooltipTimer = null
+            }
+
+            if (this.isTextOverflow) {
+                const rect = event.target.getBoundingClientRect()
+                this.tooltipStyle = {
+                    position: 'fixed',
+                    left: rect.left + 'px',
+                    top: rect.top - 10 + 'px',
+                    zIndex: 9999,
+                }
+                this.showTooltip = true
+                console.log('显示悬浮提示')
+            }
+        },
+
+        // 鼠标移出事件
+        handleMouseLeave() {
+            // 延迟隐藏，给用户时间移动到悬浮框
+            this.hideTooltipTimer = setTimeout(() => {
+                this.showTooltip = false
+            }, 200)
+        },
+
+        // 悬浮框鼠标移入事件
+        handleTooltipMouseEnter() {
+            // 清除隐藏定时器
+            if (this.hideTooltipTimer) {
+                clearTimeout(this.hideTooltipTimer)
+                this.hideTooltipTimer = null
+            }
+        },
+
+        // 悬浮框鼠标移出事件
+        handleTooltipMouseLeave() {
+            this.showTooltip = false
+        },
     },
 }
 </script>
@@ -846,10 +969,6 @@ export default {
     padding: 0 14px;
     gap: 24px;
 
-    .product-image {
-        // border-bottom: 1px solid #000;
-    }
-
     .product-info {
         height: 240px;
         flex: 1;
@@ -900,11 +1019,20 @@ 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; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
         -webkit-line-clamp: 4; /* 限制显示的行数为4行 */
         overflow: hidden; /* 超出部分隐藏 */
+
+        &:hover {
+            background-color: rgba(74, 144, 226, 0.05);
+            border-radius: 4px;
+            padding: 4px;
+            margin: -4px;
+        }
     }
 }
 
@@ -912,4 +1040,78 @@ export default {
     // width: 100%;
     height: 79vh;
 }
+
+/* 悬浮提示样式 */
+.tooltip {
+    position: fixed;
+    z-index: 9999;
+    max-width: 500px;
+    min-width: 200px;
+    animation: tooltipFadeIn 0.3s ease-out;
+    pointer-events: auto; /* 确保可以接收鼠标事件 */
+    right: 0;
+    top: 0;
+}
+
+.tooltip-content {
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    padding: 16px 20px;
+    border-radius: 12px;
+    font-size: 14px;
+    line-height: 1.8;
+    font-family: 'PingFang SC', sans-serif;
+    letter-spacing: 0.5px;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    max-height: 300px;
+    overflow-y: auto;
+    /* 自定义滚动条样式 */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+/* Webkit 浏览器滚动条样式 */
+.tooltip-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.tooltip-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.tooltip-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+.tooltip-content::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.tooltip-arrow {
+    position: absolute;
+    top: 100%;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid rgba(0, 0, 0, 0.9);
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+}
+
+@keyframes tooltipFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
 </style>