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
安装依赖
npm install
# 或
yarn install
# 或
pnpm install
开发模式
npm run dev
# 或
yarn dev
# 或
pnpm dev
访问 http://localhost:3000 查看网站
构建生产版本
npm run build
npm start
🐳 Docker部署
构建镜像
docker build -t flnxi-website .
运行容器
docker run -p 3000:3000 flnxi-website
Docker Compose
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：
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
- 💬 微信: 扫码添加企业微信
使用 ❤️ 和 Next.js 构建