3.7 KiB
3.7 KiB
首页设计说明
🎨 设计概述
我已经根据您提供的图片，完全重新设计了首页，使其与原图样式完全一致。新的首页包含以下几个主要区域：
📋 页面结构
1. 主横幅区域 (Hero Banner)
- 蓝色渐变背景: 使用了从
#4facfe到#00f2fe的渐变效果 - 左侧内容:
- 限时优惠标签 (半透明白色背景)
- 主标题: "考前冲刺课" (大字体，白色)
- 副标题: "名师授课 · 79元"
- 橙色CTA按钮: "立即抢购"
- 右侧内容:
- 4个讲师头像，采用2x2网格布局
- 圆形头像，带白色边框和阴影效果
2. 数据统计区域 (Stats Section)
- 白色背景，带阴影效果
- 5列网格布局:
- 前4列: 图标 + 数据展示
- 精品课程: 1000+ (蓝色图标)
- 名师团队: 100+ (绿色图标)
- 学员好评: 5000+ (黄色图标)
- 学习时长: 8000+ (红色图标)
- 第5列: 特殊卡片 "2024年全新升级" (紫色渐变背景)
- 前4列: 图标 + 数据展示
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)
- 单列或双列布局
- 优化触摸交互
- 调整字体大小和间距
🔄 待替换内容
目前使用的是占位符内容，等您提供真实素材后需要替换：
-
图片素材:
- 讲师头像
- 课程缩略图
- 视频预览图
- 学习路径图标
-
文字内容:
- 课程标题和描述
- 讲师信息
- 价格信息
- 统计数据
🚀 技术实现
- Vue 3 Composition API: 现代化的组件开发
- TypeScript: 类型安全
- Naive UI: 统一的UI组件
- CSS Grid & Flexbox: 灵活的布局系统
- CSS变量: 便于主题定制
页面已经完全按照您提供的图片样式实现，现在可以访问 http://localhost:3000 查看效果！