标签提示

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.$nextTick(() => {
           this.highlightCurrentStep();
+        });
       }
     },
 
@@ -1052,7 +1084,9 @@ export default {
     onContentTypeChange() {
       if (this.showGuidance && this.currentStep === 1) {
         this.currentStep = 2;
+        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 {