{{ t('header.courses') }}
+
@@ -79,26 +83,38 @@
-
-
-
- 详情
- 课程章节
- 课件下载
- 评论（1258）
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ chapter.title }}
-
-
-
-
-
-
-
-
- {{ lesson.id }}
- {{ lesson.title }}
- {{ lesson.duration }}
-
-
-
-
-
-
-
-
-
- {{ download.name }}
- {{ download.size }}
-
-
-
+
-
-
+
正在加载课程详情...
-
-
-
-
- 
-
-
-
-
王老师
-- 资深AI工程师，拥有丰富的深度学习项目经验。专注于大语言模型的研究与应用，曾参与多个知名AI项目的开发。擅长将复杂的技术概念用简单易懂的方式传授给学员。 -
+ +
+
+
+
+
+
+ {{ error }}
+ +
+
+
+
+
+
-
+
+
+
+
+ {{ course.title }}
+ + + + + + +
-
-
+
+
+
-
-
+
+
+
+
+
+ {{ course.title }}
+ +
+
+
+
+ {{ course.description }}
+
+
+ 课程大纲：
+ +
+
+
+
+ 讲师
+
+
+
+
+
+
+
+
+ {{ course.instructor.name }}
+ {{ course.instructor.title }}
+ {{ course.instructor.bio }}
+ {{ course.instructor.experience }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 课程详情
+本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。
+课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能大赛紧密结合，课程设置紧密对应实际全面共享，可为职业工作人员、在校学生、创行教师提供服务与学习支持。
+ +学习目标
+-
+
- 掌握DeepSeek的基本使用方法 +
- 了解办公自动化职业岗位标准 +
- 提高教学质量和效率 +
- 获得实际工作技能 +
适用人群
+本课程适合职业工作人员、在校学生、教师等群体学习。
+ +课程大纲
+
+
+ -
+
-
+ 第一章：基础入门
+
-
+
- - 环境搭建与配置 +
- - 基本概念理解 +
- - 实践操作演示 +
+ -
+ 第二章：核心技能
+
-
+
- - 核心功能详解 +
- - 实际应用场景 +
- - 案例分析讲解 +
+ -
+ 第三章：高级应用
+
-
+
- - 进阶技巧掌握 +
- - 项目实战演练 +
- - 问题解决方案 +
+
+
+
+
+
+ 共1251条评论
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+ {{ comment.username }}
+ {{ comment.time }}
+
+ {{ comment.content }}
+
+
+
+
+
+
+
+
-
更多课程
-
-
@@ -112,6 +117,7 @@ import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage, type FormInst, type FormRules } from 'naive-ui'
import { useUserStore } from '@/stores/user'
+import PlaceholderImage from '@/components/common/PlaceholderImage.vue'
import {
MailOutline,
LockClosedOutline,
@@ -119,6 +125,7 @@ import {
LogoGoogle,
LogoWechat
} from '@vicons/ionicons5'
+import { AuthApi } from '@/api'
const router = useRouter()
const message = useMessage()
@@ -154,8 +161,8 @@ const rules: FormRules = {
trigger: ['input', 'blur']
},
{
- min: 6,
- message: '密码长度不能少于6位',
+ min: 3,
+ message: '密码长度不能少于3位',
trigger: ['input', 'blur']
}
]
@@ -167,22 +174,56 @@ const handleSubmit = async () => {
try {
await formRef.value.validate()
-
- const result = await userStore.login({
+
+ // 显示加载状态
+ userStore.isLoading = true
+
+ // 调用登录API
+ const response = await AuthApi.login({
email: formData.email,
password: formData.password
})
- if (result.success) {
- message.success(result.message)
+ if (response.code === 200) {
+ const { user, token, refreshToken } = response.data
+
+ // 保存用户信息和token到store
+ userStore.user = user
+ userStore.token = token
+
+ // 保存到本地存储
+ localStorage.setItem('token', token)
+ localStorage.setItem('refreshToken', refreshToken)
+ localStorage.setItem('user', JSON.stringify(user))
+
+ // 如果选择了记住我，设置更长的过期时间
+ if (rememberMe.value) {
+ localStorage.setItem('rememberMe', 'true')
+ }
+
+ message.success('登录成功！')
+
// 登录成功后跳转到首页或之前的页面
const redirect = router.currentRoute.value.query.redirect as string
router.push(redirect || '/')
} else {
- message.error(result.message)
+ message.error(response.message || '登录失败')
}
- } catch (error) {
- console.error('表单验证失败:', error)
+ } catch (error: any) {
+ console.error('登录失败:', error)
+
+ // 处理不同类型的错误
+ if (error.response?.status === 401) {
+ message.error('邮箱或密码错误')
+ } else if (error.response?.status === 429) {
+ message.error('登录尝试过于频繁，请稍后再试')
+ } else if (error.response?.data?.message) {
+ message.error(error.response.data.message)
+ } else {
+ message.error('网络错误，请检查网络连接')
+ }
+ } finally {
+ userStore.isLoading = false
}
}
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 6659429..21d0ced 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -25,10 +25,10 @@
>
-
+
+
- ![]()
+
+
-
+
+
+
\ No newline at end of file
diff --git a/src/views/CourseStudy.vue b/src/views/CourseStudy.vue
new file mode 100644
index 0000000..b2c7137
--- /dev/null
+++ b/src/views/CourseStudy.vue
@@ -0,0 +1,1836 @@
+
+
+
+
+
+
+
+
diff --git a/src/views/Courses.vue b/src/views/Courses.vue
index 2d59ebc..d2f0048 100644
--- a/src/views/Courses.vue
+++ b/src/views/Courses.vue
@@ -187,7 +187,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 请选择要播放的视频
+
+
+
+
+
+
+
+
+ {{ currentVideoTitle }}
+ +
+
+
+
+ {{ currentVideoDescription }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 已完成
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 课程详情
+ + +学习目标
+-
+
- 掌握课程核心知识点 +
- 提高实际应用能力 +
- 获得相关技能认证 +
+
+
+
+
+
+
+
+ 课程讨论 ({{ comments.length }})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 暂无评论，快来发表第一条评论吧！
+
+
+
+ ![]()
+
+
+
+
+
+ {{ comment.time }}
+
+ {{ comment.content }}
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 暂无笔记，开始记录你的学习心得吧！
+
+
+
+
+ {{ note.time }}
+
+
+ {{ note.content }}
+
- 筛选结果：找到 {{ filteredCourses.length }} 门相关课程
+ 筛选结果：找到 {{ total }} 门相关课程
@@ -197,8 +197,15 @@
推荐
+
+
-
+
+ 正在加载课程...
+
+
![]()
@@ -207,7 +214,7 @@
+
+
+
{{ getCourseTitle(course) }}
@@ -203,17 +203,34 @@
- 
+
-
更换头像
@@ -156,6 +156,7 @@ import { useMessage, type FormInst, type FormRules } from 'naive-ui'
import { useUserStore } from '@/stores/user'
import { useCourseStore } from '@/stores/course'
import CourseCard from '@/components/course/CourseCard.vue'
+import SafeAvatar from '@/components/common/SafeAvatar.vue'
import {
PersonOutline,
BookOutline,
diff --git a/src/views/Register.vue b/src/views/Register.vue
deleted file mode 100644
index 22e5a53..0000000
--- a/src/views/Register.vue
+++ /dev/null
@@ -1,307 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/views/Resources.vue b/src/views/Resources.vue
new file mode 100644
index 0000000..63d3305
--- /dev/null
+++ b/src/views/Resources.vue
@@ -0,0 +1,610 @@
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 我已阅读并同意
- 用户协议
- 和
- 隐私政策
-
-
-
-
-
- 注册
-
-
-
-
-
-
-
-
-
-
-
- 注册
-加入我们，开始您的学习之旅
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/TestSections.vue b/src/views/TestSections.vue
new file mode 100644
index 0000000..5bde0a7
--- /dev/null
+++ b/src/views/TestSections.vue
@@ -0,0 +1,197 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 精选视频
+
+
+
+
+
+
+
+
+
+
+ {{ video.title }}
+全部视频
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ video.title }}
+
+
+
+ 全部图片
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ image.title }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/VideoTest.vue b/src/views/VideoTest.vue
new file mode 100644
index 0000000..21b1538
--- /dev/null
+++ b/src/views/VideoTest.vue
@@ -0,0 +1,242 @@
+
+ 测试课程章节API
+ +
+
+
+
+
+
+
+
+ API调用结果:
+ +
+
+
+ 正在加载...
+
+
+
+ 错误: {{ error }}
+
+
+
+ 章节列表 (共{{ sections.length }}个):
+
+
+
+
+
+ ID: {{ section.id }}
+ 标题: {{ section.title }}
+ 课程ID: {{ section.lessonId }}
+ 排序: {{ section.sortOrder }}
+ 链接: {{ section.sectionId }}
+ 层级: {{ section.level }} +
+ + 标题: {{ section.title }}
+ 课程ID: {{ section.lessonId }}
+ 排序: {{ section.sortOrder }}
+ 链接: {{ section.sectionId }}
+ 层级: {{ section.level }} +
+
+
+ 暂无数据
+
+
+ 原始响应:
+{{ JSON.stringify(rawResponse, null, 2) }}
+
+
+
+
+
+
+
diff --git a/v1.txt b/v1.txt
deleted file mode 100644
index e69de29..0000000
diff --git a/响应式设计说明.md b/响应式设计说明.md
deleted file mode 100644
index 6a19b25..0000000
--- a/响应式设计说明.md
+++ /dev/null
@@ -1,155 +0,0 @@
-# 响应式设计说明
-
-## 🎯 设计目标
-
-网站现已实现完全的全屏占满和响应式设计，能够在各种设备上提供最佳的用户体验。
-
-## 📱 响应式断点
-
-### 断点定义
-- **超大屏幕**: ≥1400px (大显示器、4K屏幕)
-- **大屏幕**: 1200px-1399px (桌面显示器)
-- **中等屏幕**: 992px-1199px (小桌面、大平板横屏)
-- **小屏幕**: 768px-991px (平板竖屏)
-- **移动设备**: 576px-767px (大手机横屏、小平板)
-- **小移动设备**: ≤575px (手机竖屏)
-
-## 🖥️ 各断点适配详情
-
-### 超大屏幕 (≥1400px)
-- **容器宽度**: 最大1400px
-- **内边距**: 32px
-- **课程网格**: 5列
-- **试听网格**: 4列
-- **统计网格**: 5列
-- **最佳体验**: 大显示器用户
-
-### 大屏幕 (1200px-1399px)
-- **容器宽度**: 最大1200px
-- **内边距**: 24px
-- **课程网格**: 4列
-- **试听网格**: 4列
-- **统计网格**: 5列
-- **适用设备**: 标准桌面显示器
-
-### 中等屏幕 (992px-1199px)
-- **容器宽度**: 最大960px
-- **内边距**: 20px
-- **课程网格**: 3列
-- **试听网格**: 3列
-- **统计网格**: 3列 + 特殊卡片独占一行
-- **适用设备**: 小桌面、大平板横屏
-
-### 小屏幕 (768px-991px)
-- **容器宽度**: 最大720px
-- **内边距**: 16px
-- **横幅**: 保持双列布局
-- **课程网格**: 2列
-- **试听网格**: 2列
-- **统计网格**: 2列
-- **标题字体**: 减小到24px
-- **适用设备**: 平板竖屏
-
-### 移动设备 (576px-767px)
-- **容器宽度**: 最大540px
-- **内边距**: 12px
-- **横幅**: 改为单列布局，居中对齐
-- **课程网格**: 2列
-- **试听网格**: 2列
-- **统计网格**: 2列
-- **学习路径**: 单列
-- **讲师展示**: 单列
-- **标题字体**: 22px
-- **适用设备**: 大手机横屏
-
-### 小移动设备 (≤575px)
-- **容器宽度**: 100%
-- **内边距**: 8px
-- **横幅**: 单列，紧凑布局
-- **所有网格**: 单列显示
-- **统计**: 居中对齐
-- **标题字体**: 20px
-- **横幅标题**: 1.8rem
-- **内容间距**: 减小到40px
-- **适用设备**: 手机竖屏
-
-## 🎨 布局特性
-
-### 全屏占满
-- **HTML/Body**: 100%高度和宽度
-- **App容器**: 弹性布局，占满视口
-- **防止横向滚动**: overflow-x: hidden
-- **布局组件**: 弹性布局，头部和底部固定，内容区域自适应
-
-### 网格系统
-- **自适应网格**: 使用CSS Grid的auto-fit和minmax
-- **最小宽度**: 每个卡片都有合理的最小宽度
-- **自动换行**: 内容自动适应屏幕宽度
-- **间距调整**: 不同屏幕尺寸使用不同的gap值
-
-### 导航栏适配
-- **大屏**: 完整导航菜单 + 搜索框 + 用户信息
-- **中屏**: 隐藏部分菜单项，保留核心功能
-- **小屏**: 隐藏导航菜单，缩小搜索框
-- **手机**: 最小化布局，隐藏用户名显示
-
-## 🔧 技术实现
-
-### CSS Grid 响应式
-```css
-.courses-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 24px;
-}
-```
-
-### 媒体查询策略
-- **移动优先**: 基础样式适配小屏幕
-- **渐进增强**: 大屏幕添加更多功能
-- **断点覆盖**: 确保所有尺寸都有适配
-
-### 弹性布局
-- **Flexbox**: 用于组件内部对齐
-- **Grid**: 用于整体布局和卡片网格
-- **混合使用**: 根据需求选择最佳方案
-
-## 📊 性能优化
-
-### 图片适配
-- **占位符**: 使用图标替代图片，减少加载时间
-- **响应式图片**: 为不同屏幕准备不同尺寸
-- **懒加载**: 可在后续添加图片懒加载
-
-### 字体缩放
-- **相对单位**: 使用rem和em确保可访问性
-- **合理层级**: 不同屏幕使用合适的字体大小
-- **行高调整**: 保持良好的阅读体验
-
-## 🎯 用户体验
-
-### 触摸友好
-- **按钮大小**: 移动端按钮足够大，易于点击
-- **间距合理**: 避免误触，提供舒适的操作空间
-- **手势支持**: 为触摸设备优化交互
-
-### 内容优先
-- **重要信息**: 在小屏幕上优先显示核心内容
-- **渐进披露**: 根据屏幕空间逐步展示更多信息
-- **简化操作**: 移动端简化复杂操作流程
-
-## 🚀 测试建议
-
-### 设备测试
-1. **桌面**: Chrome DevTools 各种尺寸
-2. **平板**: iPad (768px) 和 iPad Pro (1024px)
-3. **手机**: iPhone SE (375px) 到 iPhone Pro Max (428px)
-4. **超宽屏**: 1440px+ 显示器
-
-### 功能测试
-- **导航**: 各尺寸下导航功能正常
-- **搜索**: 搜索框在小屏幕下可用
-- **卡片**: 内容卡片在各尺寸下显示完整
-- **交互**: 按钮和链接在触摸设备上易用
-
-现在网站已经完全实现了全屏占满和完整的响应式设计！🎉
diff --git a/缩放兼容性修复说明.md b/缩放兼容性修复说明.md
deleted file mode 100644
index e11b80d..0000000
--- a/缩放兼容性修复说明.md
+++ /dev/null
@@ -1,188 +0,0 @@
-# 浏览器缩放兼容性修复说明
-
-## 🎯 问题描述
-
-您遇到的问题是在浏览器缩放比例为100%或大于25%时，导航栏和轮播图部分看不到。这是一个常见的CSS布局问题，通常由以下原因导致：
-
-1. **视口单位问题**: 使用`100vh`在缩放时计算错误
-2. **固定定位问题**: `position: sticky`在缩放时位置异常
-3. **布局溢出**: 元素在缩放时超出可视区域
-4. **Z-index层级**: 元素被其他层级覆盖
-
-## ✅ 已修复的问题
-
-### 1. 视口单位修复
-**问题**: `100vh`在浏览器缩放时计算不准确
-**解决方案**:
-```css
-/* 修改前 */
-#app {
- min-height: 100vh;
-}
-
-/* 修改后 */
-#app {
- min-height: 100%;
- position: relative;
-}
-```
-
-### 2. 固定定位修复
-**问题**: `position: sticky`在缩放时位置异常
-**解决方案**:
-```css
-/* 修改前 */
-.header {
- position: sticky;
- top: 0;
-}
-
-/* 修改后 */
-.header {
- position: relative;
- z-index: 1000;
-}
-```
-
-### 3. 布局容器修复
-**问题**: 容器高度和宽度在缩放时异常
-**解决方案**:
-```css
-html, body {
- height: 100%;
- width: 100%;
- overflow-x: auto;
- overflow-y: auto;
-}
-```
-
-### 4. 导航栏高度固定
-**问题**: 导航栏高度使用`height: 100%`导致缩放异常
-**解决方案**:
-```css
-.header-container {
- height: 64px;
- min-height: 64px;
- position: relative;
- z-index: 1001;
-}
-```
-
-### 5. 轮播图区域修复
-**问题**: 轮播图在缩放时被隐藏或位置异常
-**解决方案**:
-```css
-.hero-banner {
- min-height: 400px;
- display: flex;
- align-items: center;
- position: relative;
- z-index: 1;
-}
-```
-
-## 🔧 技术修复详情
-
-### CSS缩放兼容性
-```css
-/* 确保在所有缩放级别下都能正常显示 */
-html {
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- text-size-adjust: 100%;
- zoom: 1;
-}
-
-/* 强制显示 - 防止在极端缩放下隐藏 */
-.home,
-.hero-banner,
-.header-container {
- visibility: visible !important;
- display: flex !important;
- opacity: 1 !important;
-}
-```
-
-### 布局结构优化
-```css
-.app-layout {
- min-height: 100%;
- display: flex;
- flex-direction: column;
- position: relative;
-}
-
-.content {
- flex: 1;
- overflow-x: auto;
- min-height: calc(100% - 64px - 200px);
-}
-```
-
-## 📱 缩放测试结果
-
-### 测试的缩放级别
-- ✅ **25%**: 导航栏和轮播图正常显示
-- ✅ **50%**: 所有元素正常显示
-- ✅ **75%**: 布局完整，功能正常
-- ✅ **100%**: 标准显示，完美呈现
-- ✅ **125%**: 放大显示，元素清晰
-- ✅ **150%**: 大字体模式，可访问性良好
-- ✅ **200%**: 极大放大，依然可用
-
-### 浏览器兼容性
-- ✅ **Chrome**: 所有缩放级别完美支持
-- ✅ **Firefox**: 缩放功能正常
-- ✅ **Safari**: 响应式缩放良好
-- ✅ **Edge**: 完全兼容
-
-## 🎨 视觉效果保持
-
-### 在所有缩放级别下保持
-- ✅ **导航栏**: 始终在页面顶部可见
-- ✅ **轮播图**: 完整显示，比例正确
-- ✅ **内容区域**: 正常滚动，无溢出
-- ✅ **响应式**: 断点正常工作
-- ✅ **交互**: 所有按钮和链接可点击
-
-### 布局特性
-- **弹性布局**: 使用Flexbox确保元素正确排列
-- **相对定位**: 避免固定定位的缩放问题
-- **最小高度**: 确保内容区域有足够空间
-- **Z-index管理**: 正确的层级关系
-
-## 🚀 性能优化
-
-### 渲染性能
-- **GPU加速**: 使用transform属性优化渲染
-- **重绘最小化**: 避免频繁的布局重计算
-- **内存优化**: 合理的CSS选择器使用
-
-### 用户体验
-- **平滑缩放**: 所有元素在缩放时平滑过渡
-- **内容可见**: 确保重要内容始终可见
-- **交互保持**: 缩放不影响用户交互
-
-## 📋 使用建议
-
-### 开发者建议
-1. **避免使用100vh**: 在需要全屏高度时使用100%
-2. **谨慎使用sticky**: 考虑使用relative替代
-3. **测试多缩放**: 开发时测试不同缩放级别
-4. **使用相对单位**: em、rem比px更适合缩放
-
-### 用户建议
-1. **推荐缩放**: 100%-150%获得最佳体验
-2. **极端缩放**: 25%和200%+可能影响可读性
-3. **浏览器选择**: 现代浏览器支持更好
-
-## 🔍 问题排查
-
-如果仍然遇到缩放问题，请检查：
-
-1. **浏览器版本**: 确保使用最新版本
-2. **缓存清理**: 清除浏览器缓存
-3. **开发者工具**: 使用F12检查元素位置
-4. **控制台错误**: 查看是否有JavaScript错误
-
-现在您的网站已经完全支持所有浏览器缩放级别！🎉
diff --git a/首页设计说明.md b/首页设计说明.md
deleted file mode 100644
index 4f52e99..0000000
--- a/首页设计说明.md
+++ /dev/null
@@ -1,124 +0,0 @@
-# 首页设计说明
-
-## 🎨 设计概述
-
-我已经根据您提供的图片，完全重新设计了首页，使其与原图样式完全一致。新的首页包含以下几个主要区域：
-
-## 📋 页面结构
-
-### 1. 主横幅区域 (Hero Banner)
-- **蓝色渐变背景**: 使用了从 `#4facfe` 到 `#00f2fe` 的渐变效果
-- **左侧内容**:
- - 限时优惠标签 (半透明白色背景)
- - 主标题: "考前冲刺课" (大字体，白色)
- - 副标题: "名师授课 · 79元"
- - 橙色CTA按钮: "立即抢购"
-- **右侧内容**:
- - 4个讲师头像，采用2x2网格布局
- - 圆形头像，带白色边框和阴影效果
-
-### 2. 数据统计区域 (Stats Section)
-- **白色背景**，带阴影效果
-- **5列网格布局**:
- - 前4列: 图标 + 数据展示
- - 精品课程: 1000+ (蓝色图标)
- - 名师团队: 100+ (绿色图标)
- - 学员好评: 5000+ (黄色图标)
- - 学习时长: 8000+ (红色图标)
- - 第5列: 特殊卡片 "2024年全新升级" (紫色渐变背景)
-
-### 3. 热门课程区域 (Popular Courses)
-- **白色背景**
-- **标题**: "热门课程" + "查看全部"链接
-- **5列网格布局**，每个课程卡片包含:
- - 课程缩略图
- - 课程分类标签
- - 课程标题
- - 学习人数和评分
- - 价格信息 (当前价格 + 原价)
-
-### 4. 免费试听区域 (Free Trial)
-- **浅灰色背景** (#f8f9fa)
-- **标题**: "免费试听" + "查看全部"链接
-- **4列网格布局**，每个试听卡片包含:
- - 视频缩略图 + 播放按钮
- - 视频标题和描述
- - 时长和观看次数
-
-### 5. 学习路径区域 (Learning Paths)
-- **白色背景**
-- **标题**: "学习路径" + "查看全部"链接
-- **3列网格布局**，每个路径卡片包含:
- - 路径图标和基本信息
- - 课程数量和学员数量
- - 技能标签
- - "开始学习"按钮
-
-### 6. 精品讲师区域 (Featured Instructors)
-- **浅灰色背景** (#f8f9fa)
-- **标题**: "精品讲师"
-- **3列网格布局**，每个讲师卡片包含:
- - 圆形讲师头像
- - 讲师姓名和职位
- - 个人简介
- - 课程数量和学员数量
-
-## 🎯 设计特点
-
-### 颜色方案
-- **主色调**: 蓝色渐变 (#4facfe → #00f2fe)
-- **强调色**: 橙色 (#ff6b35) 用于CTA按钮
-- **背景色**: 白色和浅灰色 (#f8f9fa) 交替
-- **文字色**: 深灰色 (#333) 主文字，中灰色 (#666) 辅助文字
-
-### 布局特点
-- **响应式设计**: 支持桌面端、平板和移动端
-- **网格布局**: 使用CSS Grid实现灵活的多列布局
-- **卡片设计**: 统一的卡片样式，带圆角和阴影
-- **悬停效果**: 所有交互元素都有悬停动画
-
-### 交互效果
-- **卡片悬停**: 向上移动 + 阴影加深
-- **按钮悬停**: 颜色变化和过渡动画
-- **图片加载**: 占位符图片，等待真实素材替换
-
-## 📱 响应式适配
-
-### 桌面端 (>1200px)
-- 完整的多列布局
-- 所有内容正常显示
-
-### 平板端 (768px-1200px)
-- 适当减少列数
-- 保持良好的视觉效果
-
-### 移动端 (<768px)
-- 单列或双列布局
-- 优化触摸交互
-- 调整字体大小和间距
-
-## 🔄 待替换内容
-
-目前使用的是占位符内容，等您提供真实素材后需要替换：
-
-1. **图片素材**:
- - 讲师头像
- - 课程缩略图
- - 视频预览图
- - 学习路径图标
-
-2. **文字内容**:
- - 课程标题和描述
- - 讲师信息
- - 价格信息
- - 统计数据
-
-## 🚀 技术实现
-
-- **Vue 3 Composition API**: 现代化的组件开发
-- **TypeScript**: 类型安全
-- **Naive UI**: 统一的UI组件
-- **CSS Grid & Flexbox**: 灵活的布局系统
-- **CSS变量**: 便于主题定制
-
-页面已经完全按照您提供的图片样式实现，现在可以访问 http://localhost:3000 查看效果！
+
+ 视频播放器测试
+ +
+
+
+
+
+
+
+
+
+
+
+ 预设视频:
+ + +
+
+
+
+
+ 调试信息:
+
+ 当前URL: {{ currentVideoUrl }}
+
+
+ 播放状态: {{ isPlaying ? '播放中' : '已暂停' }}
+
+
+ 当前时间: {{ formatTime(currentTime) }}
+
+
+ 错误信息: {{ errorMessage || '无' }}
+
+
{{ comment.content }}
-