3.7 KiB
3.7 KiB
活动页面 (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 - 页面标题: "全部活动 - 在线学习平台"
📱 响应式断点
/* 大屏幕 (>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
🚀 使用方法
- 访问页面: 点击导航栏"活动"或直接访问
/activities - 浏览活动: 滚动查看所有可用活动
- 查看详情: 点击"查看详情"按钮（当前为演示功能）
- 响应式体验: 在不同设备上自动适配布局
📝 后续扩展
- 图片集成: 添加横幅插图和活动图片
- 数据接口: 连接后端API获取真实活动数据
- 详情页面: 实现活动详情页面跳转
- 筛选功能: 添加活动分类和筛选功能
- 搜索功能: 实现活动搜索功能