126 lines
3.7 KiB
Markdown
126 lines
3.7 KiB
Markdown
# 活动页面 (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. **搜索功能**: 实现活动搜索功能
|