张翔
6797c24b5c
refactor(layout): 优化页脚布局和备案信息展示 feat(constants): 添加ICP备案和公安备案信息 feat(header): 实现移动端加载时的骨架屏效果 style(globals): 调整文字颜色和添加移动端响应样式 feat(breadcrumb): 增加返回按钮和响应式优化 feat(e2e): 添加移动端测试工具和测试用例 docs: 添加页脚重设计文档
254 lines
5.8 KiB
Markdown
254 lines
5.8 KiB
Markdown
# Footer 全面升级设计方案
|
||
|
||
**日期：** 2026-03-04
|
||
**设计风格：** 浅色现代风格
|
||
**布局结构：** 4列布局
|
||
|
||
---
|
||
|
||
## 一、整体布局与视觉风格
|
||
|
||
### 1.1 背景与色彩体系
|
||
|
||
**背景设计：**
|
||
- 主背景：保持浅色背景 `#F5F5F5`
|
||
- 渐变效果：从上到下微妙渐变（`#F5F5F5` → `#FAFAFA`）
|
||
- 顶部阴影：`shadow-[0_-4px_20px_rgba(0,0,0,0.03)]`
|
||
|
||
**色彩体系：**
|
||
- 强调色：品牌深红 `#C41E3A`（图标、链接悬停、分隔线）
|
||
- 文字层次：
|
||
- 标题：`#1C1C1C` 深色
|
||
- 正文：`#3D3D3D` 中灰色
|
||
- 辅助文字：`#5C5C5C` 浅灰色
|
||
|
||
### 1.2 布局结构
|
||
|
||
**4列布局：**
|
||
```
|
||
[品牌信息+二维码] [快速链接] [服务项目] [联系方式]
|
||
```
|
||
|
||
**间距优化：**
|
||
- 列间距：`gap-8 lg:gap-12`
|
||
- 内边距：`py-16`（增加呼吸感）
|
||
- 元素间距：统一使用 `space-y-4` 或 `space-y-6`
|
||
|
||
---
|
||
|
||
## 二、品牌信息区域设计（第一列）
|
||
|
||
### 2.1 品牌展示区（顶部）
|
||
|
||
**Logo区域：**
|
||
- Logo尺寸：保持当前 `h-10`
|
||
- 悬停效果：`hover:scale-105 hover:shadow-md transition-all duration-200`
|
||
- 公司名称：Logo右侧添加"睿新致遠"，`font-semibold text-lg text-[#1C1C1C]`
|
||
- Slogan：名称下方添加"智连未来，成长伙伴"，`text-sm text-[#5C5C5C] mt-1`
|
||
|
||
**公司描述：**
|
||
- 保持当前内容
|
||
- 优化行高：`leading-relaxed`
|
||
|
||
### 2.2 二维码区域（中部）
|
||
|
||
**分隔线：**
|
||
- 使用 `border-t border-[#E5E5E5]` 与上方内容区分
|
||
|
||
**二维码展示：**
|
||
- 标题："关注公众号"，`text-sm font-medium text-[#1C1C1C] mb-3`
|
||
- 卡片样式：
|
||
- 白色背景 + 边框
|
||
- 阴影：`shadow-sm hover:shadow-md transition-shadow`
|
||
- 内边距：`p-3`
|
||
- 尺寸：140x140px
|
||
- 引导文字："扫码关注获取最新资讯"，`text-xs text-[#718096] mt-2`
|
||
|
||
---
|
||
|
||
## 三、其他三列设计
|
||
|
||
### 3.1 第二列：快速链接
|
||
|
||
**标题设计：**
|
||
- 文字："快速链接"
|
||
- 样式：`font-semibold text-lg text-[#1C1C1C] mb-6`
|
||
- 左侧装饰：品牌色竖线 `w-1 h-6 bg-[#C41E3A] rounded-full`
|
||
|
||
**链接列表：**
|
||
- 保持当前导航项
|
||
- 样式优化：
|
||
- 默认：`text-[#3D3D3D] text-sm`
|
||
- 悬停：`hover:text-[#C41E3A] hover:translate-x-1 transition-all duration-200`
|
||
- 间距：`space-y-3`
|
||
- 图标前缀：小圆点 `w-1.5 h-1.5 bg-[#C41E3A] rounded-full`
|
||
|
||
### 3.2 第三列：服务项目
|
||
|
||
**标题设计：**
|
||
- 文字："服务项目"
|
||
- 样式：与快速链接标题保持一致
|
||
|
||
**服务列表：**
|
||
- 保持当前服务项
|
||
- 样式：与快速链接保持一致
|
||
|
||
### 3.3 第四列：联系方式
|
||
|
||
**标题设计：**
|
||
- 文字："联系方式"
|
||
- 样式：与其他列标题保持一致
|
||
|
||
**联系信息：**
|
||
- 保持图标 + 文字布局
|
||
- 样式优化：
|
||
- 图标：`w-5 h-5 text-[#C41E3A]`
|
||
- 文字：`text-[#3D3D3D] text-sm`
|
||
- 悬停：`group-hover:translate-x-1`
|
||
- 间距：`space-y-4`
|
||
|
||
---
|
||
|
||
## 四、底部信息区域设计
|
||
|
||
### 4.1 版权与合规信息区
|
||
|
||
**分隔线：**
|
||
- 使用 `border-t border-[#E5E5E5] mt-12 pt-8`
|
||
|
||
**布局：**
|
||
- `flex flex-col md:flex-row justify-between items-center gap-4`
|
||
|
||
**左侧：**
|
||
- 版权信息：`© 2026 四川睿新致远科技有限公司 All rights reserved.`
|
||
- 样式：`text-[#5C5C5C] text-sm`
|
||
|
||
**右侧：**
|
||
- 隐私政策、服务条款链接
|
||
- 样式：`text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors`
|
||
- 间距：`gap-6`
|
||
|
||
### 4.2 备案信息
|
||
|
||
**位置：**
|
||
- 版权信息下方
|
||
- 样式：`text-center mt-4 pt-4 border-t border-[#E5E5E5]`
|
||
|
||
**内容：**
|
||
- ICP备案号：`蜀ICP备XXXXXXXX号-1`
|
||
- 公安备案：`川公网安备 XXXXXXXXXXX号`
|
||
- 样式：`text-xs text-[#718096]`
|
||
- 链接：备案号可链接到工信部查询页面
|
||
|
||
---
|
||
|
||
## 五、响应式设计
|
||
|
||
### 5.1 移动端（< 768px）
|
||
|
||
**布局：**
|
||
- 单列堆叠：`grid-cols-1`
|
||
- 间距：`gap-8`
|
||
- 内边距：`py-12`
|
||
|
||
**顺序：**
|
||
1. 品牌信息 + 二维码
|
||
2. 快速链接
|
||
3. 服务项目
|
||
4. 联系方式
|
||
|
||
**二维码：**
|
||
- 居中显示：`mx-auto`
|
||
|
||
### 5.2 平板端（768px - 1024px）
|
||
|
||
**布局：**
|
||
- 2列网格：`md:grid-cols-2`
|
||
- 间距：`gap-8`
|
||
|
||
### 5.3 桌面端（> 1024px）
|
||
|
||
**布局：**
|
||
- 4列网格：`lg:grid-cols-4`
|
||
- 间距：`gap-12`
|
||
- 内边距：`py-16`
|
||
|
||
---
|
||
|
||
## 六、交互细节优化
|
||
|
||
### 6.1 链接悬停效果
|
||
|
||
- 快速链接、服务项目：`hover:text-[#C41E3A] hover:translate-x-1 transition-all duration-200`
|
||
- 联系方式：整个项目悬停时轻微右移
|
||
- 底部链接：`hover:text-[#C41E3A] transition-colors`
|
||
|
||
### 6.2 二维码交互
|
||
|
||
- 悬停效果：阴影增强 `hover:shadow-lg`
|
||
- 可选：点击放大功能（使用Dialog组件）
|
||
|
||
### 6.3 Logo悬停
|
||
|
||
- 轻微放大：`hover:scale-105`
|
||
- 添加阴影：`hover:shadow-md`
|
||
- 过渡效果：`transition-all duration-200`
|
||
|
||
### 6.4 可访问性优化
|
||
|
||
- 所有链接添加 `aria-label`
|
||
- 图标添加 `aria-hidden="true"`
|
||
- 确保颜色对比度符合 WCAG AA 标准
|
||
- 键盘导航友好
|
||
|
||
---
|
||
|
||
## 七、性能优化
|
||
|
||
### 7.1 图片优化
|
||
|
||
- Logo：使用 `priority` 属性（首屏加载）
|
||
- 二维码：使用 `loading="lazy"`（懒加载）
|
||
- 添加 `sizes` 属性优化响应式图片
|
||
|
||
### 7.2 CSS优化
|
||
|
||
- 使用 Tailwind CSS 的 JIT 模式
|
||
- 避免重复的类名组合
|
||
- 使用组件化的样式方案
|
||
|
||
---
|
||
|
||
## 八、实施计划
|
||
|
||
### 8.1 实施步骤
|
||
|
||
1. 更新 `footer.tsx` 组件代码
|
||
2. 添加必要的图标组件（如果需要）
|
||
3. 更新 `constants.ts` 添加备案信息
|
||
4. 测试响应式布局
|
||
5. 验证可访问性
|
||
6. 性能优化检查
|
||
|
||
### 8.2 预期效果
|
||
|
||
- ✅ 视觉层次更清晰
|
||
- ✅ 品牌形象更突出
|
||
- ✅ 用户体验更友好
|
||
- ✅ 符合金融级标准
|
||
- ✅ 响应式适配完善
|
||
- ✅ 可访问性达标
|
||
|
||
---
|
||
|
||
## 九、未来扩展
|
||
|
||
### 9.1 预留区域
|
||
|
||
- 合作伙伴展示区（已设计，暂时隐藏）
|
||
- 认证资质标识区（已设计，暂时隐藏）
|
||
|
||
### 9.2 扩展方式
|
||
|
||
需要时取消注释相关代码即可启用。
|