mirror of
https://github.com/iflytek/skillhub.git
synced 2026-08-28 11:25:00 +00:00
55 lines
1.6 KiB
Markdown
55 lines
1.6 KiB
Markdown
# 落地页预览说明
|
||
|
||
## 如何查看
|
||
|
||
1. 启动开发服务器：
|
||
```bash
|
||
cd web
|
||
npm run dev
|
||
```
|
||
|
||
2. 访问 `http://localhost:5173`
|
||
|
||
## 页面特性
|
||
|
||
### 动态效果
|
||
- 背景粒子动画会自动运行
|
||
- 鼠标悬停在特性卡片上会有缩放和颜色变化
|
||
- 按钮有渐变和阴影效果
|
||
- 搜索栏有光晕效果
|
||
|
||
### 响应式设计
|
||
- 移动端：单列布局，较小字体
|
||
- 平板：2列特性卡片
|
||
- 桌面：3列特性卡片，大标题
|
||
|
||
### 交互元素
|
||
- "探索技能" 按钮 → 跳转到搜索页面
|
||
- "发布技能" 按钮 → 跳转到发布页面
|
||
- 搜索栏 → 输入后跳转到搜索结果
|
||
- 统计数字 → 悬停有渐变效果
|
||
|
||
## 与原首页的区别
|
||
|
||
| 特性 | 原首页 | 新落地页 |
|
||
|------|--------|----------|
|
||
| 主要内容 | 技能列表（热门/最新） | 产品介绍和特性展示 |
|
||
| 视觉风格 | 简洁卡片式 | 科技感渐变 + 粒子动画 |
|
||
| 配色 | 浅色为主 | 深色主题 + 霓虹色 |
|
||
| 目标 | 快速浏览技能 | 吸引新用户了解产品 |
|
||
| 路由 | `/` | `/`（新），原首页移至 `/skills` |
|
||
|
||
## 设计亮点
|
||
|
||
1. **粒子连接动画**：80个粒子节点，距离小于120px时自动连线，透明度随距离变化
|
||
2. **渐变文字**：标题使用 cyan → blue → violet 三色渐变
|
||
3. **光晕效果**：搜索栏和背景有模糊的光晕装饰
|
||
4. **分层动画**：不同元素有不同的延迟时间，形成层次感
|
||
5. **悬浮交互**：卡片悬停时会上浮并显示边框高亮
|
||
|
||
## 技术细节
|
||
|
||
- 粒子系统使用 Canvas 2D API
|
||
- 动画使用 CSS animations 和 transitions
|
||
- 响应式使用 Tailwind 的 breakpoint 系统
|
||
- 字体通过 Google Fonts CDN 加载
|