diff --git a/src/views/publicService/productCenter/product-detail.vue b/src/views/publicService/productCenter/product-detail.vue index bdf167a..a8d1ae1 100644 --- a/src/views/publicService/productCenter/product-detail.vue +++ b/src/views/publicService/productCenter/product-detail.vue @@ -41,9 +41,27 @@ 访问演示 -
+
{{ productDetail.introduction }}
+ +
+
+ {{ productDetail.introduction }} +
+
+
@@ -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 + }, }, } @@ -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); + } +}