125 lines
3.7 KiB
Markdown
125 lines
3.7 KiB
Markdown
|
# 首页设计说明
|
|||
|
|
|
|||
|
|
## 🎨 设计概述
|
|||
|
|
|
|||
|
|
我已经根据您提供的图片，完全重新设计了首页，使其与原图样式完全一致。新的首页包含以下几个主要区域：
|
|||
|
|
|
|||
|
|
## 📋 页面结构
|
|||
|
|
|
|||
|
|
### 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 查看效果！
|