From 11f10ca0c8d75476929b68f1ff8a38b56222303b Mon Sep 17 00:00:00 2001 From: username Date: Wed, 23 Jul 2025 22:26:46 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AF=BE=E7=A8=8B=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2=E4=BB=A5=E5=8F=8A=E5=85=B6=E4=BB=96?= =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/Activities-Page.md | 125 ++ docs/Banner-Image-Setup.md | 158 ++ docs/Faculty-Banner-Setup.md | 175 ++ src/components/layout/AppHeader.vue | 9 +- src/router/index.ts | 27 + src/views/Activities.vue | 630 +++++++ src/views/CourseDetail.vue | 2630 ++++++++++++++++----------- src/views/Faculty.vue | 606 ++++++ src/views/Resources.vue | 610 +++++++ v1.txt | 0 10 files changed, 3858 insertions(+), 1112 deletions(-) create mode 100644 docs/Activities-Page.md create mode 100644 docs/Banner-Image-Setup.md create mode 100644 docs/Faculty-Banner-Setup.md create mode 100644 src/views/Activities.vue create mode 100644 src/views/Faculty.vue create mode 100644 src/views/Resources.vue delete mode 100644 v1.txt diff --git a/docs/Activities-Page.md b/docs/Activities-Page.md new file mode 100644 index 0000000..2779067 --- /dev/null +++ b/docs/Activities-Page.md @@ -0,0 +1,125 @@ +# 活动页面 (Activities Page) + +## 📋 概述 + +活动页面是在线学习平台的重要组成部分，展示所有可用的学习活动和课程。页面设计完全按照提供的UI设计图实现，包含蓝色横幅区域和活动卡片网格布局。 + +## 🎨 页面结构 + +### 1. 蓝色横幅区域 (Hero Banner) +- **背景**: 蓝色渐变背景 (#4A90E2 到 #357ABD) +- **左侧内容**: + - 分类标签: "理工/消安/药师/中经" + - 主标题: "免费海量题库" + 橙色"小程序"标签 + - 特色说明: "优质试题 | 无需下载 | 随时刷题" +- **右侧**: 插图占位区域（预留给后续图片） +- **装饰元素**: 网格背景纹理 + +### 2. 活动列表区域 +- **标题**: "全部活动" +- **布局**: 3列网格布局（响应式） +- **活动卡片**: 6个相同样式的卡片 + +### 3. 活动卡片设计 +每个卡片包含： +- **头部**: 蓝绿色渐变背景 + - 年份标签: "2025" + - 课程标题: "计算机二级" + - 课程副标题: "C语言讲练综合班" +- **主体内容**: + - 特色标签: "系统备考"、"考点详解"、"题考刷题" + - 课程信息: 证书名称、开课时间、适合年级、报名人数、价格 +- **底部**: 蓝色"查看详情"按钮 + +## 🎯 功能特性 + +### 1. 响应式设计 +- **桌面端**: 3列网格布局 +- **平板端**: 2列网格布局 +- **移动端**: 1列网格布局 + +### 2. 交互效果 +- **卡片悬停**: 阴影加深 + 向上移动 +- **按钮悬停**: 颜色变化 + 轻微上移 +- **加载动画**: 骨架屏效果 + +### 3. 动画效果 +- **页面加载**: 左右滑入动画 +- **卡片显示**: 渐入上移动画（错开延迟） +- **加载状态**: 闪烁骨架屏 + +## 🛠️ 技术实现 + +### 文件结构 +``` +src/views/Activities.vue # 活动页面主组件 +src/router/index.ts # 路由配置 +src/components/layout/AppHeader.vue # 导航栏更新 +``` + +### 核心技术 +- **Vue 3 Composition API**: 组件逻辑 +- **TypeScript**: 类型安全 +- **CSS Grid**: 响应式布局 +- **CSS Animations**: 动画效果 +- **Vue Router**: 路由导航 + +### 样式特点 +- **渐变背景**: 多层次视觉效果 +- **卡片设计**: 现代化卡片样式 +- **颜色系统**: 蓝色主题 + 橙色点缀 +- **字体层级**: 清晰的信息层次 + +## 🔗 导航集成 + +活动页面已集成到主导航栏中： +- 导航项: "活动" (带NEW标签) +- 路由路径: `/activities` +- 页面标题: "全部活动 - 在线学习平台" + +## 📱 响应式断点 + +```css +/* 大屏幕 (>1024px) */ +.activities-grid { grid-template-columns: repeat(3, 1fr); } + +/* 平板 (≤1024px) */ +.activities-grid { grid-template-columns: repeat(2, 1fr); } + +/* 手机 (≤768px) */ +.activities-grid { grid-template-columns: 1fr; } +``` + +## 🎨 设计规范 + +### 颜色规范 +- **主色调**: #4A90E2 (蓝色) +- **辅助色**: #44A08D (蓝绿色) +- **强调色**: #FF6B35 (橙色) +- **文字色**: #333 (深灰) +- **次要文字**: #666 (中灰) + +### 间距规范 +- **容器边距**: 20px (移动端) / 30px (桌面端) +- **卡片间距**: 20px (移动端) / 30px (桌面端) +- **内容边距**: 16px-24px + +### 圆角规范 +- **卡片圆角**: 12px +- **按钮圆角**: 6px +- **标签圆角**: 4px + +## 🚀 使用方法 + +1. **访问页面**: 点击导航栏"活动"或直接访问 `/activities` +2. **浏览活动**: 滚动查看所有可用活动 +3. **查看详情**: 点击"查看详情"按钮（当前为演示功能） +4. **响应式体验**: 在不同设备上自动适配布局 + +## 📝 后续扩展 + +1. **图片集成**: 添加横幅插图和活动图片 +2. **数据接口**: 连接后端API获取真实活动数据 +3. **详情页面**: 实现活动详情页面跳转 +4. **筛选功能**: 添加活动分类和筛选功能 +5. **搜索功能**: 实现活动搜索功能 diff --git a/docs/Banner-Image-Setup.md b/docs/Banner-Image-Setup.md new file mode 100644 index 0000000..3f23538 --- /dev/null +++ b/docs/Banner-Image-Setup.md @@ -0,0 +1,158 @@ +# 活动页面横幅图片设置指南 + +## 📋 概述 + +活动页面的横幅区域已经改为支持一整张图片的形式。目前显示占位内容，您可以按照以下步骤添加横幅图片。 + +## 🖼️ 当前状态 + +- ✅ 横幅区域已改为图片容器 +- ✅ 响应式设计已适配 +- ✅ 占位内容显示中 +- ⏳ 等待提供横幅图片 + +## 📐 图片规格建议 + +### 推荐尺寸 +- **桌面端**: 1200px × 400px +- **平板端**: 1024px × 350px +- **移动端**: 768px × 300px + +### 文件格式 +- **推荐**: JPG/JPEG (文件小，加载快) +- **支持**: PNG (支持透明背景) +- **支持**: WebP (现代浏览器，更小文件) + +### 文件大小 +- **建议**: < 500KB +- **最大**: < 1MB + +## 🚀 添加图片的方法 + +### 方法一：直接替换（推荐） + +1. **将图片文件放到项目中**： + ``` + public/images/activities-banner.jpg + ``` + +2. **修改 Activities.vue 文件**： + ```typescript + // 在 onMounted 中取消注释并设置图片路径 + onMounted(() => { + setTimeout(() => { + loading.value = false + }, 800) + + // 设置横幅图片路径 + setBannerImage('/images/activities-banner.jpg') + }) + ``` + +### 方法二：直接设置变量 + +在 `src/views/Activities.vue` 中找到这一行： +```typescript +const bannerImageSrc = ref('') +``` + +改为： +```typescript +const bannerImageSrc = ref('/images/activities-banner.jpg') +``` + +## 📁 推荐的文件结构 + +``` +public/ +├── images/ +│ ├── activities-banner.jpg # 横幅图片 +│ ├── activities-banner-tablet.jpg # 平板版本（可选） +│ └── activities-banner-mobile.jpg # 移动版本（可选） +``` + +## 🎨 图片内容建议 + +根据原设计图，横幅图片应该包含： +- 蓝色渐变背景 +- "理工/消安/药师/中经" 分类文字 +- "免费海量题库" 主标题 +- "小程序" 橙色标签 +- "优质试题 | 无需下载 | 随时刷题" 特色说明 +- 右侧人物和手机界面插图 + +## 🔧 技术实现细节 + +### 当前代码结构 +```vue + +``` + +### 响应式适配 +- 桌面端：400px 高度 +- 平板端：350px 高度 +- 移动端：300px 高度 +- 小屏手机：250px 高度 + +### CSS 样式 +```css +.banner-image { + width: 100%; + height: 100%; + object-fit: cover; /* 保持比例，裁剪多余部分 */ + object-position: center; /* 居中显示 */ +} +``` + +## ⚡ 性能优化建议 + +1. **图片压缩**: 使用工具压缩图片文件 +2. **懒加载**: 大图片可考虑懒加载 +3. **多尺寸**: 为不同设备提供不同尺寸的图片 +4. **WebP格式**: 现代浏览器使用WebP格式 + +## 🔄 更新步骤 + +当您准备好横幅图片时： + +1. **准备图片文件** + - 确保图片符合推荐规格 + - 压缩图片文件大小 + +2. **上传图片** + - 将图片放到 `public/images/` 目录 + +3. **更新代码** + - 按照上述方法一或方法二设置图片路径 + +4. **测试效果** + - 刷新浏览器查看效果 + - 测试不同设备的显示效果 + +## 📞 需要帮助？ + +如果您在设置横幅图片时遇到任何问题，请： +1. 检查图片路径是否正确 +2. 确认图片文件是否存在 +3. 查看浏览器控制台是否有错误信息 +4. 联系开发人员获取技术支持 + +--- + +**注意**: 当前页面显示占位内容，一旦您提供横幅图片并按照上述步骤设置，占位内容将自动被实际图片替换。 diff --git a/docs/Faculty-Banner-Setup.md b/docs/Faculty-Banner-Setup.md new file mode 100644 index 0000000..ee391c1 --- /dev/null +++ b/docs/Faculty-Banner-Setup.md @@ -0,0 +1,175 @@ +# 师资力量页面横幅图片设置指南 + +## 📋 概述 + +师资力量页面的横幅区域已经改为支持一整张图片的形式。目前显示占位内容，您可以按照以下步骤添加横幅图片。 + +## 🖼️ 当前状态 + +- ✅ 横幅区域已改为图片容器 +- ✅ 响应式设计已适配 +- ✅ 占位内容显示中 +- ⏳ 等待提供横幅图片 + +## 📐 图片规格建议 + +### 推荐尺寸 +- **桌面端**: 1200px × 400px +- **平板端**: 1024px × 350px +- **移动端**: 768px × 300px +- **小屏手机**: 480px × 250px + +### 文件格式 +- **推荐**: JPG/JPEG (文件小，加载快) +- **支持**: PNG (支持透明背景) +- **支持**: WebP (现代浏览器，更小文件) + +### 文件大小 +- **建议**: < 500KB +- **最大**: < 1MB + +## 🚀 添加图片的方法 + +### 方法一：直接替换（推荐） + +1. **将图片文件放到项目中**： + ``` + public/images/faculty-banner.jpg + ``` + +2. **修改 Faculty.vue 文件**： + ```typescript + // 在文件开头找到这一行 + const bannerImageSrc = ref('') + + // 改为 + const bannerImageSrc = ref('/images/faculty-banner.jpg') + ``` + +### 方法二：使用设置方法 + +在 `src/views/Faculty.vue` 中添加初始化代码： +```typescript +import { ref, computed, onMounted } from 'vue' + +// 在组件挂载时设置图片 +onMounted(() => { + setBannerImage('/images/faculty-banner.jpg') +}) +``` + +## 📁 推荐的文件结构 + +``` +public/ +├── images/ +│ ├── faculty-banner.jpg # 师资力量横幅图片 +│ ├── faculty-banner-tablet.jpg # 平板版本（可选） +│ └── faculty-banner-mobile.jpg # 移动版本（可选） +``` + +## 🎨 图片内容建议 + +根据师资力量页面的特点，横幅图片应该包含： +- 专业的教育背景或学术氛围 +- "师资力量"相关的标题文字 +- 可能包含教师形象或教学场景 +- 体现专业性和权威性的设计元素 +- 与整体网站风格保持一致的色调 + +## 🔧 技术实现细节 + +### 当前代码结构 +```vue + +``` + +### 响应式适配 +- **桌面端**: 400px 高度 +- **平板端**: 350px 高度 +- **移动端**: 300px 高度 +- **小屏手机**: 250px 高度 + +### CSS 样式特点 +```css +.banner-image { + width: 100%; + height: 100%; + object-fit: cover; /* 保持比例，裁剪多余部分 */ + object-position: center; /* 居中显示 */ +} + +.banner-placeholder { + background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%); + /* 蓝色渐变背景作为占位 */ +} +``` + +## ⚡ 性能优化建议 + +1. **图片压缩**: 使用工具压缩图片文件 +2. **适当尺寸**: 避免使用过大的图片 +3. **格式选择**: 优先使用JPG格式 +4. **懒加载**: 大图片可考虑懒加载 + +## 🔄 更新步骤 + +当您准备好师资力量横幅图片时： + +1. **准备图片文件** + - 确保图片符合推荐规格 + - 压缩图片文件大小 + - 检查图片内容是否符合师资力量主题 + +2. **上传图片** + - 将图片放到 `public/images/` 目录 + - 确保文件名清晰易懂 + +3. **更新代码** + - 按照上述方法设置图片路径 + - 确保路径正确无误 + +4. **测试效果** + - 访问 `/faculty` 页面查看效果 + - 测试不同设备的显示效果 + - 检查图片加载速度 + +## 🎯 与活动页面的区别 + +师资力量页面与活动页面的横幅设置方法相同，但内容主题不同： +- **活动页面**: 侧重课程活动和学习资源 +- **师资力量页面**: 侧重教师团队和专业实力 + +## 📞 需要帮助？ + +如果您在设置师资力量横幅图片时遇到任何问题，请： +1. 检查图片路径是否正确 +2. 确认图片文件是否存在于 `public/images/` 目录 +3. 查看浏览器控制台是否有错误信息 +4. 确保图片格式被浏览器支持 +5. 联系开发人员获取技术支持 + +## 🔗 相关页面 + +- [活动页面横幅设置指南](./Banner-Image-Setup.md) +- [师资力量页面功能说明](./Faculty-Page.md) + +--- + +**注意**: 当前页面显示占位内容，一旦您提供师资力量横幅图片并按照上述步骤设置，占位内容将自动被实际图片替换。页面访问地址：`http://localhost:3000/faculty` diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue index bad33c5..d620727 100644 --- a/src/components/layout/AppHeader.vue +++ b/src/components/layout/AppHeader.vue @@ -195,16 +195,13 @@ const handleMenuSelect = (key: string) => { router.push('/') break case 'faculty': - // 暂时跳转到首页 - router.push('/') + router.push('/faculty') break case 'resources': - // 暂时跳转到首页 - router.push('/') + router.push('/resources') break case 'activities': - // 暂时跳转到首页 - router.push('/') + router.push('/activities') break } } diff --git a/src/router/index.ts b/src/router/index.ts index d8d92e1..5ba388a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -10,6 +10,9 @@ import Profile from '@/views/Profile.vue' import Login from '@/views/Login.vue' import Register from '@/views/Register.vue' import LearningPaths from '@/views/LearningPaths.vue' +import Faculty from '@/views/Faculty.vue' +import Resources from '@/views/Resources.vue' +import Activities from '@/views/Activities.vue' const routes: RouteRecordRaw[] = [ { @@ -78,6 +81,30 @@ const routes: RouteRecordRaw[] = [ title: '学习路径' } }, + { + path: '/faculty', + name: 'Faculty', + component: Faculty, + meta: { + title: '师资力量' + } + }, + { + path: '/resources', + name: 'Resources', + component: Resources, + meta: { + title: '精选资源' + } + }, + { + path: '/activities', + name: 'Activities', + component: Activities, + meta: { + title: '全部活动' + } + }, { path: '/:pathMatch(.*)*', name: 'NotFound', diff --git a/src/views/Activities.vue b/src/views/Activities.vue new file mode 100644 index 0000000..1badecc --- /dev/null +++ b/src/views/Activities.vue @@ -0,0 +1,630 @@ + + + + + diff --git a/src/views/CourseDetail.vue b/src/views/CourseDetail.vue index dc4bbaa..0e3862b 100644 --- a/src/views/CourseDetail.vue +++ b/src/views/CourseDetail.vue @@ -1,64 +1,9 @@ + + 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/v1.txt b/v1.txt deleted file mode 100644 index e69de29..0000000