# 首页设计说明

## 🎨 设计概述

我已经根据您提供的图片，完全重新设计了首页，使其与原图样式完全一致。新的首页包含以下几个主要区域：

## 📋 页面结构

### 1. 主横幅区域 (Hero Banner)
- **蓝色渐变背景**: 使用了从 `#4facfe` 到 `#00f2fe` 的渐变效果
- **左侧内容**:
  - 限时优惠标签 (半透明白色背景)
  - 主标题: "考前冲刺课" (大字体，白色)
  - 副标题: "名师授课 · 79元"
  - 橙色CTA按钮: "立即抢购"
- **右侧内容**:
  - 4个讲师头像，采用2x2网格布局
  - 圆形头像，带白色边框和阴影效果

### 2. 数据统计区域 (Stats Section)
- **白色背景**，带阴影效果
- **5列网格布局**:
  - 前4列: 图标 + 数据展示
    - 精品课程: 1000+ (蓝色图标)
    - 名师团队: 100+ (绿色图标)
    - 学员好评: 5000+ (黄色图标)
    - 学习时长: 8000+ (红色图标)
  - 第5列: 特殊卡片 "2024年全新升级" (紫色渐变背景)

### 3. 热门课程区域 (Popular Courses)
- **白色背景**
- **标题**: "热门课程" + "查看全部"链接
- **5列网格布局**，每个课程卡片包含:
  - 课程缩略图
  - 课程分类标签
  - 课程标题
  - 学习人数和评分
  - 价格信息 (当前价格 + 原价)

### 4. 免费试听区域 (Free Trial)
- **浅灰色背景** (#f8f9fa)
- **标题**: "免费试听" + "查看全部"链接
- **4列网格布局**，每个试听卡片包含:
  - 视频缩略图 + 播放按钮
  - 视频标题和描述
  - 时长和观看次数

### 5. 学习路径区域 (Learning Paths)
- **白色背景**
- **标题**: "学习路径" + "查看全部"链接
- **3列网格布局**，每个路径卡片包含:
  - 路径图标和基本信息
  - 课程数量和学员数量
  - 技能标签
  - "开始学习"按钮

### 6. 精品讲师区域 (Featured Instructors)
- **浅灰色背景** (#f8f9fa)
- **标题**: "精品讲师"
- **3列网格布局**，每个讲师卡片包含:
  - 圆形讲师头像
  - 讲师姓名和职位
  - 个人简介
  - 课程数量和学员数量

## 🎯 设计特点

### 颜色方案
- **主色调**: 蓝色渐变 (#4facfe → #00f2fe)
- **强调色**: 橙色 (#ff6b35) 用于CTA按钮
- **背景色**: 白色和浅灰色 (#f8f9fa) 交替
- **文字色**: 深灰色 (#333) 主文字，中灰色 (#666) 辅助文字

### 布局特点
- **响应式设计**: 支持桌面端、平板和移动端
- **网格布局**: 使用CSS Grid实现灵活的多列布局
- **卡片设计**: 统一的卡片样式，带圆角和阴影
- **悬停效果**: 所有交互元素都有悬停动画

### 交互效果
- **卡片悬停**: 向上移动 + 阴影加深
- **按钮悬停**: 颜色变化和过渡动画
- **图片加载**: 占位符图片，等待真实素材替换

## 📱 响应式适配

### 桌面端 (>1200px)
- 完整的多列布局
- 所有内容正常显示

### 平板端 (768px-1200px)
- 适当减少列数
- 保持良好的视觉效果

### 移动端 (<768px)
- 单列或双列布局
- 优化触摸交互
- 调整字体大小和间距

## 🔄 待替换内容

目前使用的是占位符内容，等您提供真实素材后需要替换：

1. **图片素材**:
   - 讲师头像
   - 课程缩略图
   - 视频预览图
   - 学习路径图标

2. **文字内容**:
   - 课程标题和描述
   - 讲师信息
   - 价格信息
   - 统计数据

## 🚀 技术实现

- **Vue 3 Composition API**: 现代化的组件开发
- **TypeScript**: 类型安全
- **Naive UI**: 统一的UI组件
- **CSS Grid & Flexbox**: 灵活的布局系统
- **CSS变量**: 便于主题定制

页面已经完全按照您提供的图片样式实现，现在可以访问 http://localhost:3000 查看效果！