# FLNXI电商素材系统 - 官方网站
---
## 📖 项目简介
FLNXI电商素材系统官方网站，采用苹果官方UI设计规范，展示系统功能特性、技术规格和定价方案。
### 核心特点
- 🎨 **苹果风格设计** - 遵循Apple Design Guidelines
- ⚡ **性能优化** - Next.js 14 + React 18
- 📱 **响应式布局** - 完美适配各种设备
- 🎭 **流畅动画** - Framer Motion动画效果
- 🔍 **SEO优化** - 完整的Meta标签和结构化数据
---
## ✨ 功能特性
### 页面模块
- **Hero区域** - 醒目的标题和CTA按钮
- **功能展示** - 8大核心功能介绍
- **技术规格** - 详细的系统要求和技术架构
- **定价方案** - 标准版和定制版选择
- **联系方式** - 多种沟通渠道
- **响应式导航** - 桌面端和移动端适配
### UI特点
- 玻璃态效果（Glassmorphism）
- 流畅的滚动动画
- 悬停交互效果
- 渐变色彩搭配
- 阴影和模糊效果
---
## 🛠️ 技术栈
- **框架**: Next.js 14 (App Router)
- **UI库**: React 18
- **样式**: Tailwind CSS 3
- **动画**: Framer Motion
- **图标**: Lucide React
- **语言**: TypeScript
- **部署**: Docker
---
## 🚀 快速开始
### 环境要求
- Node.js 18+
- npm 或 yarn 或 pnpm
### 安装依赖
```bash
npm install
# 或
yarn install
# 或
pnpm install
```
### 开发模式
```bash
npm run dev
# 或
yarn dev
# 或
pnpm dev
```
访问 [http://localhost:3000](http://localhost:3000) 查看网站
### 构建生产版本
```bash
npm run build
npm start
```
---
## 🐳 Docker部署
### 构建镜像
```bash
docker build -t flnxi-website .
```
### 运行容器
```bash
docker run -p 3000:3000 flnxi-website
```
### Docker Compose
```bash
docker-compose up -d
```
---
## 📁 项目结构
```
xiaso/
├── app/
│ ├── globals.css # 全局样式
│ ├── layout.tsx # 根布局
│ └── page.tsx # 主页
├── components/
│ ├── Header.tsx # 页头导航
│ ├── Hero.tsx # 英雄区
│ ├── Features.tsx # 功能特性
│ ├── TechSpecs.tsx # 技术规格
│ ├── Pricing.tsx # 定价方案
│ ├── Contact.tsx # 联系方式
│ └── Footer.tsx # 页脚
├── public/ # 静态资源
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.js
```
---
## 🎨 设计规范
本网站严格遵循**苹果官方UI设计规范**：
### 颜色系统
- 主色调：Apple Blue (#0071e3)
- 灰度：Apple Gray系列
- 渐变：蓝色到紫色
### 字体
- SF Pro Display / SF Pro Text
- -apple-system字体栈
### 间距
- 使用4px基准网格
- 大量留白空间
### 动画
- 缓动曲线：ease-out
- 时长：300-600ms
- 微交互反馈
---
## 🔧 自定义配置
### 修改品牌信息
编辑 `app/layout.tsx` 中的metadata：
```typescript
export const metadata: Metadata = {
title: '你的网站标题',
description: '你的网站描述',
// ...
}
```
### 修改Logo
替换 `next.config.js` 中的图片URL，或将Logo放入 `public/` 目录
### 修改配色
编辑 `tailwind.config.ts` 中的颜色配置
---
## 📝 许可证
Copyright © 2025 FLNXI. 保留所有权利。
---
## 📞 联系我们
- 📧 Email: contact@flnxi.com
- 🌐 演示站: http://sc.flnxi.com
- 💬 微信: 扫码添加企业微信
---
