fix(课程页面): 修复课程目录滚动容器引用错误并优化代码格式
修复StudyDetailPage中滚动容器引用未定义的问题,添加正确的ref引用 移除CourseDetailPage中多余的空行,保持代码整洁
Showing
2 changed files
with
4 additions
and
2 deletions
| ... | @@ -215,7 +215,7 @@ | ... | @@ -215,7 +215,7 @@ |
| 215 | </div> | 215 | </div> |
| 216 | 216 | ||
| 217 | <!-- 可滚动的目录列表 --> | 217 | <!-- 可滚动的目录列表 --> |
| 218 | - <div class="flex-1 overflow-y-auto px-4 py-2"> | 218 | + <div ref="scrollContainer" class="flex-1 overflow-y-auto px-4 py-2" style="overflow-y: scroll;"> |
| 219 | <div v-if="course_lessons.length" class="space-y-4"> | 219 | <div v-if="course_lessons.length" class="space-y-4"> |
| 220 | <div v-for="(lesson, index) in course_lessons" :key="index" @click="handleLessonClick(lesson)" | 220 | <div v-for="(lesson, index) in course_lessons" :key="index" @click="handleLessonClick(lesson)" |
| 221 | class="bg-white p-4 cursor-pointer hover:bg-gray-50 transition-colors border-b border-gray-200 relative"> | 221 | class="bg-white p-4 cursor-pointer hover:bg-gray-50 transition-colors border-b border-gray-200 relative"> |
| ... | @@ -252,7 +252,7 @@ import dayjs from 'dayjs'; | ... | @@ -252,7 +252,7 @@ import dayjs from 'dayjs'; |
| 252 | import { formatDate } from '@/utils/tools' | 252 | import { formatDate } from '@/utils/tools' |
| 253 | import axios from 'axios'; | 253 | import axios from 'axios'; |
| 254 | import { v4 as uuidv4 } from "uuid"; | 254 | import { v4 as uuidv4 } from "uuid"; |
| 255 | - | 255 | +import { useIntersectionObserver } from '@vueuse/core'; |
| 256 | import PdfPreview from '@/components/ui/PdfPreview.vue'; | 256 | import PdfPreview from '@/components/ui/PdfPreview.vue'; |
| 257 | 257 | ||
| 258 | // 导入接口 | 258 | // 导入接口 |
| ... | @@ -272,6 +272,8 @@ const audioPlayerRef = ref(null); | ... | @@ -272,6 +272,8 @@ const audioPlayerRef = ref(null); |
| 272 | const showCommentPopup = ref(false); | 272 | const showCommentPopup = ref(false); |
| 273 | const popupComment = ref(''); | 273 | const popupComment = ref(''); |
| 274 | 274 | ||
| 275 | +const scrollContainer = ref(null); | ||
| 276 | + | ||
| 275 | // 课程目录相关 | 277 | // 课程目录相关 |
| 276 | const course_lessons = ref([]); | 278 | const course_lessons = ref([]); |
| 277 | const course_type_maps = ref({ | 279 | const course_type_maps = ref({ | ... | ... |
-
Please register or login to post a comment