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