diff --git a/OL-LearnPlatform-Frontend b/OL-LearnPlatform-Frontend deleted file mode 160000 index 96c6f62..0000000 --- a/OL-LearnPlatform-Frontend +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 96c6f6254ac8ada76c63f2b88e30a143b6d115b8 diff --git a/docs/DPlayer-Integration-Guide.md b/docs/DPlayer-Integration-Guide.md new file mode 100644 index 0000000..cac318a --- /dev/null +++ b/docs/DPlayer-Integration-Guide.md @@ -0,0 +1,320 @@ +# DPlayer 集成指南 + +## 什么是 DPlayer？ + +**DPlayer** 是由 [DIYGod](https://github.com/DIYGod) 开发的一个开源的 HTML5 视频播放器，具有以下特点： + +- 🎨 **界面美观**：现代化的设计风格 +- 🎯 **轻量级**：体积小，加载快 +- 🌏 **中文友好**：由中国开发者开发，中文文档完善 +- 🎮 **功能丰富**：支持弹幕、快捷键、倍速播放等 +- 📱 **移动端适配**：响应式设计，支持移动设备 + +## 主要功能特性 + +### 基础功能 +- ✅ 播放/暂停控制 +- ✅ 音量控制 +- ✅ 进度条拖拽 +- ✅ 全屏切换 +- ✅ 倍速播放 (0.5x - 2x) + +### 高级功能 +- 🎯 键盘快捷键支持 +- 🎨 自定义主题色 +- 📝 右键菜单自定义 +- 🎵 音频可视化 +- 📱 移动端手势支持 + +### 格式支持 +- MP4 +- WebM +- Ogg +- HLS (.m3u8) +- FLV +- 更多格式通过插件支持 + +## 安装和集成 + +### 方法1：CDN 引入（推荐用于快速测试） + +```html + + + +``` + +### 方法2：NPM 安装（推荐用于生产环境） + +```bash +npm install dplayer +``` + +然后在组件中导入： + +```javascript +import DPlayer from 'dplayer' +import 'dplayer/dist/DPlayer.min.css' +``` + +## 基础使用 + +### 创建播放器 + +```javascript +const player = new DPlayer({ + container: document.getElementById('dplayer'), + video: { + url: 'video.mp4', + type: 'auto' + }, + autoplay: false, + theme: '#007bff', + lang: 'zh-cn' +}) +``` + +### 事件监听 + +```javascript +player.on('play', () => { + console.log('视频开始播放') +}) + +player.on('pause', () => { + console.log('视频暂停') +}) + +player.on('ended', () => { + console.log('视频播放结束') +}) + +player.on('error', () => { + console.log('播放出错') +}) +``` + +## 配置选项 + +### 基础配置 + +```javascript +const options = { + container: document.getElementById('dplayer'), // 容器元素 + video: { + url: 'video.mp4', // 视频地址 + type: 'auto', // 视频类型：auto, normal, hls, flv + defaultQuality: 0, // 默认画质 + pic: 'poster.jpg', // 封面图 + thumbnails: 'thumbnails.jpg' // 缩略图 + }, + autoplay: false, // 自动播放 + theme: '#007bff', // 主题色 + lang: 'zh-cn', // 语言：zh-cn, en + hotkey: true, // 启用快捷键 + preload: 'auto', // 预加载：auto, metadata, none + volume: 0.8, // 默认音量 + playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2], // 倍速选项 + contextmenu: [ // 右键菜单 + { + text: '关于 DPlayer', + link: 'https://github.com/DIYGod/DPlayer' + } + ] +} +``` + +### 高级配置 + +```javascript +const advancedOptions = { + // 弹幕配置 + danmaku: { + id: 'dplayer-danmaku', + api: 'https://api.prprpr.me/dplayer/', + token: 'token', + maximum: 1000, + addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'], + user: 'DIYGod', + bottom: '15%', + unlimited: true + }, + + // 字幕配置 + subtitle: { + url: 'subtitle.vtt', + type: 'webvtt', + fontSize: '20px', + bottom: '10%', + color: '#fff' + }, + + // 画质切换 + video: { + url: [ + { + name: '1080P', + url: 'video-1080p.mp4' + }, + { + name: '720P', + url: 'video-720p.mp4' + } + ], + defaultQuality: 0 + } +} +``` + +## 在 Vue 项目中使用 + +### 创建 DPlayer 组件 + +```vue + + + + + +``` + +## 样式定制 + +### 自定义主题色 + +```css +/* 修改播放器主题色 */ +.dplayer { + --dplayer-theme: #007bff; +} + +/* 自定义进度条颜色 */ +.dplayer .dplayer-bar-wrap .dplayer-bar .dplayer-played { + background: #007bff; +} + +/* 自定义控制按钮颜色 */ +.dplayer .dplayer-icons .dplayer-icon { + color: #fff; +} + +.dplayer .dplayer-icons .dplayer-icon:hover { + color: #007bff; +} +``` + +### 响应式设计 + +```css +/* 移动端适配 */ +@media (max-width: 768px) { + .dplayer { + font-size: 14px; + } + + .dplayer .dplayer-icons .dplayer-icon { + font-size: 16px; + } +} +``` + +## 快捷键支持 + +DPlayer 默认支持以下快捷键： + +- `空格键` - 播放/暂停 +- `←` - 后退 10 秒 +- `→` - 前进 10 秒 +- `↑` - 音量 +10% +- `↓` - 音量 -10% +- `F` - 全屏切换 +- `M` - 静音切换 + +## 与 CKPlayer 对比 + +| 特性 | CKPlayer | DPlayer | +|------|----------|---------| +| 界面美观度 | ⭐⭐ | ⭐⭐⭐⭐⭐ | +| 功能丰富度 | ⭐⭐⭐ | ⭐⭐⭐⭐ | +| 移动端支持 | ⭐⭐⭐ | ⭐⭐⭐⭐ | +| 中文支持 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | +| 社区活跃度 | ⭐⭐ | ⭐⭐⭐⭐ | +| 文档质量 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | +| 学习成本 | ⭐⭐⭐⭐ | ⭐⭐⭐ | + +## 总结 + +**DPlayer 是一个优秀的视频播放器选择**，特别适合： + +- 🎯 需要美观界面的项目 +- 🌏 中文用户群体 +- 📱 重视移动端体验 +- 🎨 需要自定义主题的项目 +- ⚡ 追求轻量级解决方案 + +相比当前的 CKPlayer，DPlayer 提供了更好的用户体验和更丰富的功能，是升级视频播放器的理想选择。 diff --git a/public/images/auth/download.png b/public/images/auth/download.png index f0761a0..2ed48d2 100644 Binary files a/public/images/auth/download.png and b/public/images/auth/download.png differ diff --git a/public/images/auth/file.png b/public/images/auth/file.png index e2d94ae..d1b200c 100644 Binary files a/public/images/auth/file.png and b/public/images/auth/file.png differ diff --git a/public/images/auth/revise.png b/public/images/auth/revise.png new file mode 100644 index 0000000..e6a4143 Binary files /dev/null and b/public/images/auth/revise.png differ diff --git a/public/images/profile/del.png b/public/images/profile/del.png index 7eee424..6bc8c41 100644 Binary files a/public/images/profile/del.png and b/public/images/profile/del.png differ diff --git a/public/images/profile/edit.png b/public/images/profile/edit.png index 9250d53..e6a4143 100644 Binary files a/public/images/profile/edit.png and b/public/images/profile/edit.png differ diff --git a/public/images/profile/folder.png b/public/images/profile/folder.png new file mode 100644 index 0000000..7d72984 Binary files /dev/null and b/public/images/profile/folder.png differ diff --git a/public/images/profile/search.png b/public/images/profile/search.png new file mode 100644 index 0000000..48ee0f0 Binary files /dev/null and b/public/images/profile/search.png differ diff --git a/public/images/studys/study1.png b/public/images/studys/study1.png index d7cc1b4..2d3f818 100644 Binary files a/public/images/studys/study1.png and b/public/images/studys/study1.png differ diff --git a/public/images/studys/study2.png b/public/images/studys/study2.png index dadc8bf..916c23f 100644 Binary files a/public/images/studys/study2.png and b/public/images/studys/study2.png differ diff --git a/public/images/studys/study3.png b/public/images/studys/study3.png index ce2964f..f17218c 100644 Binary files a/public/images/studys/study3.png and b/public/images/studys/study3.png differ diff --git a/public/logo/logo2.png b/public/logo/logo2.png index 5d466e8..8652ce8 100644 Binary files a/public/logo/logo2.png and b/public/logo/logo2.png differ diff --git a/public/logo/logo3.png b/public/logo/logo3.png index 54bb4b5..6992cd6 100644 Binary files a/public/logo/logo3.png and b/public/logo/logo3.png differ diff --git a/public/logo/云师大.jpg b/public/logo/云师大.jpg new file mode 100644 index 0000000..4a01488 Binary files /dev/null and b/public/logo/云师大.jpg differ diff --git a/public/logo/德宏师范.jpg b/public/logo/德宏师范.jpg new file mode 100644 index 0000000..4bb3554 Binary files /dev/null and b/public/logo/德宏师范.jpg differ diff --git a/public/logo/曲靖师范.jpg b/public/logo/曲靖师范.jpg new file mode 100644 index 0000000..3fc86a4 Binary files /dev/null and b/public/logo/曲靖师范.jpg differ diff --git a/public/nav-icons/切换_switch备份 2.png b/public/nav-icons/切换_switch备份 2.png new file mode 100644 index 0000000..a41bc99 Binary files /dev/null and b/public/nav-icons/切换_switch备份 2.png differ diff --git a/public/nav-icons/切换_switch备份.png b/public/nav-icons/切换_switch备份.png new file mode 100644 index 0000000..50aa00e Binary files /dev/null and b/public/nav-icons/切换_switch备份.png differ diff --git a/public/nav-icons/学习中心-选中.png b/public/nav-icons/学习中心-选中.png new file mode 100644 index 0000000..1738b2b Binary files /dev/null and b/public/nav-icons/学习中心-选中.png differ diff --git a/public/nav-icons/学习中心.png b/public/nav-icons/学习中心.png index f85d915..e1728fb 100644 Binary files a/public/nav-icons/学习中心.png and b/public/nav-icons/学习中心.png differ diff --git a/public/nav-icons/提醒,感叹号_jurassic.png备份.png b/public/nav-icons/提醒,感叹号_jurassic.png备份.png new file mode 100644 index 0000000..e9fb206 Binary files /dev/null and b/public/nav-icons/提醒,感叹号_jurassic.png备份.png differ diff --git a/public/nav-icons/用户_user备份 2.png b/public/nav-icons/用户_user备份 2.png new file mode 100644 index 0000000..5cffd5b Binary files /dev/null and b/public/nav-icons/用户_user备份 2.png differ diff --git a/public/nav-icons/用户_user备份.png b/public/nav-icons/用户_user备份.png new file mode 100644 index 0000000..b8a4ac3 Binary files /dev/null and b/public/nav-icons/用户_user备份.png differ diff --git a/public/nav-icons/矩形-选中.png b/public/nav-icons/矩形-选中.png new file mode 100644 index 0000000..0386dc0 Binary files /dev/null and b/public/nav-icons/矩形-选中.png differ diff --git a/public/nav-icons/矩形.png b/public/nav-icons/矩形.png index bae11f6..184352d 100644 Binary files a/public/nav-icons/矩形.png and b/public/nav-icons/矩形.png differ diff --git a/public/nav-icons/管理端-选中.png b/public/nav-icons/管理端-选中.png new file mode 100644 index 0000000..6b4299e Binary files /dev/null and b/public/nav-icons/管理端-选中.png differ diff --git a/public/nav-icons/管理端.png b/public/nav-icons/管理端.png index 7122414..eccfdfc 100644 Binary files a/public/nav-icons/管理端.png and b/public/nav-icons/管理端.png differ diff --git a/public/nav-icons/路径备份 2.png b/public/nav-icons/路径备份 2.png new file mode 100644 index 0000000..76cd169 Binary files /dev/null and b/public/nav-icons/路径备份 2.png differ diff --git a/public/nav-icons/退出_logout备份 2.png b/public/nav-icons/退出_logout备份 2.png new file mode 100644 index 0000000..9cb02c1 Binary files /dev/null and b/public/nav-icons/退出_logout备份 2.png differ diff --git a/public/nav-icons/退出_logout备份 3.png b/public/nav-icons/退出_logout备份 3.png new file mode 100644 index 0000000..babd81f Binary files /dev/null and b/public/nav-icons/退出_logout备份 3.png differ diff --git a/public/subtitle/sample.vtt b/public/subtitle/sample.vtt new file mode 100644 index 0000000..a052802 --- /dev/null +++ b/public/subtitle/sample.vtt @@ -0,0 +1,46 @@ +WEBVTT + +00:00:01.000 --> 00:00:04.000 +欢迎使用 DPlayer 视频播放器 + +00:00:05.000 --> 00:00:08.000 +这是一个功能强大的 HTML5 视频播放器 + +00:00:09.000 --> 00:00:12.000 +支持多种格式和丰富的功能 + +00:00:13.000 --> 00:00:16.000 +包括倍速播放、清晰度切换等 + +00:00:17.000 --> 00:00:20.000 +感谢使用 DPlayer！ + +00:00:21.000 --> 00:00:24.000 +由 DIYGod 开发维护 + +00:00:25.000 --> 00:00:28.000 +开源免费，功能强大 + +00:00:29.000 --> 00:00:32.000 +支持中文字幕显示 + +00:00:33.000 --> 00:00:36.000 +界面美观，用户体验优秀 + +00:00:37.000 --> 00:00:40.000 +移动端适配良好 + +00:00:41.000 --> 00:00:44.000 +支持键盘快捷键操作 + +00:00:45.000 --> 00:00:48.000 +可以自定义主题和样式 + +00:00:49.000 --> 00:00:52.000 +支持弹幕功能 + +00:00:53.000 --> 00:00:56.000 +社区活跃，文档完善 + +00:00:57.000 --> 00:01:00.000 +感谢您的使用！ diff --git a/public/top/顶部icon1.png b/public/top/顶部icon1.png index ed17af9..2ee48b5 100644 Binary files a/public/top/顶部icon1.png and b/public/top/顶部icon1.png differ diff --git a/public/top/顶部icon2.png b/public/top/顶部icon2.png index 13246ba..05eb283 100644 Binary files a/public/top/顶部icon2.png and b/public/top/顶部icon2.png differ diff --git a/public/top/顶部icon3.png b/public/top/顶部icon3.png index 70c62ff..75d1cd0 100644 Binary files a/public/top/顶部icon3.png and b/public/top/顶部icon3.png differ diff --git a/public/top/顶部icon4.png b/public/top/顶部icon4.png index 8911f2f..7de3d0f 100644 Binary files a/public/top/顶部icon4.png and b/public/top/顶部icon4.png differ diff --git a/public/top/顶部icon5.png b/public/top/顶部icon5.png index a67e9c3..7ba9a66 100644 Binary files a/public/top/顶部icon5.png and b/public/top/顶部icon5.png differ diff --git a/src/assets/fonts/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf b/src/assets/fonts/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf new file mode 100644 index 0000000..05c3f88 Binary files /dev/null and b/src/assets/fonts/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf differ diff --git a/src/components/FirstProject.vue b/src/components/FirstProject.vue index e7e6e33..e5dca18 100644 --- a/src/components/FirstProject.vue +++ b/src/components/FirstProject.vue @@ -19,6 +19,6 @@ \ No newline at end of file diff --git a/src/components/FourthProject.vue b/src/components/FourthProject.vue index 67af5c4..9c3c603 100644 --- a/src/components/FourthProject.vue +++ b/src/components/FourthProject.vue @@ -19,6 +19,6 @@ \ No newline at end of file diff --git a/src/components/SecondProject.vue b/src/components/SecondProject.vue index 1e9622c..4c3f807 100644 --- a/src/components/SecondProject.vue +++ b/src/components/SecondProject.vue @@ -22,6 +22,6 @@ \ No newline at end of file diff --git a/src/components/ThirdProject.vue b/src/components/ThirdProject.vue index 1087bfe..6232b81 100644 --- a/src/components/ThirdProject.vue +++ b/src/components/ThirdProject.vue @@ -22,6 +22,6 @@ \ No newline at end of file diff --git a/src/components/VideoPlayerUpgraded.vue b/src/components/VideoPlayerUpgraded.vue new file mode 100644 index 0000000..a88f3d8 --- /dev/null +++ b/src/components/VideoPlayerUpgraded.vue @@ -0,0 +1,238 @@ + + + + + diff --git a/src/components/auth/LoginModal.vue b/src/components/auth/LoginModal.vue index 43ef76d..728e043 100644 --- a/src/components/auth/LoginModal.vue +++ b/src/components/auth/LoginModal.vue @@ -38,7 +38,7 @@
-

登录即代表同意我们的 《服务协议和隐私政策》

+

登录即代表同意我们的 《服务协议隐私政策》

@@ -276,7 +276,7 @@ export default { border: 1px solid #D8D8D8; border-radius: 6px; font-size: 12px; - color: #D9D9D9; + color: #000; background: #fff; transition: all 0.2s; } diff --git a/src/components/auth/RegisterModal.vue b/src/components/auth/RegisterModal.vue index 1b7a81d..2d49995 100644 --- a/src/components/auth/RegisterModal.vue +++ b/src/components/auth/RegisterModal.vue @@ -46,7 +46,7 @@
-

注册即代表同意我们的 《服务协议和隐私政策》

+

注册即代表同意我们的 《服务协议隐私政策》

@@ -287,12 +287,13 @@ export default { .form-input { min-width: 278px; + width: 278px; height: 41px; padding: 0 16px 0 30px; border: 1px solid #D8D8D8; border-radius: 6px; font-size: 12px; - color: #D9D9D9; + color: #000; background: #fff; transition: all 0.2s; } diff --git a/src/components/course/DPlayerVideo.vue b/src/components/course/DPlayerVideo.vue new file mode 100644 index 0000000..6e91918 --- /dev/null +++ b/src/components/course/DPlayerVideo.vue @@ -0,0 +1,418 @@ + + + + + diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue index eef0459..aec8657 100644 --- a/src/components/layout/AppHeader.vue +++ b/src/components/layout/AppHeader.vue @@ -39,9 +39,9 @@ AI体验 -
+
@@ -64,7 +64,8 @@
- + + {{ t('header.languageSwitch') }}
@@ -78,13 +79,15 @@
- + + {{ t('header.learningCenter') }}
- + + {{ t('header.management') }}
@@ -101,8 +104,11 @@
@@ -126,8 +132,6 @@ import { useI18n } from 'vue-i18n' import { useUserStore } from '@/stores/user' import { - PersonOutline, - LogOutOutline, MenuOutline, CloseOutline } from '@vicons/ionicons5' @@ -203,7 +207,12 @@ const userMenuOptions = computed(() => [ { label: '个人中心', key: 'profile', - icon: () => h(PersonOutline) + icon: () => h('div', { class: 'custom-icon' }, '👤') + }, + { + label: '切换教师端', + key: 'teacher', + icon: () => h('div', { class: 'custom-icon' }, '👨‍🏫') }, { type: 'divider' @@ -211,7 +220,7 @@ const userMenuOptions = computed(() => [ { label: '退出登录', key: 'logout', - icon: () => h(LogOutOutline) + icon: () => h('div', { class: 'custom-icon' }, '🚪') } ]) @@ -258,6 +267,12 @@ const handleUserMenuSelect = (key: string) => { window.location.reload(); }) break + case 'teacher': + // 切换教师端逻辑 + console.log('切换到教师端') + // 这里可以添加切换教师端的逻辑，比如跳转到教师端页面 + router.push('/teacher') + break case 'logout': userStore.logout() router.push('/') @@ -319,9 +334,12 @@ onUnmounted(() => { max-width: none; margin: 0; padding: 0 30px; - height: 100%; + height: 64px; background: white; - position: relative; + position: fixed; + top: 0; + left: 0; + right: 0; z-index: 1001; } @@ -372,317 +390,375 @@ onUnmounted(() => { object-fit: contain; } - - -/* 导航菜单 */ -.nav-menu { - display: flex; - align-items: center; - gap: 30px; - flex: 1; - margin-right: 40px; -} - -.nav-item { - display: flex; - align-items: center; - justify-content: center; - padding: 8px 12px; - font-size: 14px; - font-weight: 400; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - color: #000; - cursor: pointer; - transition: all 0.2s; - white-space: nowrap; - position: relative; - height: 24px; -} - -/* 两个字的导航项：首页 */ -.nav-item:nth-child(1) { - width: 36px; -} - -/* 四个字的导航项：热门好课、专题训练、师资力量、精选资源 */ -.nav-item:nth-child(2), -.nav-item:nth-child(3), -.nav-item:nth-child(4), -.nav-item:nth-child(5) { - width: 72px; -} - -/* 两个字的导航项：活动 */ -.nav-item:nth-child(6) { - width: 36px; - padding-right: 16px; - /* 为HOT标签留出空间 */ -} - -/* AI导航项 */ -.nav-item:nth-child(7) { - /* width: 50px; - height: 40px; */ - background-image: url('/images/ai/ai-bg.png'); - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -.nav-item:nth-child(8) { - padding: 0; -} - -.nav-item.active .nav-item-ai { - background: linear-gradient(90deg, #0FAAFF, #79DEFF); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; - font-weight: bold; -} - -.nav-item-ai:hover { - background: linear-gradient(90deg, #0FAAFF, #79DEFF); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; - font-weight: bold; -} - -.nav-item:hover { - color: #0084CD; -} - -.nav-item.active { - color: #0084CD; - font-weight: 400; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - position: relative; -} - -.nav-item.active::after { - content: ''; - position: absolute; - bottom: -6px; - left: 50%; - transform: translateX(-50%); - width: 30px; - height: 2px; - background-color: #0084CD; - border-radius: 1px; -} - -.new-badge { - position: absolute; - top: -10px; - right: -22px; - max-width: 28px; - max-height: 28px; - width: auto; - height: auto; - object-fit: contain; - z-index: 10; -} - - - -/* 搜索区域 */ -.search-section { - display: flex; - align-items: center; - margin-right: 40px; -} - -.search-box { - border-left: 1px solid #ececec; - border-right: 1px solid #ececec; - display: flex; - align-items: center; - padding: 22px 16px; - width: 280px; - transition: all 0.2s; -} - -/* .search-box:hover { - background: #eeeeee; -} */ - -.search-icon { - max-width: 18px; - max-height: 18px; - width: auto; - height: auto; - margin-right: 8px; - object-fit: contain; -} - -.search-input { - flex: 1; - border: none; - background: transparent; - outline: none; - font-size: 14px; - color: #333; -} - -.search-input::placeholder { - color: #999; -} - -/* 移动端汉堡菜单按钮 */ -.mobile-menu-toggle { +/* 图标悬停效果 */ +.action-item .hover-icon { display: none; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - cursor: pointer; - border-radius: 6px; - transition: background-color 0.2s; } -.mobile-menu-toggle:hover { - background: rgba(0, 0, 0, 0.05); +.action-item:hover .default-icon { + display: none; } -/* 右侧操作区域 */ -.header-actions { - display: flex; - align-items: center; - gap: 10px; - flex-shrink: 0; +.action-item:hover .hover-icon { + display: block; } - -.action-item { - display: flex; - align-items: center; - gap: 4px; - padding: 6px 8px; - font-size: 13px; - color: #000; - cursor: pointer; - border-radius: 4px; - transition: all 0.2s; - white-space: nowrap; -} - -.action-item:hover { - color: #1890ff; - background: #f0f8ff; -} - -/* 语言切换器 */ -.language-switcher { - position: relative; - cursor: pointer; -} - -.language-dropdown { - position: absolute; - top: 100%; - left: 0; - right: 0; - background: white; - border: 1px solid #e8e8e8; - border-radius: 6px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - z-index: 1000; - margin-top: 4px; - min-width: 120px; -} - -.language-option { - padding: 8px 12px; - font-size: 13px; - color: #666; - cursor: pointer; - transition: all 0.2s; - border-bottom: 1px solid #f5f5f5; -} - -.language-option:last-child { - border-bottom: none; -} - -.language-option:hover { - background: #f0f8ff; - color: #1890ff; -} - -.language-text { - white-space: nowrap; -} - -/* 认证按钮 */ -.auth-buttons { - display: flex; - align-items: center; - gap: 12px; -} - -.auth-combined-btn { - display: flex; - align-items: center; - background: #0088D1; - color: white; - border-radius: 5px; - padding: 8px 10px; - font-size: 12px; - font-weight: 400; - cursor: pointer; - transition: all 0.2s; -} - -.auth-combined-btn:hover { - background: #40a9ff; -} - -.auth-login, -.auth-register { - padding: 0 8px; - cursor: pointer; - transition: all 0.2s; -} - -.auth-login:hover, -.auth-register:hover { - opacity: 0.8; -} - -.auth-divider { - color: rgba(255, 255, 255, 0.6); - margin: 0 4px; - font-weight: 300; -} - -/* 用户菜单 */ -.user-menu { - display: flex; - align-items: center; -} - -.user-info { - display: flex; - align-items: center; - gap: 8px; - padding: 6px 12px; - border-radius: 6px; - cursor: pointer; - transition: background 0.2s; -} - -.user-info:hover { - background: #f0f8ff; -} - -.username { - font-size: 14px; - color: #333; - white-space: nowrap; -} - + + + + /* 导航菜单 */ + .nav-menu { + display: flex; + align-items: center; + gap: 30px; + flex: 1; + margin-right: 40px; + } + + .nav-item { + display: flex; + align-items: center; + justify-content: center; + padding: 8px 12px; + font-size: 14px; + font-weight: 400; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: #000; + cursor: pointer; + transition: all 0.2s; + white-space: nowrap; + position: relative; + height: 24px; + } + + /* 两个字的导航项：首页 */ + .nav-item:nth-child(1) { + width: 36px; + } + + /* 四个字的导航项：热门好课、专题训练、师资力量、精选资源 */ + .nav-item:nth-child(2), + .nav-item:nth-child(3), + .nav-item:nth-child(4), + .nav-item:nth-child(5) { + width: 72px; + } + + /* 两个字的导航项：活动 */ + .nav-item:nth-child(6) { + width: 36px; + padding-right: 16px; + /* 为HOT标签留出空间 */ + } + + /* AI导航项 */ + .nav-item:nth-child(7) { + /* width: 50px; + height: 40px; */ + background-image: url('/images/ai/ai-bg.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + } + + .nav-item:nth-child(8) { + padding: 0; + } + + .nav-item.active .nav-item-ai { + background: linear-gradient(90deg, #0FAAFF, #79DEFF); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + font-weight: bold; + } + + .nav-item-ai:hover { + background: linear-gradient(90deg, #0FAAFF, #79DEFF); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + font-weight: bold; + } + + .nav-item:hover { + color: #0084CD; + } + + .nav-item.active { + color: #0084CD; + font-weight: 400; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + position: relative; + } + + .nav-item.active::after { + content: ''; + position: absolute; + bottom: -6px; + left: 50%; + transform: translateX(-50%); + width: 30px; + height: 2px; + background-color: #0084CD; + border-radius: 1px; + } + + .new-badge { + position: absolute; + top: -10px; + right: -22px; + max-width: 28px; + max-height: 28px; + width: auto; + height: auto; + object-fit: contain; + z-index: 10; + } + + + + /* 搜索区域 */ + .search-section { + display: flex; + align-items: center; + margin-right: 40px; + } + + .search-box { + /* border-left: 1px solid #ececec; + border-right: 1px solid #ececec; */ + display: flex; + align-items: center; + padding: 22px 16px; + width: 280px; + transition: all 0.2s; + } + + /* .search-box:hover { + background: #eeeeee; + } */ + + .search-icon { + max-width: 18px; + max-height: 18px; + width: auto; + height: auto; + margin-right: 8px; + object-fit: contain; + } + + .search-input { + flex: 1; + border: none; + background: transparent; + outline: none; + font-size: 14px; + color: #333; + } + + .search-input::placeholder { + color: #999; + } + + /* 移动端汉堡菜单按钮 */ + .mobile-menu-toggle { + display: none; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + cursor: pointer; + border-radius: 6px; + transition: background-color 0.2s; + } + + .mobile-menu-toggle:hover { + background: rgba(0, 0, 0, 0.05); + } + + /* 右侧操作区域 */ + .header-actions { + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; + } + + .action-item { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 8px; + font-size: 13px; + color: #000; + cursor: pointer; + border-radius: 4px; + transition: all 0.2s; + white-space: nowrap; + } + + .action-item:hover { + color: #1890ff; + background: #f0f8ff; + } + + /* 语言切换器 */ + .language-switcher { + position: relative; + cursor: pointer; + } + + .language-dropdown { + position: absolute; + top: 100%; + left: 0; + right: 0; + background: white; + border: 1px solid #e8e8e8; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + z-index: 1000; + margin-top: 4px; + min-width: 120px; + } + + .language-option { + padding: 8px 12px; + font-size: 13px; + color: #666; + cursor: pointer; + transition: all 0.2s; + border-bottom: 1px solid #f5f5f5; + } + + .language-option:last-child { + border-bottom: none; + } + + .language-option:hover { + background: #f0f8ff; + color: #1890ff; + } + + .language-text { + white-space: nowrap; + } + + /* 认证按钮 */ + .auth-buttons { + display: flex; + align-items: center; + gap: 12px; + } + + .auth-combined-btn { + display: flex; + align-items: center; + background: #0088D1; + color: white; + border-radius: 5px; + padding: 8px 10px; + font-size: 12px; + font-weight: 400; + cursor: pointer; + transition: all 0.2s; + } + + .auth-combined-btn:hover { + background: #40a9ff; + } + + .auth-login, + .auth-register { + padding: 0 8px; + cursor: pointer; + transition: all 0.2s; + } + + .auth-login:hover, + .auth-register:hover { + opacity: 0.8; + } + + .auth-divider { + color: rgba(255, 255, 255, 0.6); + margin: 0 4px; + font-weight: 300; + } + + /* 用户菜单 */ + .user-menu { + display: flex; + align-items: center; + } + + .user-info { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + border-radius: 6px; + cursor: pointer; + transition: background 0.2s; + } + + .user-info:hover { + background: #f0f8ff; + } + + .username { + font-size: 14px; + color: #333; + white-space: nowrap; + } + + /* 美化用户菜单样式 */ + :deep(.n-dropdown-menu) { + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + border: 1px solid #f0f0f0; + padding: 8px 0; + } + + :deep(.n-dropdown-option) { + padding: 12px 16px; + font-size: 14px; + color: #333; + transition: all 0.2s ease; + border-radius: 0; + } + + :deep(.n-dropdown-option:hover) { + background: linear-gradient(135deg, #f0f8ff, #e6f4ff); + color: #1890ff; + } + + :deep(.n-dropdown-option .n-dropdown-option-icon) { + margin-right: 12px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + } + + .custom-icon { + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + } + + /* 分割线样式 */ + :deep(.n-dropdown-divider) { + margin: 8px 0; + border-color: #f0f0f0; + } /* 大屏幕 */ @media (min-width: 1200px) { diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue index db7357a..150d462 100644 --- a/src/components/layout/AppLayout.vue +++ b/src/components/layout/AppLayout.vue @@ -40,7 +40,7 @@ import AppFooter from './AppFooter.vue' padding: 0; background: #fff; /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */ - position: sticky; + position: fixed; top: 0; z-index: 1000; flex-shrink: 0; @@ -66,12 +66,19 @@ import AppFooter from './AppFooter.vue' .header { height: 56px; } -} - -@media (max-width: 480px) { - .header { - height: 52px; - } + .content { + padding-top: 56px; + } + } + + @media (max-width: 480px) { + .header { + height: 52px; + } + + .content { + padding-top: 52px; + } } /* 全屏模式样式现在在App.vue中统一管理 */ diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json index 93d44b6..853772f 100644 --- a/src/i18n/locales/zh.json +++ b/src/i18n/locales/zh.json @@ -7,7 +7,7 @@ "resources": "精选资源", "about": "活动", "languageSwitch": "切换语言", - "learningCenter": "学习中心", + "learningCenter": "积分中心", "management": "管理端", "login": "登录", "register": "注册", diff --git a/src/main.ts b/src/main.ts index d68f7bb..24bc150 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,6 +12,7 @@ import '@/assets/fonts/AlimamaShuHeiTi-Bold.ttf' import '@/assets/fonts/文道潮黑.ttf' import '@/assets/fonts/庞门正道标题体3.0.ttf' import '@/assets/fonts/DouyinSansBold.otf' +import '@/assets/fonts/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf' // Naive UI import { diff --git a/src/router/index.ts b/src/router/index.ts index 4bd4e29..d72c8a4 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -23,6 +23,7 @@ import ExamNotice from '@/views/ExamNotice.vue' import ExamSubmitted from '@/views/ExamSubmitted.vue' import TestSections from '@/views/TestSections.vue' import LocalVideoDemo from '@/views/LocalVideoDemo.vue' +import DPlayerTest from '@/views/DPlayerTest.vue' import SpecialTraining from '@/views/SpecialTraining.vue' import SpecialTrainingDetail from '@/views/SpecialTrainingDetail.vue' import HelpCenter from '@/views/HelpCenter.vue' @@ -250,6 +251,14 @@ const routes: RouteRecordRaw[] = [ title: '本地视频播放演示' } }, + { + path: '/dplayer-test', + name: 'DPlayerTest', + component: DPlayerTest, + meta: { + title: 'DPlayer 测试页面' + } + }, { path: '/course/:courseId/practice/:sectionId', name: 'Practice', diff --git a/src/views/Activities.vue b/src/views/Activities.vue index 7a2d259..7ea0a69 100644 --- a/src/views/Activities.vue +++ b/src/views/Activities.vue @@ -289,7 +289,7 @@ onMounted(() => { margin: auto; width: 1420px; display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); gap: 20px; } diff --git a/src/views/Ai.vue b/src/views/Ai.vue index 0534b43..f321847 100644 --- a/src/views/Ai.vue +++ b/src/views/Ai.vue @@ -420,6 +420,11 @@ onMounted(() => { diff --git a/src/views/DPlayerTest.vue b/src/views/DPlayerTest.vue new file mode 100644 index 0000000..a1583d0 --- /dev/null +++ b/src/views/DPlayerTest.vue @@ -0,0 +1,502 @@ + + + + + diff --git a/src/views/HelpCenter.vue b/src/views/HelpCenter.vue index 4633fdd..8654c68 100644 --- a/src/views/HelpCenter.vue +++ b/src/views/HelpCenter.vue @@ -225,6 +225,13 @@ onActivated(() => { \ No newline at end of file diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 0b2f2cc..20a39c5 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -12,9 +12,11 @@
- - {{ userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username || '用户名' }} + + {{ userStore.user?.profile?.realName || userStore.user?.nickname || + userStore.user?.username || '用户名' }}
@@ -23,73 +25,66 @@
- + + 我的课程
- + + 我的作业
- + + 我的考试
- + + 我的练习
- + + 我的活动
- + + 我的关注
- + + 我的消息
- + + 我的资料
- + + 我的下载
@@ -187,7 +182,7 @@
-
+
全部作业
-
+
-
+
@@ -238,13 +233,14 @@ fontSize: '14px' }"> {{ detailAssignment.status === '未完成' || detailAssignment.status === '待提交' ? '未完成' : - (detailAssignment.status === '已完成' ? '已完成' : '541人已完成') }} + (detailAssignment.status === '已完成' ? '已完成' : '541人已完成') }}
+
{{ detailAssignment.title }}
@@ -854,12 +850,10 @@
+ :name="userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username || '用户'" + :size="68" alt="用户头像" class="user-avatar-large" />
- 编辑头像 + 编辑头像
@@ -957,8 +951,8 @@
- 课件>图片> - 风景图片 + {{ currentPath.join(' > ') }} > + {{ currentPath[currentPath.length - 1] || '文件夹' }}
@@ -979,7 +973,7 @@
@@ -997,7 +991,8 @@
+ :class="{ 'subdirectory-item': isInSubDirectory }" @dblclick="handleFolderDoubleClick(file)" + @click="handleFileClick(file)">
-
+
- +
时长 42:52
- +

{{ video.title }}

@@ -98,28 +74,16 @@

全部图片

-
-
+
- +

{{ image.title }}

@@ -132,28 +96,65 @@
+ + +
+
+
+

{{ currentVideo?.title || '视频播放' }}

+ +
+
+ +
+
+
diff --git a/src/views/TeacherDetail.vue b/src/views/TeacherDetail.vue index a11172d..4cd5645 100644 --- a/src/views/TeacherDetail.vue +++ b/src/views/TeacherDetail.vue @@ -201,7 +201,224 @@ const loadCourses = async () => { await new Promise(resolve => setTimeout(resolve, 500)) // 筛选逻辑 - let filteredCourses: Course[] = [] // 暂时使用空数组，后续可以从API获取 + let filteredCourses: Course[] = [ + { + id: '1', + title: '教育心理学基础课程', + description: '本课程深入讲解教育心理学的基本理论和实践应用，帮助学生理解学习过程中的心理机制。', + thumbnail: '/images/courses/course1.png', + price: 0, + currency: 'CNY', + rating: 4.8, + ratingCount: 125, + studentsCount: 1250, + duration: '12小时43分钟', + totalLessons: 54, + level: 'beginner', + language: 'zh-CN', + category: { id: 1, name: '教育培训', slug: 'education-training' }, + tags: ['心理学', '教育', '基础'], + skills: ['心理分析', '教育理论'], + requirements: ['无特殊要求'], + objectives: ['掌握教育心理学基础理论'], + instructor: { + id: 1, + name: '汪波', + avatar: '/images/Teachers/师资力量1.png', + title: '云南师范大学教授', + bio: '资深教育心理学专家', + rating: 4.8, + studentsCount: 1250, + coursesCount: 6, + experience: '15年', + education: ['云南师范大学', '教育心理学博士'], + certifications: ['高级心理咨询师', '教育技术专家'] + }, + status: 'published', + createdAt: '2024-01-15T10:00:00Z', + updatedAt: '2024-01-15T10:00:00Z' + }, + { + id: '2', + title: '现代教育技术应用', + description: '探索现代教育技术在课堂教学中的应用，包括多媒体教学、在线教育平台等。', + thumbnail: '/images/courses/course2.png', + price: 0, + currency: 'CNY', + rating: 4.6, + ratingCount: 89, + studentsCount: 890, + duration: '10小时20分钟', + totalLessons: 42, + level: 'intermediate', + language: 'zh-CN', + category: { id: 2, name: '技术应用', slug: 'tech-application' }, + tags: ['教育技术', '多媒体', '在线教育'], + skills: ['多媒体制作', '在线教学'], + requirements: ['基础计算机操作'], + objectives: ['掌握现代教育技术应用'], + instructor: { + id: 1, + name: '汪波', + avatar: '/images/Teachers/师资力量1.png', + title: '云南师范大学教授', + bio: '资深教育技术专家', + rating: 4.6, + studentsCount: 890, + coursesCount: 6, + experience: '15年', + education: ['云南师范大学', '教育技术博士'], + certifications: ['高级教育技术专家', '多媒体制作师'] + }, + status: 'published', + createdAt: '2024-02-20T14:30:00Z', + updatedAt: '2024-02-20T14:30:00Z' + }, + { + id: '3', + title: '课程设计与开发', + description: '学习如何设计和开发高质量的课程内容，包括教学目标制定、教学内容组织等。', + thumbnail: '/images/courses/course3.png', + price: 0, + currency: 'CNY', + rating: 4.7, + ratingCount: 67, + studentsCount: 567, + duration: '15小时30分钟', + totalLessons: 68, + level: 'advanced', + language: 'zh-CN', + category: { id: 3, name: '课程设计', slug: 'course-design' }, + tags: ['课程设计', '教学开发', '教育'], + skills: ['课程规划', '教学设计'], + requirements: ['教育理论基础'], + objectives: ['掌握课程设计方法'], + instructor: { + id: 1, + name: '汪波', + avatar: '/images/Teachers/师资力量1.png', + title: '云南师范大学教授', + bio: '课程设计专家', + rating: 4.7, + studentsCount: 567, + coursesCount: 6, + experience: '15年', + education: ['云南师范大学', '课程设计博士'], + certifications: ['高级课程设计师', '教育专家'] + }, + status: 'published', + createdAt: '2024-03-10T09:15:00Z', + updatedAt: '2024-03-10T09:15:00Z' + }, + { + id: '4', + title: '教育研究方法论', + description: '系统介绍教育研究的基本方法和技巧，培养学生进行教育研究的能力。', + thumbnail: '/images/courses/course4.png', + price: 0, + currency: 'CNY', + rating: 4.5, + ratingCount: 43, + studentsCount: 432, + duration: '8小时15分钟', + totalLessons: 36, + level: 'intermediate', + language: 'zh-CN', + category: { id: 4, name: '研究方法', slug: 'research-methods' }, + tags: ['研究方法', '教育', '学术'], + skills: ['研究设计', '数据分析'], + requirements: ['统计学基础'], + objectives: ['掌握教育研究方法'], + instructor: { + id: 1, + name: '汪波', + avatar: '/images/Teachers/师资力量1.png', + title: '云南师范大学教授', + bio: '教育研究专家', + rating: 4.5, + studentsCount: 432, + coursesCount: 6, + experience: '15年', + education: ['云南师范大学', '教育研究博士'], + certifications: ['高级教育研究专家', '学术顾问'] + }, + status: 'published', + createdAt: '2024-01-25T16:45:00Z', + updatedAt: '2024-01-25T16:45:00Z' + }, + { + id: '5', + title: '学生心理辅导技巧', + description: '学习如何对学生进行心理辅导，掌握基本的心理咨询和辅导技巧。', + thumbnail: '/images/courses/course5.png', + price: 0, + currency: 'CNY', + rating: 4.9, + ratingCount: 78, + studentsCount: 678, + duration: '6小时45分钟', + totalLessons: 28, + level: 'beginner', + language: 'zh-CN', + category: { id: 5, name: '心理辅导', slug: 'psychological-counseling' }, + tags: ['心理辅导', '学生', '技巧'], + skills: ['心理咨询', '沟通技巧'], + requirements: ['心理学基础'], + objectives: ['掌握心理辅导技巧'], + instructor: { + id: 1, + name: '汪波', + avatar: '/images/Teachers/师资力量1.png', + title: '云南师范大学教授', + bio: '心理咨询专家', + rating: 4.9, + studentsCount: 678, + coursesCount: 6, + experience: '15年', + education: ['云南师范大学', '心理学博士'], + certifications: ['高级心理咨询师', '心理治疗师'] + }, + status: 'published', + createdAt: '2024-02-05T11:20:00Z', + updatedAt: '2024-02-05T11:20:00Z' + }, + { + id: '6', + title: '教育评估与测量', + description: '学习教育评估的基本理论和方法，掌握教育测量的技术和工具。', + thumbnail: '/images/courses/course5.png', + price: 0, + currency: 'CNY', + rating: 4.4, + ratingCount: 34, + studentsCount: 345, + duration: '9小时20分钟', + totalLessons: 40, + level: 'advanced', + language: 'zh-CN', + category: { id: 6, name: '教育评估', slug: 'education-assessment' }, + tags: ['教育评估', '测量', '技术'], + skills: ['评估设计', '测量技术'], + requirements: ['教育统计学'], + objectives: ['掌握教育评估方法'], + instructor: { + id: 1, + name: '汪波', + avatar: '/images/Teachers/师资力量1.png', + title: '云南师范大学教授', + bio: '教育评估专家', + rating: 4.4, + studentsCount: 345, + coursesCount: 6, + experience: '15年', + education: ['云南师范大学', '教育评估博士'], + certifications: ['高级教育评估师', '测量技术专家'] + }, + status: 'published', + createdAt: '2024-03-15T13:10:00Z', + updatedAt: '2024-03-15T13:10:00Z' + } + ] // 使用模拟数据，后续可以从API获取 // 按学科筛选 if (selectedSubject.value !== '全部') { @@ -502,7 +719,7 @@ onMounted(() => { overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; - min-height: 350px; + /* min-height: 350px; */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }