张翔
6797c24b5c
refactor(layout): 优化页脚布局和备案信息展示 feat(constants): 添加ICP备案和公安备案信息 feat(header): 实现移动端加载时的骨架屏效果 style(globals): 调整文字颜色和添加移动端响应样式 feat(breadcrumb): 增加返回按钮和响应式优化 feat(e2e): 添加移动端测试工具和测试用例 docs: 添加页脚重设计文档
5.8 KiB
5.8 KiB
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
顺序：
- 品牌信息 + 二维码
- 快速链接
- 服务项目
- 联系方式
二维码：
- 居中显示：
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 实施步骤
- 更新
footer.tsx组件代码 - 添加必要的图标组件（如果需要）
- 更新
constants.ts添加备案信息 - 测试响应式布局
- 验证可访问性
- 性能优化检查
8.2 预期效果
- ✅ 视觉层次更清晰
- ✅ 品牌形象更突出
- ✅ 用户体验更友好
- ✅ 符合金融级标准
- ✅ 响应式适配完善
- ✅ 可访问性达标
九、未来扩展
9.1 预留区域
- 合作伙伴展示区（已设计，暂时隐藏）
- 认证资质标识区（已设计，暂时隐藏）
9.2 扩展方式
需要时取消注释相关代码即可启用。