359 lines
8.9 KiB
Markdown
359 lines
8.9 KiB
Markdown
# turingflow-landing-003
|
|
|
|
圣诞节/节日主题单页落地页，适用于促销活动、节日营销、优惠券发放等场景。
|
|
|
|
## 技术栈
|
|
|
|
- React 19.0.0 (已锁定版本)
|
|
- Vite 7.2.4
|
|
- Tailwind CSS 4.1.18
|
|
- Font Awesome 4.7 (图标)
|
|
- Google Fonts (Varela, Muli, Great Vibes, Marmelad)
|
|
|
|
## 快速开始
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm run dev
|
|
```
|
|
|
|
开发服务器运行在 `http://localhost:3000`
|
|
|
|
## 目录结构
|
|
|
|
```text
|
|
turingflow-landing-003/
|
|
├── public/ # 静态资源
|
|
│ ├── img/ # 图片资源
|
|
│ │ ├── iconlogo.png # 导航栏 Logo
|
|
│ │ ├── homeimg.png # Header 区域主图 (手机展示图)
|
|
│ │ ├── pic1.jpg # Header 背景图
|
|
│ │ ├── pic2.jpg # Contact 区域背景图
|
|
│ │ ├── gift.png # 优惠券礼物图标
|
|
│ │ ├── sep.png # FAQ 分隔符图片
|
|
│ │ ├── button-available.png # App Store 按钮
|
|
│ │ ├── button-googleplay.png # Google Play 按钮
|
|
│ │ ├── particules_medium.png # 雪花粒子 (中)
|
|
│ │ └── particules_small.png # 雪花粒子 (小)
|
|
│ └── audio/
|
|
│ └── audio.mp3 # 背景音乐
|
|
├── src/
|
|
│ ├── App.jsx # 主应用 (包含所有页面组件)
|
|
│ ├── index.css # 全局样式 + 响应式断点
|
|
│ └── main.jsx # 入口文件
|
|
├── index.html # HTML 模板
|
|
├── vite.config.js # Vite 配置
|
|
└── package.json # 依赖配置
|
|
```
|
|
|
|
## 页面结构
|
|
|
|
单页应用，包含以下区域 (从上到下):
|
|
|
|
| 区域 | 组件名 | Section ID | 说明 |
|
|
|------|--------|------------|------|
|
|
| 雪花动画 | `Illustration` | - | 固定背景，雪花下落动画 |
|
|
| 导航栏 | `Navbar` | - | 固定顶部，滚动时变色 |
|
|
| 头部 | `Header` | `#page-top` | Hero 区域，主标题 + 下载按钮 + 社交图标 |
|
|
| 优惠券 | `CouponSection` | `#coupon` | 促销优惠券展示 |
|
|
| FAQ | `FAQSection` | `#faq` | 常见问题，两列布局 |
|
|
| 联系 | `ContactSection` | `#contact` | 联系表单 |
|
|
| 页脚 | `Footer` | - | 版权信息 + 链接 |
|
|
|
|
## 组件说明
|
|
|
|
### App.jsx 组件结构
|
|
|
|
```jsx
|
|
// 主应用入口
|
|
function App() {
|
|
return (
|
|
<>
|
|
<Illustration /> // 雪花粒子动画背景
|
|
<Navbar /> // 固定导航栏
|
|
<Header /> // Hero 区域
|
|
<CouponSection /> // 优惠券区域
|
|
<FAQSection /> // FAQ 区域
|
|
<ContactSection /> // 联系表单
|
|
<Footer /> // 页脚
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Navbar 导航栏
|
|
|
|
```jsx
|
|
// 导航菜单项 (位于 Navbar 组件内)
|
|
const menuItems = [
|
|
{ text: "Special Offer", href: "#coupon" },
|
|
{ text: "F.A.Q.", href: "#faq" },
|
|
{ text: "Contact", href: "#contact" },
|
|
{ text: "Download", href: "#", highlight: true }
|
|
]
|
|
```
|
|
|
|
**功能特性:**
|
|
|
|
- 滚动超过 50px 时添加 `affix` 类，背景变白
|
|
- 平滑滚动到对应区域
|
|
- 移动端显示汉堡菜单
|
|
|
|
### CouponSection 优惠券
|
|
|
|
```jsx
|
|
// 优惠券数据 (位于 CouponSection 组件内)
|
|
const couponData = {
|
|
title: "December Only",
|
|
subtitle: "Get your discount, available in stores this month only",
|
|
discount: "50% Off All Products!",
|
|
code: "HOLIDAY50",
|
|
description: "Use this coupon code at checkout...",
|
|
buttonText: "Shop Now"
|
|
}
|
|
```
|
|
|
|
### FAQSection 常见问题
|
|
|
|
```jsx
|
|
// FAQ 数据 (位于 FAQSection 组件内)
|
|
const faqs = [
|
|
{ question: "How soon do I get my item?", answer: "..." },
|
|
{ question: "Is there a free shipping?", answer: "..." },
|
|
{ question: "Can I get several discounts?", answer: "..." },
|
|
{ question: "Do you deliver it as a gift?", answer: "..." },
|
|
{ question: "What payment methods?", answer: "..." },
|
|
{ question: "I have a different question?", answer: "..." }
|
|
]
|
|
```
|
|
|
|
### ContactSection 联系表单
|
|
|
|
**表单字段:**
|
|
|
|
- `name` - 姓名 (必填)
|
|
- `email` - 邮箱 (必填，格式验证)
|
|
- `comment` - 留言内容 (必填)
|
|
|
|
**状态管理:**
|
|
|
|
- `formData` - 表单数据
|
|
- `errors` - 验证错误
|
|
- `showSuccess` - 提交成功提示
|
|
|
|
## 样式说明
|
|
|
|
### CSS 类命名约定
|
|
|
|
| 类名 | 用途 |
|
|
|------|------|
|
|
| `.navbar-default` | 导航栏基础样式 |
|
|
| `.navbar-default.affix` | 导航栏滚动后样式 (白色背景) |
|
|
| `.nav-link` | 导航链接 |
|
|
| `.nav-link.active` | 当前激活的导航链接 |
|
|
| `.menuhighlight` | 高亮按钮 (Download) |
|
|
| `.header-content-inner` | Header 内容容器 |
|
|
| `.couponsection` | 优惠券区域 |
|
|
| `.coupon` | 优惠券卡片 (虚线边框) |
|
|
| `.btn-buynow` | 购买按钮 |
|
|
| `.social a` | 社交图标 |
|
|
|
|
### 响应式断点
|
|
|
|
| 断点 | 尺寸 | 说明 |
|
|
|------|------|------|
|
|
| xs | < 480px | 手机竖屏 |
|
|
| sm | 480-575px | 手机横屏 |
|
|
| md | 576-767px | 平板竖屏 |
|
|
| lg | 768-991px | 平板横屏 |
|
|
| xl | 992-1199px | 小桌面 |
|
|
| xxl | >= 1200px | 大桌面 |
|
|
|
|
### 主题色
|
|
|
|
```css
|
|
/* 主要颜色 (在 index.css 中定义) */
|
|
--primary: #bb0000; /* 品牌红色 */
|
|
--primary-hover: #aa0000; /* 悬停红色 */
|
|
--accent: #fdcc52; /* 强调黄色 */
|
|
--coupon-bg: #37488a; /* 优惠券区域蓝色 */
|
|
--dark: #111; /* 深色背景 */
|
|
```
|
|
|
|
## 常见修改任务
|
|
|
|
### 修改网站标题和 Logo
|
|
|
|
1. 编辑 `index.html` 中的 `<title>` 标签
|
|
2. 替换 `public/img/iconlogo.png` 图片
|
|
3. 修改 `src/App.jsx` 中 `Navbar` 组件的品牌名称:
|
|
|
|
```jsx
|
|
// src/App.jsx - Navbar 组件内
|
|
<a className="navbar-brand" ...>
|
|
<img className="iconlogo" src="/img/iconlogo.png" width="50" alt="Logo" />
|
|
ZU CHRISTMAS {/* 修改这里 */}
|
|
</a>
|
|
```
|
|
|
|
### 修改导航菜单
|
|
|
|
编辑 `src/App.jsx` 中 `Navbar` 组件的菜单列表:
|
|
|
|
```jsx
|
|
// src/App.jsx - Navbar 组件内
|
|
<ul className="nav-links">
|
|
<li><a href="#coupon">Special Offer</a></li> {/* 修改文字和链接 */}
|
|
<li><a href="#faq">F.A.Q.</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
<li><a href="#" className="menuhighlight">Download</a></li>
|
|
</ul>
|
|
```
|
|
|
|
### 修改 Header 主标题
|
|
|
|
编辑 `src/App.jsx` 中 `Header` 组件:
|
|
|
|
```jsx
|
|
// src/App.jsx - Header 组件内
|
|
<h1>Merry Holidays</h1> {/* 主标题 */}
|
|
<h4>Make your visitors smile...</h4> {/* 副标题 */}
|
|
```
|
|
|
|
### 修改优惠券信息
|
|
|
|
编辑 `src/App.jsx` 中 `CouponSection` 组件:
|
|
|
|
```jsx
|
|
// src/App.jsx - CouponSection 组件内
|
|
<h2 className="title section-heading">December Only</h2> {/* 标题 */}
|
|
<h3>50% Off All Products!</h3> {/* 折扣信息 */}
|
|
<h4>Coupon Code: <span>HOLIDAY50</span></h4> {/* 优惠码 */}
|
|
```
|
|
|
|
### 修改 FAQ 内容
|
|
|
|
编辑 `src/App.jsx` 中 `FAQSection` 组件的 `faqs` 数组:
|
|
|
|
```jsx
|
|
// src/App.jsx - FAQSection 组件内
|
|
const faqs = [
|
|
{ question: "问题1?", answer: "回答1..." },
|
|
{ question: "问题2?", answer: "回答2..." },
|
|
// 添加或修改问题
|
|
]
|
|
```
|
|
|
|
### 修改页脚版权信息
|
|
|
|
编辑 `src/App.jsx` 中 `Footer` 组件:
|
|
|
|
```jsx
|
|
// src/App.jsx - Footer 组件内
|
|
<p>© 2025 Your Company Name. All Rights Reserved.</p>
|
|
```
|
|
|
|
### 修改背景图片
|
|
|
|
替换 `public/img/` 目录下的图片文件:
|
|
|
|
- `pic1.jpg` - Header 背景
|
|
- `pic2.jpg` - Contact 背景
|
|
- `homeimg.png` - 手机展示图
|
|
|
|
### 修改主题颜色
|
|
|
|
编辑 `src/index.css` 中的颜色值:
|
|
|
|
```css
|
|
/* 品牌红色 */
|
|
.navbar-brand { color: #bb0000; }
|
|
.btn-buynow { background: #900d0d; }
|
|
|
|
/* 优惠券区域蓝色 */
|
|
section.couponsection { background: #37488a; }
|
|
|
|
/* 强调黄色 */
|
|
.nav-link:hover { color: #fdcc52; }
|
|
```
|
|
|
|
### 禁用背景音乐
|
|
|
|
删除或注释 `src/App.jsx` 中 `Header` 组件的 audio 元素:
|
|
|
|
```jsx
|
|
// src/App.jsx - Header 组件内
|
|
{/* 删除或注释以下代码 */}
|
|
<div className="audioembed">
|
|
<audio ref={audioRef} controls autoPlay src="/audio/audio.mp3" />
|
|
</div>
|
|
```
|
|
|
|
### 添加新的页面区域
|
|
|
|
在 `src/App.jsx` 中添加新组件:
|
|
|
|
```jsx
|
|
// 1. 创建新组件
|
|
function NewSection() {
|
|
return (
|
|
<section id="new-section">
|
|
<div className="container">
|
|
{/* 内容 */}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
// 2. 在 App 组件中使用
|
|
function App() {
|
|
return (
|
|
<>
|
|
...
|
|
<NewSection /> {/* 添加到合适位置 */}
|
|
...
|
|
</>
|
|
)
|
|
}
|
|
|
|
// 3. 在 Navbar 中添加导航链接
|
|
<li><a href="#new-section">New Section</a></li>
|
|
```
|
|
|
|
## 图片资源
|
|
|
|
| 文件 | 尺寸建议 | 用途 |
|
|
|------|----------|------|
|
|
| iconlogo.png | 50x50px | 导航栏 Logo |
|
|
| homeimg.png | 400x800px | Header 手机展示图 |
|
|
| pic1.jpg | 1920x1080px | Header 背景 |
|
|
| pic2.jpg | 1920x1080px | Contact 背景 |
|
|
| gift.png | 100x100px | 优惠券图标 |
|
|
| button-*.png | 150x50px | 下载按钮 |
|
|
|
|
## 构建部署
|
|
|
|
```bash
|
|
# 构建生产版本
|
|
pnpm run build
|
|
|
|
# 预览生产版本
|
|
pnpm run preview
|
|
```
|
|
|
|
构建产物位于 `dist/` 目录。
|
|
|
|
## 服务器配置
|
|
|
|
```javascript
|
|
// vite.config.js
|
|
export default defineConfig({
|
|
plugins: [react(), tailwindcss()],
|
|
server: {
|
|
port: 3000,
|
|
allowedHosts: true,
|
|
host: "0.0.0.0"
|
|
},
|
|
})
|
|
```
|