diff --git a/src/components/Course/courseForm.vue b/src/components/Course/courseForm.vue index 77ac78fe..88bf7c13 100644 --- a/src/components/Course/courseForm.vue +++ b/src/components/Course/courseForm.vue @@ -1014,6 +1014,36 @@ export default { // 滚动到可见区域 currentElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); + // 特殊处理录播课标签位置,避免被遮挡 + if (this.courseInfo.type === 20 && this.currentStep === 1) { + this.$nextTick(() => { + const guidanceContent = document.querySelector('.guidance-content'); + if (guidanceContent) { + // 调整引导框位置,显示在元素上方或旁边 + const elementTop = rect.top; + const elementHeight = rect.height; + const guidanceHeight = guidanceContent.offsetHeight || 300; + + // 如果元素在页面上半部分,引导框显示在下方 + if (elementTop < window.innerHeight / 2) { + guidanceContent.style.top = `${elementTop + elementHeight + 10}px`; + } else { + // 如果元素在页面下半部分,引导框显示在上方 + guidanceContent.style.top = `${elementTop - guidanceHeight - 10}px`; + } + + // 确保引导框在视窗内 + const contentRect = guidanceContent.getBoundingClientRect(); + if (contentRect.bottom > window.innerHeight) { + guidanceContent.style.top = `${window.innerHeight - contentRect.height - 20}px`; + } + if (contentRect.top < 0) { + guidanceContent.style.top = '20px'; + } + } + }); + } + } }, // 下一步 @@ -1044,7 +1074,9 @@ export default { onContentTypeFocus() { if (this.showGuidance && this.currentStep === 1) { this.currentStep = 2; - this.highlightCurrentStep(); + this.$nextTick(() => { + this.highlightCurrentStep(); + }); } }, @@ -1052,7 +1084,9 @@ export default { onContentTypeChange() { if (this.showGuidance && this.currentStep === 1) { this.currentStep = 2; - this.highlightCurrentStep(); + this.$nextTick(() => { + this.highlightCurrentStep(); + }); } }, @@ -1985,12 +2019,16 @@ export default { } .guidance-content { + position: fixed; background: white; border-radius: 8px; padding: 24px; max-width: 500px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 10000; + left: 50%; + transform: translateX(-50%); + top: 20%; } .guidance-title {