novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复 lint 错误

Browse Source 
- 修复 Input/Textarea 组件中 React Hook 条件调用问题
- 修复 AboutSection 中的引号转义问题
- 更新 Input/Textarea 样式为医疗健康风格
This commit is contained in:
张翔
2026-02-23 08:16:36 +08:00
parent ef4b6d1022
commit 8d0f86c365
332 changed files with 3846 additions and 1834 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plans/2026-02-22-wickret-chinese-style-design.md
+446
View File
@@ -0,0 +1,446 @@
# Novalon 官网设计方案 - 金融科技中国风融合版
**设计日期：** 2026-02-22
**设计风格：** 金融科技风 + 中国传统美学融合
**项目目标：** 融合 Wickret 金融科技设计语言 + 中国传统印章元素，打造兼具国际视野与文化底蕴的企业官网
---
## 一、设计理念与品牌定位
### 1.1 核心概念
**"数字印章，智连未来"**
将中国传统印章（诚信、权威、稳重）的意象与现代金融科技（创新、安全、高效）相结合，形成独特的设计语言。
### 1.2 设计风格定位
| 维度 | 融合方案 |
|------|---------|
| **国际视野** | Wickret 金融科技风格 - 深色背景、渐变光晕、专业简洁 |
| **文化底蕴** | 中国传统印章元素 - 红色点缀、方正布局、留白意境 |
| **科技感** | 现代渐变色彩 - 科技蓝、紫罗兰、粉紫渐变 |
| **情感连接** | 温暖而有力量 - 红色传递热情与信任 |
### 1.3 设计原则
1. **色彩平衡** - 科技蓝紫为主色调（70%），印章红为点缀色（20%），中性灰为辅助（10%）
2. **层次分明** - 借鉴 Wickret 的信息层次设计，大标题 + 关键点 + 详情
3. **动静结合** - 优雅的微动效，不过度炫技，注重体验流畅
4. **留白呼吸** - 借鉴东方美学的大面积留白，让信息有呼吸空间
---
## 二、色彩系统
### 2.1 配色比例
```
┌─────────────────────────────────────────────────────────┐
│ 主色调（科技渐变） 70% 深色背景 + 蓝紫渐变 │
│ 品牌色（印章红） 20% 点缀、CTA、强调 │
│ 辅助色（中性灰） 10% 文字、边框、次要信息 │
└─────────────────────────────────────────────────────────┘
```
### 2.2 核心配色
#### 深色背景（主背景）
```css
--bg-primary: #0A0A0A /* 主背景 - 深黑 */
--bg-secondary: #141414 /* 次级背景 - 炭黑 */
--bg-tertiary: #1A1A1A /* 卡片背景 - 深灰 */
--bg-elevated: #242424 /* 悬停状态 - 中灰 */
```
#### 科技渐变色系（70%）
```css
--tech-blue: #00D9FF /* 电光蓝 - 主交互色 */
--tech-blue-hover: #00B8D9 /* 悬停态 */
--tech-purple: #A855F7 /* 霓虹紫 - 渐变终点 */
--tech-purple-hover: #9333EA
--tech-pink: #D946EF /* 粉紫 - 渐变中间色 */
--tech-cyan: #06B6D4 /* 青色 - 点缀 */
```
**渐变组合：**
- 主渐变：`linear-gradient(135deg, #00D9FF 0%, #A855F7 50%, #D946EF 100%)`
- 柔和渐变：`linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)`
- 光晕效果：`radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.15) 0%, transparent 50%)`
#### 印章红色系（20%）
```css
--brand-primary: #C41E3A /* 印章红 - 主品牌色 */
--brand-hover: #A01830 /* 悬停态 */
--brand-light: #E04A68 /* 浅色点缀 */
--brand-glow: rgba(196, 30, 58, 0.4) /* 发光效果 */
```
**使用场景：**
- Logo/图标
- CTA 按钮（主按钮）
- 重要数据强调
- 装饰性点缀元素
- 悬停高亮
#### 中性灰色系（10%）
```css
--text-primary: #FAFAFA /* 主文字 - 近白 */
--text-secondary: #D4D4D4 /* 次级文字 - 浅灰 */
--text-tertiary: #A3A3A3 /* 辅助文字 - 中灰 */
--text-muted: #737373 /* 禁用/提示 - 深灰 */
--border-default: #262626 /* 默认边框 */
--border-hover: #333333 /* 悬停边框 */
--border-accent: #00D9FF /* 聚焦边框 */
```
### 2.3 浅色模式配色（可选）
```css
--bg-primary-light: #FFFFFF
--bg-secondary-light: #FAFAFA
--text-primary-light: #171717
--text-secondary-light: #525252
--brand-primary-light: #C41E3A
```
---
## 三、页面布局设计
### 3.1 首页整体结构
```
┌────────────────────────────────────────────────────────────┐
│ HEADER (64px) │
│ [Logo] [首页] [产品] [解决方案] [案例] [关于] [CTA] │
├────────────────────────────────────────────────────────────┤
│ │
│ HERO SECTION (100vh) │
│ │
│ ┌─────────────────────┐ ┌──────────────────────────┐ │
│ │ │ │ │ │
│ │ 主标题文案 │ │ 动态视觉元素 │ │
│ │ 副标题描述 │ │ - 光晕渐变 │ │
│ │ CTA 按钮组 │ │ - 抽象图形 │ │
│ │ 特性标签 │ │ - 微妙动效 │ │
│ │ │ │ │ │
│ └─────────────────────┘ └──────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────┤
│ SERVICES SECTION │
│ [图标] 服务领域1 [图标] 服务领域2 [图标] ... │
├────────────────────────────────────────────────────────────┤
│ PRODUCTS SECTION │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 产品卡1 │ │ 产品卡2 │ │ 产品卡3 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├────────────────────────────────────────────────────────────┤
│ ABOUT SECTION │
│ ┌──────────────┐ ┌─────────────────────────────────┐ │
│ │ 关于我们 │ │ 核心数据 / 成就展示 │ │
│ │ 企业理念 │ │ [数字动画] │ │
│ └──────────────┘ └─────────────────────────────────┘ │
├────────────────────────────────────────────────────────────┤
│ NEWS SECTION │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 新闻卡1 │ │ 新闻卡2 │ │ 新闻卡3 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├────────────────────────────────────────────────────────────┤
│ CONTACT SECTION │
│ [联系表单] [联系信息] │
├────────────────────────────────────────────────────────────┤
│ FOOTER │
│ [Logo] [导航链接] [社交媒体] [版权信息] │
└────────────────────────────────────────────────────────────┘
```
### 3.2 Hero 区域设计
#### 布局结构
- **高度：** 100vh（首屏全屏）
- **左右比例：** 60% 文案 / 40% 视觉元素
#### 视觉层次
**背景层：**
1. 深色底 `#0A0A0A`
2. 微妙网格线 `rgba(255,255,255)`（Stripe,0.02 风格）
3. 顶部渐变光晕 `radial-gradient(from 50% 0%, rgba(0, 217, 255, 0.1), transparent 50%)`
4. 底部暖色光晕 `radial-gradient(to 50% 100%, rgba(196, 30, 58, 0.08), transparent 40%)`
**文案层：**
- 主标题：品牌名 + Slogan
- 副标题：价值主张（2-3行）
- CTA 按钮组：主按钮（印章红）+ 次按钮（渐变轮廓）
- 特性标签：3个核心优势点
**视觉层：**
- 右侧抽象图形：圆形/线条组合（象征连接、印章）
- 动态光晕：缓慢脉动的渐变圆
- 微妙粒子：缓慢漂浮（可选）
### 3.3 内容区块设计
**通用规则：**
- 上下间距：`120px`（桌面）/ `80px`（移动）
- 最大内容宽度：`1280px`
- 内边距：`24px`（桌面）/ `16px`（移动）
---
## 四、UI 组件设计
### 4.1 按钮系统
#### 主按钮（CTA - 印章红）
```css
/* 默认状态 */
background: #C41E3A;
color: #FFFFFF;
border-radius: 8px;
padding: 12px 32px;
font-weight: 600;
transition: all 0.3s ease;
/* 悬停状态 */
background: #A01830;
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(196, 30, 58, 0.4);
/* 点击状态 */
transform: translateY(0);
box-shadow: 0 0 15px rgba(196, 30, 58, 0.3);
```
#### 次按钮（渐变轮廓）
```css
/* 默认状态 */
background: transparent;
border: 1px solid rgba(0, 217, 255, 0.5);
color: #00D9FF;
border-radius: 8px;
/* 悬停状态 */
background: rgba(0, 217, 255, 0.1);
border-color: #00D9FF;
box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
```
#### 渐变按钮
```css
/* 默认状态 */
background: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
color: #FFFFFF;
border-radius: 8px;
/* 悬停状态 */
background: linear-gradient(135deg, #00B8D9 0%, #9333EA 100%);
box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
```
### 4.2 卡片系统
#### 服务/产品卡片
```css
/* 背景 */
background: #1A1A1A;
border: 1px solid #262626;
border-radius: 16px;
padding: 32px;
/* 悬停 */
border-color: #00D9FF;
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(0, 217, 255, 0.1);
/* 图标容器 */
background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(168, 85, 247, 0.1));
border-radius: 12px;
```
#### 数据卡片
```css
/* 背景 */
background: #141414;
border: 1px solid #333333;
border-radius: 12px;
padding: 24px;
/* 数字样式 */
color: #00D9FF;
font-size: 48px;
font-weight: 700;
/* 标签样式 */
color: #A3A3A3;
font-size: 14px;
```
### 4.3 导航栏
```css
/* 背景 */
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid #262626;
height: 64px;
/* Logo */
color: #C41E3A（印章红 Logo）
color: #FAFAFA（公司名）
/* 导航链接 */
color: #D4D4D4（默认）
color: #00D9FF（悬停/当前）
```
### 4.4 表单组件
```css
/* 输入框 */
background: #1A1A1A;
border: 1px solid #262626;
border-radius: 8px;
color: #FAFAFA;
padding: 12px 16px;
/* 聚焦状态 */
border-color: #00D9FF;
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
/* 占位符 */
color: #737373;
```
---
## 五、动效系统
### 5.1 全局动效参数
```css
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
```
### 5.2 动效类型
#### 进入动效（页面加载）
- 元素从下方淡入
- 交错延迟：每元素 50ms
- 持续时间：500ms
#### 悬停动效
- 卡片上移 + 边框发光
- 按钮轻微上浮 + 阴影增强
- 持续时间：300ms
#### 背景动效
- 光晕缓慢脉动（4-6秒周期）
- 粒子缓慢漂浮（可选）
- 微妙流畅，不过度
---
## 六、响应式断点
```css
/* 移动优先设计 */
--breakpoint-sm: 640px; /* 手机横屏 */
--breakpoint-md: 768px; /* 平板 */
--breakpoint-lg: 1024px; /* 小笔记本 */
--breakpoint-xl: 1280px; /* 桌面 */
--breakpoint-2xl: 1536px; /* 大桌面 */
```
---
## 七、中国风元素设计
### 7.1 印章元素
**Logo/图标区：**
- 保留现有红色印章 Logo
- 印章可作为页面的"签名"元素出现在适当位置
**装饰元素：**
- 细线方形框（类似传统画框）
- 红色点缀线条
### 7.2 排版风格
**借鉴东方美学：**
- 大标题简洁有力
- 适当留白（padding/margin 略大）
- 信息层次清晰但不拥挤
**文字排版：**
- 标题：Bold, 紧凑字间距
- 正文：Regular, 宽松行高（1.6-1.8）
### 7.3 色彩呼应
- 科技蓝紫渐变 = 科技、创新
- 印章红 = 诚信、权威、稳重
- 深色背景 = 专业、神秘感
---
## 八、验收标准
### 8.1 视觉验收
- [ ] 深色背景正确显示（#0A0A0A）
- [ ] 蓝紫渐变正确应用
- [ ] 印章红作为点缀正确使用
- [ ] 卡片悬停效果流畅
- [ ] 动效优雅不卡顿
- [ ] 响应式布局正常
### 8.2 功能验收
- [ ] 导航链接正常工作
- [ ] CTA 按钮点击正常
- [ ] 表单交互正常
- [ ] 主题切换正常（如保留）
- [ ] 移动端菜单正常
### 8.3 性能验收
- [ ] 首屏加载 < 3s
- [ ] 动画流畅（60fps）
- [ ] 无控制台错误
---
## 九、实施优先级
### Phase 1: 核心视觉
1. 更新全局配色系统
2. 重构 Hero 区域
3. 更新按钮和卡片样式
### Phase 2: 组件优化
4. 优化导航栏
5. 更新服务/产品区块
6. 添加动效
### Phase 3: 完善细节
7. 响应式优化
8. 性能优化
9. 跨浏览器测试