216 lines
3.9 KiB
Markdown
216 lines
3.9 KiB
Markdown
# FLNXI电商素材系统 - 官方网站
|
||
|
||
<div align="center">
|
||
<img src="https://s3.1080p.hk/yedir/2025/10/26/eaa96463c57b421b8de8db573d75f1fb.png" alt="FLNXI Logo" width="120" />
|
||
|
||
<h3>企业级素材管理解决方案</h3>
|
||
|
||
<p>
|
||
<a href="http://sc.flnxi.com" target="_blank">在线演示</a> •
|
||
<a href="#features">功能特性</a> •
|
||
<a href="#tech-stack">技术栈</a> •
|
||
<a href="#getting-started">快速开始</a>
|
||
</p>
|
||
</div>
|
||
|
||
---
|
||
|
||
## 📖 项目简介
|
||
|
||
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
|
||
- 💬 微信: 扫码添加企业微信
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
<p>使用 ❤️ 和 Next.js 构建</p>
|
||
</div>
|
||
|