diff --git a/public/banners/banner8.png b/public/banners/banner8.png new file mode 100644 index 0000000..200a7a3 Binary files /dev/null and b/public/banners/banner8.png differ diff --git a/public/images/Help-center/Gc_24_line-Authentication(1).png@2x.png b/public/images/Help-center/Gc_24_line-Authentication(1).png@2x.png new file mode 100644 index 0000000..83a72ae Binary files /dev/null and b/public/images/Help-center/Gc_24_line-Authentication(1).png@2x.png differ diff --git a/public/images/Help-center/SketchPng8c77f6b5914ca8b5148cb9e177fb5d7ad7b15bbad1eb5506086428c4b5243169.png b/public/images/Help-center/SketchPng8c77f6b5914ca8b5148cb9e177fb5d7ad7b15bbad1eb5506086428c4b5243169.png index c9042b2..d65035c 100644 Binary files a/public/images/Help-center/SketchPng8c77f6b5914ca8b5148cb9e177fb5d7ad7b15bbad1eb5506086428c4b5243169.png and b/public/images/Help-center/SketchPng8c77f6b5914ca8b5148cb9e177fb5d7ad7b15bbad1eb5506086428c4b5243169.png differ diff --git a/public/images/Help-center/SketchPng9eac41c079f953a4c9dd6e8ea78ccfedb8a08687a399dfa96c25967f42408792.png b/public/images/Help-center/SketchPng9eac41c079f953a4c9dd6e8ea78ccfedb8a08687a399dfa96c25967f42408792.png index e3cf1ce..e178e41 100644 Binary files a/public/images/Help-center/SketchPng9eac41c079f953a4c9dd6e8ea78ccfedb8a08687a399dfa96c25967f42408792.png and b/public/images/Help-center/SketchPng9eac41c079f953a4c9dd6e8ea78ccfedb8a08687a399dfa96c25967f42408792.png differ diff --git a/public/images/Help-center/SketchPngd9dfa413c705d7d7838aa04a1af69011abc78cfe7a9d0d31b5bfca3ed5a4c990.png b/public/images/Help-center/SketchPngd9dfa413c705d7d7838aa04a1af69011abc78cfe7a9d0d31b5bfca3ed5a4c990.png index 07e84ac..7d2717a 100644 Binary files a/public/images/Help-center/SketchPngd9dfa413c705d7d7838aa04a1af69011abc78cfe7a9d0d31b5bfca3ed5a4c990.png and b/public/images/Help-center/SketchPngd9dfa413c705d7d7838aa04a1af69011abc78cfe7a9d0d31b5bfca3ed5a4c990.png differ diff --git a/public/images/Help-center/course-active.png b/public/images/Help-center/course-active.png new file mode 100644 index 0000000..c04fbd2 Binary files /dev/null and b/public/images/Help-center/course-active.png differ diff --git a/public/images/Help-center/disposition.png b/public/images/Help-center/disposition.png new file mode 100644 index 0000000..310228a Binary files /dev/null and b/public/images/Help-center/disposition.png differ diff --git a/public/images/activity/活动图1.png b/public/images/activity/活动图1.png index 91bf39f..a5020b2 100644 Binary files a/public/images/activity/活动图1.png and b/public/images/activity/活动图1.png differ diff --git a/public/images/advertising/advertising3.png b/public/images/advertising/advertising3.png new file mode 100644 index 0000000..91e9b91 Binary files /dev/null and b/public/images/advertising/advertising3.png differ diff --git a/public/images/advertising/advertising4.png b/public/images/advertising/advertising4.png new file mode 100644 index 0000000..fe55704 Binary files /dev/null and b/public/images/advertising/advertising4.png differ diff --git a/public/images/courses/course-activities1.png b/public/images/courses/course-activities1.png index 35572e3..119014a 100644 Binary files a/public/images/courses/course-activities1.png and b/public/images/courses/course-activities1.png differ diff --git a/public/images/courses/course-activities2.png b/public/images/courses/course-activities2.png index 664ce1d..813c97a 100644 Binary files a/public/images/courses/course-activities2.png and b/public/images/courses/course-activities2.png differ diff --git a/public/images/courses/course-activities3.png b/public/images/courses/course-activities3.png index a5c8597..b22b8e1 100644 Binary files a/public/images/courses/course-activities3.png and b/public/images/courses/course-activities3.png differ diff --git a/public/images/courses/course-activities4.png b/public/images/courses/course-activities4.png index 9268bd5..4f03e21 100644 Binary files a/public/images/courses/course-activities4.png and b/public/images/courses/course-activities4.png differ diff --git a/public/images/courses/course-activities5.png b/public/images/courses/course-activities5.png index 8acb8ce..9e34847 100644 Binary files a/public/images/courses/course-activities5.png and b/public/images/courses/course-activities5.png differ diff --git a/src/App.vue b/src/App.vue index e036990..c33db7a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -81,56 +81,9 @@ body { width: 100%; max-width: 1420px; margin: 0 auto; - padding: 0 20px; + /* padding: 0 20px; */ } -/* 响应式断点 */ -@media (max-width: 1200px) { - .container { - max-width: 1140px; - padding: 0 16px; - } -} - -@media (max-width: 992px) { - .container { - max-width: 960px; - padding: 0 16px; - } -} - -@media (max-width: 768px) { - .container { - max-width: 720px; - padding: 0 12px; - } -} - -@media (max-width: 576px) { - .container { - max-width: 540px; - padding: 0 12px; - } -} - -@media (max-width: 480px) { - .container { - padding: 0 8px; - } -} - -/* 缩放兼容性 - 确保在所有缩放级别下都能正常显示 */ -@media screen and (min-resolution: 2dppx) { - body { - zoom: 1; - } -} - -@media screen and (max-resolution: 1dppx) { - body { - zoom: 1; - } -} /* 工具类 */ .text-center { @@ -157,24 +110,4 @@ body { .d-block { display: block !important; } - -@media (max-width: 768px) { - .d-md-none { - display: none !important; - } - - .d-md-block { - display: block !important; - } -} - -@media (max-width: 576px) { - .d-sm-none { - display: none !important; - } - - .d-sm-block { - display: block !important; - } -} diff --git a/src/assets/fonts/AlimamaShuHeiTi-Bold.ttf b/src/assets/fonts/AlimamaShuHeiTi-Bold.ttf new file mode 100644 index 0000000..b20919e Binary files /dev/null and b/src/assets/fonts/AlimamaShuHeiTi-Bold.ttf differ diff --git a/src/assets/fonts/DouyinSansBold.otf b/src/assets/fonts/DouyinSansBold.otf new file mode 100644 index 0000000..d63f58d Binary files /dev/null and b/src/assets/fonts/DouyinSansBold.otf differ diff --git a/src/assets/fonts/优设标题黑.ttf b/src/assets/fonts/优设标题黑.ttf new file mode 100644 index 0000000..3729151 Binary files /dev/null and b/src/assets/fonts/优设标题黑.ttf differ diff --git a/src/assets/fonts/庞门正道标题体3.0.ttf b/src/assets/fonts/庞门正道标题体3.0.ttf new file mode 100644 index 0000000..d133066 Binary files /dev/null and b/src/assets/fonts/庞门正道标题体3.0.ttf differ diff --git a/src/assets/fonts/文道潮黑.ttf b/src/assets/fonts/文道潮黑.ttf new file mode 100644 index 0000000..a096c1e Binary files /dev/null and b/src/assets/fonts/文道潮黑.ttf differ diff --git a/src/main.ts b/src/main.ts index 3d8806f..d68f7bb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,12 @@ import router from './router' import i18n from './i18n' import { useUserStore } from '@/stores/user' +import '@/assets/fonts/优设标题黑.ttf' +import '@/assets/fonts/AlimamaShuHeiTi-Bold.ttf' +import '@/assets/fonts/文道潮黑.ttf' +import '@/assets/fonts/庞门正道标题体3.0.ttf' +import '@/assets/fonts/DouyinSansBold.otf' + // Naive UI import { create, diff --git a/src/views/Activities.vue b/src/views/Activities.vue index dc30ca0..7a2d259 100644 --- a/src/views/Activities.vue +++ b/src/views/Activities.vue @@ -295,21 +295,17 @@ onMounted(() => { .activity-card { background: white; - border-radius: 8px; + border-radius: 10px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; -} - -.activity-card:hover { - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); - transform: translateY(-4px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* 卡片头部 */ .card-header { position: relative; - height: 180px; + height: 298px; overflow: hidden; border-radius: 12px 12px 0 0; } diff --git a/src/views/CourseDetail.vue b/src/views/CourseDetail.vue index 3b31a10..24be854 100644 --- a/src/views/CourseDetail.vue +++ b/src/views/CourseDetail.vue @@ -110,7 +110,7 @@ 分类：{{ course.category?.name || '信息技术' }}
- @@ -134,7 +134,7 @@

{{ course.description || '本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能大赛紧密结合，课程设置紧密对应实际全面共享，可为职业工作人员、在校学生、创行教师提供服务与学习支持。' - }}

+ }}

@@ -281,7 +281,7 @@
{{ section.name - }} + }}
{ + if (isUserEnrolled.value) { + // 已报名，执行记笔记逻辑 + console.log('开始记笔记') + // 这里可以添加打开笔记模态框的逻辑 + } else if (userStore.isLoggedIn) { + // 已登录但未报名，提示去报名 + enrollConfirmVisible.value = true + } else { + // 未登录，显示登录模态框 + showLoginModal() + } +} + // 计算用户是否已报名 const isUserEnrolled = computed(() => { // 必须同时满足：用户已登录 AND 已报名该课程 @@ -523,41 +538,64 @@ const generateMockSections = (): CourseSection[] => { { id: 5, lessonId: courseId.value, name: '第一课 程序设计入门', outline: 'https://example.com/video4.m3u8', parentId: 0, sort: 5, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: true, duration: '00:52:22' }, { id: 6, lessonId: courseId.value, name: '操作PPT', outline: 'https://example.com/ppt2.ppt', parentId: 0, sort: 6, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, { id: 7, lessonId: courseId.value, name: '第二课 循环结构', outline: 'https://example.com/video5.m3u8', parentId: 0, sort: 7, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: true, duration: '01:03:56' }, - { id: 8, lessonId: courseId.value, name: '函数&循环', outline: '', parentId: 0, sort: 8, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 9, lessonId: courseId.value, name: '练习题目', outline: '', parentId: 0, sort: 9, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + { id: 8, lessonId: courseId.value, name: '函数&循环', outline: 'https://example.com/video5.m3u8', parentId: 0, sort: 8, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + { id: 9, lessonId: courseId.value, name: '第三课 条件结构', outline: 'https://example.com/video6.m3u8', parentId: 0, sort: 9, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:45:30' }, - // 第三章 - 程序的控制结构 (6个) - { id: 10, lessonId: courseId.value, name: '条件语句详解', outline: 'https://example.com/video6.m3u8', parentId: 0, sort: 10, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:45:30' }, - { id: 11, lessonId: courseId.value, name: '循环语句应用', outline: 'https://example.com/video7.m3u8', parentId: 0, sort: 11, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:38:15' }, - { id: 12, lessonId: courseId.value, name: '控制结构参考资料', outline: 'https://example.com/ppt3.ppt', parentId: 0, sort: 12, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 13, lessonId: courseId.value, name: '条件判断练习', outline: '', parentId: 0, sort: 13, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 14, lessonId: courseId.value, name: '循环结构作业', outline: '', parentId: 0, sort: 14, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 15, lessonId: courseId.value, name: '控制结构测试', outline: '', parentId: 0, sort: 15, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + // 第三章 - 实战项目 (6个) + { id: 10, lessonId: courseId.value, name: '项目一：计算器开发', outline: 'https://example.com/video7.m3u8', parentId: 0, sort: 10, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '01:20:15' }, + { id: 11, lessonId: courseId.value, name: '项目源码下载', outline: 'https://example.com/source1.zip', parentId: 0, sort: 11, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + { id: 12, lessonId: courseId.value, name: '项目二：数据管理系统', outline: 'https://example.com/video8.m3u8', parentId: 0, sort: 12, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '01:45:20' }, + { id: 13, lessonId: courseId.value, name: '作业：完成个人项目', outline: '', parentId: 0, sort: 13, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + { id: 14, lessonId: courseId.value, name: '项目三：Web应用开发', outline: 'https://example.com/video9.m3u8', parentId: 0, sort: 14, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '02:10:45' }, + { id: 15, lessonId: courseId.value, name: '期末考试', outline: '', parentId: 0, sort: 15, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - // 第四章 - 大语言模型介绍 (5个) - { id: 16, lessonId: courseId.value, name: 'AI发展历程', outline: 'https://example.com/video8.m3u8', parentId: 0, sort: 16, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '01:12:45' }, - { id: 17, lessonId: courseId.value, name: '大语言模型原理', outline: 'https://example.com/video9.m3u8', parentId: 0, sort: 17, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:58:20' }, - { id: 18, lessonId: courseId.value, name: 'AI模型对比资料', outline: 'https://example.com/ppt4.ppt', parentId: 0, sort: 18, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 19, lessonId: courseId.value, name: 'AI应用场景分析', outline: '', parentId: 0, sort: 19, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 20, lessonId: courseId.value, name: '大语言模型考试', outline: '', parentId: 0, sort: 20, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + // 第四章 - 高级应用 (4个) + { id: 16, lessonId: courseId.value, name: '高级特性介绍', outline: 'https://example.com/video10.m3u8', parentId: 0, sort: 16, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:55:30' }, + { id: 17, lessonId: courseId.value, name: '性能优化技巧', outline: 'https://example.com/video11.m3u8', parentId: 0, sort: 17, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '01:15:20' }, + { id: 18, lessonId: courseId.value, name: '部署与发布', outline: 'https://example.com/video12.m3u8', parentId: 0, sort: 18, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:40:15' }, + { id: 19, lessonId: courseId.value, name: '课程总结', outline: 'https://example.com/video13.m3u8', parentId: 0, sort: 19, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:30:10' }, - // 第五章 - DeepSeek实际应用 (6个) - { id: 21, lessonId: courseId.value, name: 'DeepSeek平台介绍', outline: 'https://example.com/video10.m3u8', parentId: 0, sort: 21, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:42:10' }, - { id: 22, lessonId: courseId.value, name: 'API接口使用', outline: 'https://example.com/video11.m3u8', parentId: 0, sort: 22, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:55:35' }, - { id: 23, lessonId: courseId.value, name: '实战项目演示', outline: 'https://example.com/video12.m3u8', parentId: 0, sort: 23, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '01:25:18' }, - { id: 24, lessonId: courseId.value, name: 'DeepSeek开发文档', outline: 'https://example.com/ppt5.ppt', parentId: 0, sort: 24, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 25, lessonId: courseId.value, name: '项目实战作业', outline: '', parentId: 0, sort: 25, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 26, lessonId: courseId.value, name: 'DeepSeek应用考试', outline: '', parentId: 0, sort: 26, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + // 第五章 - 拓展学习 (3个) + { id: 20, lessonId: courseId.value, name: '行业发展趋势', outline: 'https://example.com/video14.m3u8', parentId: 0, sort: 20, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:35:45' }, + { id: 21, lessonId: courseId.value, name: '学习资源推荐', outline: 'https://example.com/resources.pdf', parentId: 0, sort: 21, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, + { id: 22, lessonId: courseId.value, name: '结业证书申请', outline: '', parentId: 0, sort: 22, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - // 第六章 - 综合项目实战 (5个) - { id: 27, lessonId: courseId.value, name: '项目需求分析', outline: 'https://example.com/video13.m3u8', parentId: 0, sort: 27, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:35:45' }, - { id: 28, lessonId: courseId.value, name: '系统架构设计', outline: 'https://example.com/video14.m3u8', parentId: 0, sort: 28, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:48:22' }, - { id: 29, lessonId: courseId.value, name: '项目开发指南', outline: 'https://example.com/ppt6.ppt', parentId: 0, sort: 29, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 30, lessonId: courseId.value, name: '综合项目作业', outline: '', parentId: 0, sort: 30, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined }, - { id: 31, lessonId: courseId.value, name: '期末综合考试', outline: '', parentId: 0, sort: 31, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: undefined } + // 第六章 - 答疑与交流 (2个) + { id: 23, lessonId: courseId.value, name: '常见问题解答', outline: 'https://example.com/video15.m3u8', parentId: 0, sort: 23, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '00:25:30' }, + { id: 24, lessonId: courseId.value, name: '在线答疑直播', outline: 'https://example.com/live1.m3u8', parentId: 0, sort: 24, level: 1, revision: 1, createdAt: Date.now(), updatedAt: Date.now(), deletedAt: null, completed: false, duration: '01:30:00' } ] } +// 将章节按章分组 +const groupSectionsByChapter = (sections: CourseSection[]) => { + const chapterTitles = [ + '课前准备', + '程序设计基础知识', + '实战项目', + '高级应用', + '拓展学习', + '答疑与交流' + ] + + const groups: ChapterGroup[] = [] + let sectionsPerChapter = [4, 5, 6, 4, 3, 2] // 每章的课程数量 + let sectionIndex = 0 + + for (let i = 0; i < chapterTitles.length; i++) { + const chapterSections = sections.slice(sectionIndex, sectionIndex + sectionsPerChapter[i]) + if (chapterSections.length > 0) { + groups.push({ + title: `第${i+1}章 ${chapterTitles[i]}`, + sections: chapterSections, + expanded: i === 0 // 默认展开第一章 + }) + } + sectionIndex += sectionsPerChapter[i] + } + + return groups +} + // 根据章节数据生成分组 const generateChapterGroups = () => { // 确保有章节数据 @@ -569,47 +607,12 @@ const generateChapterGroups = () => { console.log('开始生成章节分组，原始数据:', courseSections.value) console.log('章节数据数量:', courseSections.value.length) - // 手动创建章节分组，符合图片中的结构 - const groups: ChapterGroup[] = [ - { - title: '第一章 课前准备', - sections: courseSections.value.slice(0, 4), // 前4个项目 - expanded: true - }, - { - title: '第二章 程序设计基础知识', - sections: courseSections.value.slice(4, 9), // 5个项目 - expanded: true - }, - { - title: '第三章 程序的控制结构', - sections: courseSections.value.slice(9, 15), // 6个项目 - expanded: false - }, - { - title: '第四章 大语言模型介绍', - sections: courseSections.value.slice(15, 20), // 5个项目 - expanded: false - }, - { - title: '第五章 DeepSeek实际应用', - sections: courseSections.value.slice(20, 26), // 6个项目 - expanded: false - }, - { - title: '第六章 综合项目实战', - sections: courseSections.value.slice(26, 31), // 5个项目 - expanded: false - } - ] - - console.log('生成的章节分组:', groups) - console.log('第一章节数:', groups[0].sections.length) - console.log('第二章节数:', groups[1].sections.length) - groupedSections.value = groups + // 使用统一的分组函数 + groupedSections.value = groupSectionsByChapter(courseSections.value) + console.log('生成的章节分组:', groupedSections.value) } -// 获取章节标题 +// 获取章节标题（已弃用，使用groupSectionsByChapter替代） // const getChapterTitle = (chapterIndex: number): string => { // const titles = [ // '课前准备', @@ -775,56 +778,50 @@ const loadCourseSections = async () => { sectionsLoading.value = true sectionsError.value = '' - console.log('开始加载课程章节，课程ID:', courseId.value) - console.log('调用API: CourseApi.getCourseSections') - + console.log('调用API获取课程章节...') const response = await CourseApi.getCourseSections(courseId.value) console.log('章节API响应:', response) - console.log('响应状态码:', response.code) - console.log('响应数据:', response.data) if (response.code === 0 || response.code === 200) { - courseSections.value = response.data.list || [] - console.log('章节数据设置成功，数量:', courseSections.value.length) - console.log('章节详细数据:', courseSections.value) - - // 如果API返回的数据为空，使用模拟数据 - if (courseSections.value.length === 0) { - console.log('API返回数据为空，使用模拟数据') - courseSections.value = generateMockSections() + if (response.data && Array.isArray(response.data)) { + courseSections.value = response.data + groupedSections.value = groupSectionsByChapter(response.data) + console.log('章节数据设置成功:', courseSections.value) + console.log('分组数据:', groupedSections.value) + } else { + console.log('API返回的章节数据为空，使用模拟数据') + loadMockData() } - - // 生成章节分组 - generateChapterGroups() } else { - console.log('API调用失败，使用模拟数据') - courseSections.value = generateMockSections() - generateChapterGroups() - sectionsError.value = '' // 清除错误，因为我们有模拟数据 + console.log('API返回错误，使用模拟数据') + loadMockData() } } catch (err) { console.error('加载课程章节失败:', err) - console.log('网络错误，使用模拟数据') - courseSections.value = generateMockSections() - generateChapterGroups() - sectionsError.value = '' // 清除错误，因为我们有模拟数据 + console.log('API调用失败，使用模拟数据') + loadMockData() } finally { sectionsLoading.value = false } } -// 强制加载模拟数据 -// const loadMockData = () => { -// console.log('强制加载模拟数据') -// courseSections.value = generateMockSections() -// generateChapterGroups() -// sectionsError.value = '' -// console.log('模拟数据加载完成，章节数量:', courseSections.value.length) -// console.log('分组数量:', groupedSections.value.length) -// } +// 加载模拟数据 +const loadMockData = () => { + console.log('加载模拟章节数据') + const mockSections = generateMockSections() + courseSections.value = mockSections + groupedSections.value = groupSectionsByChapter(mockSections) + + // 计算学习进度 + const completed = mockSections.filter(section => section.completed).length + completedLessons.value = completed + progress.value = Math.round((completed / mockSections.length) * 100) +} // 切换章节展开/折叠 const toggleChapter = (chapterIndex: number) => { + console.log('点击切换章节，章节索引:', chapterIndex) + if (groupedSections.value[chapterIndex]) { groupedSections.value[chapterIndex].expanded = !groupedSections.value[chapterIndex].expanded } diff --git a/src/views/CourseDetailEnrolled.vue b/src/views/CourseDetailEnrolled.vue index c409fe7..8997d87 100644 --- a/src/views/CourseDetailEnrolled.vue +++ b/src/views/CourseDetailEnrolled.vue @@ -717,6 +717,7 @@ const loadMockData = () => { // 切换章节展开/收起 const toggleChapter = (chapterIndex: number) => { + console.log('切换章节展开/收起:', chapterIndex) groupedSections.value[chapterIndex].expanded = !groupedSections.value[chapterIndex].expanded } diff --git a/src/views/Courses.vue b/src/views/Courses.vue index 40af6c0..dba942e 100644 --- a/src/views/Courses.vue +++ b/src/views/Courses.vue @@ -57,21 +57,30 @@ @click="selectMajor('个人成长')">个人成长 教学案例 - 班级管理 - 通识技能 - 信息素养 - 师风师德 - 专题教育 - 综合实践 - 个人成长 - + 教育技术 + 心理健康 + 家校沟通 + 课程设计 + 教育政策 + 教学评估 + 创新教育 + STEAM教育 + 教育心理学 + 差异化教学 + 教育领导力 + 在线教学
@@ -109,9 +118,9 @@
- 最新 - 最热 - 推荐 + 最新 + 最热 + 推荐
@@ -215,6 +224,9 @@ const itemsPerPage = 20 const totalItems = computed(() => total.value) const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage)) +// 排序相关状态 +const selectedSort = ref('推荐') + // 控制广告显示状态 const showAdvertisement = ref(true) @@ -264,6 +276,13 @@ const visiblePages = computed(() => { return pages }) +// 排序切换函数 +const selectSort = (sort: string) => { + selectedSort.value = sort + currentPage.value = 1 // 重置到第一页 + loadCourses() +} + // 加载课程数据（使用模拟数据） const loadCourses = async () => { try { @@ -289,6 +308,21 @@ const loadCourses = async () => { }) } + // 排序逻辑 + switch (selectedSort.value) { + case '最新': + filteredCourses.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()) + break + case '最热': + filteredCourses.sort((a, b) => b.studentCount - a.studentCount) + break + case '推荐': + default: + // 推荐排序可以根据评分和学生数综合排序 + filteredCourses.sort((a, b) => (b.rating * 0.7 + b.studentCount * 0.3) - (a.rating * 0.7 + a.studentCount * 0.3)) + break + } + // 按专业筛选 if (selectedMajor.value !== '全部') { filteredCourses = filteredCourses.filter(course => diff --git a/src/views/Faculty.vue b/src/views/Faculty.vue index 4d8d00c..e8453cd 100644 --- a/src/views/Faculty.vue +++ b/src/views/Faculty.vue @@ -137,7 +137,6 @@ const toggleCourseInfo = (teacherId: number) => { // 筛选标签数据 const filterTabs = ref([ - { id: 'field', name: '课长领域' }, { id: 'all', name: '全部' }, { id: 'chinese-promotion', name: '汉语国际推广' }, { id: 'chinese-language', name: '汉语言' }, @@ -403,17 +402,18 @@ const goToPage = (page: number) => { /* 筛选标签栏 */ .filter-tabs { display: flex; + align-items: center; gap: 0; margin-bottom: 40px; + padding-bottom: 30px; background: transparent; border-bottom: 1px solid #e5e5e5; - padding: 0; box-shadow: none; } .filter-tab { margin-right: 25px; - margin-bottom: 30px; + /* margin-bottom: 30px; */ padding: 7px 10px; border: none; background: transparent; @@ -428,7 +428,7 @@ const goToPage = (page: number) => { } .filter-tabs div { - padding: 7px 10px; + padding: 7px 10px 7px 0; margin-right: 10px; } diff --git a/src/views/HelpCenter.vue b/src/views/HelpCenter.vue index 626a975..7f28c2a 100644 --- a/src/views/HelpCenter.vue +++ b/src/views/HelpCenter.vue @@ -14,24 +14,24 @@
-
+
+ :src="activeTab === 0 ? '/images/Help-center/SketchPngd9dfa413c705d7d7838aa04a1af69011abc78cfe7a9d0d31b5bfca3ed5a4c990.png' : '/images/Help-center/disposition.png'" /> 账号问题
-
+
+ :src="activeTab === 1 ? '/images/Help-center/Gc_24_line-Authentication(1).png@2x.png' : '/images/Help-center/SketchPng8c77f6b5914ca8b5148cb9e177fb5d7ad7b15bbad1eb5506086428c4b5243169.png'" /> 认证证书
-
+
+ :src="activeTab === 2 ? '/images/Help-center/course-active.png' : '/images/Help-center/SketchPng9eac41c079f953a4c9dd6e8ea78ccfedb8a08687a399dfa96c25967f42408792.png'" /> 课程问题
@@ -39,17 +39,44 @@
- 帐号问题 + 帐号问题 + 认证证书 + 课程问题
-
- - 1.如何在线上注册账号？ + +
+
+ + 1.如何在线上注册账号？ +
+ + 浏览器登录www.xuetangx.com，打开网页后点击右上角登录按钮进行账号注册；您也可以在微信小程序和app的登录界面进行注册。 + +
+ +
+
+ + 1.如何获取课程认证证书？ +
+ + 完成课程所有学习内容并通过考核后，可在课程详情页面申请认证证书。认证证书通常在3-5个工作日内审核发放。 + +
+ +
+
+ + 1.如何购买课程？ +
+ + 浏览课程详情页面，点击"立即购买"按钮，按照提示完成支付流程即可。支持微信、支付宝等多种支付方式。 +
- - 浏览器登录www.xuetangx.com，打开网页后点击右上角登录按钮进行账号注册；您也可以在微信小程序和app的登录界面进行注册。 -
@@ -117,7 +144,15 @@