Skip to content
home 洞察区配色调整设计
目标
调整 home 首页“AI洞察驱动精细化运营”区块的配色，使其与整页已经形成的企业官网视觉保持一致，同时保留这是一个重点总结区的层次感。
当前问题不是信息结构，而是这一区块的色相和质感脱离了前后模块：
- 上方区块整体是
白底 / 浅灰底 / 蓝灰文字 / 企业蓝强调 - 下方 CTA 是
高饱和品牌蓝 - 当前洞察区却使用了
偏粉紫的大面积渐变氛围 + 深紫反白卡片
结果是该区块像一段独立的 AI landing page，而不是企业官网中的一个重点分区。
范围
包含
- 调整
HomeLanding.vue中洞察区的背景配色 - 调整洞察卡片的底色、边框、阴影和文字颜色
- 调整洞察区图标的表达方式与强调色
- 调整该区块与前一段“联络、编排、分析能力覆盖业务全链路”以及后一段 CTA 的视觉衔接
不包含
- 不改动洞察区的文案结构与三卡信息内容
- 不改动整页其它模块的布局顺序
- 不引入新的复杂动效
- 不将该区块改造成深色主视觉段
选定方向
采用 浅冷灰蓝背景 + 白色卡片 + 企业蓝强调 的方案。
这是三种候选中最适合当前首页的方向，原因如下：
- 能回到整页已经建立起来的
蓝灰 / 冷白 / 深海军蓝主色轴 - 仍然保留“重点总结区”的分区感，不会被普通白底内容吞没
- 往下衔接蓝色 CTA 时更自然，不会出现
粉紫一段 + 纯蓝一段的断层
明确放弃以下两个方向：
完全白底并回普通内容区- 太平，会丢掉这一区块作为“能力收束与运营总结”的权重
深色反白强调区- 层次虽强，但更容易出现用户已经明确反感的“AI 模板感”
视觉调整
1. 区块背景
洞察区背景从当前的紫粉氛围渐变改为浅冷灰蓝渐变。
目标质感：
- 更像企业官网中的浅色重点区
- 保留层次，但不制造戏剧性光效
- 不再出现明显的偏紫色相
建议方向：
- 基础背景：
#F4F7FB -> #EEF3F9 - 可保留极轻微的蓝灰径向过渡，但透明度必须低
- 移除当前大面积偏紫雾感和高饱和发光效果
2. 卡片体系
三张洞察卡片从深色反白卡改为白卡体系。
卡片原则：
- 底色：
#FFFFFF或极浅灰白 - 边框：轻描边，不要发光边
- 阴影：低对比、低扩散的企业化阴影
- 圆角：延续当前首页卡片语言，不做过度圆润
建议参数方向：
border: 1px solid rgba(148, 163, 184, 0.18)box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06)
hover 只保留轻微上浮与描边强化，不做发光或明显色变。
3. 文字颜色
文字体系回到整页一致的深浅层级：
- 标题：深海军蓝 / 近黑蓝
- 正文：蓝灰中性色
- 辅助标签：更淡的灰蓝
建议方向：
- 主标题：
#0F172A - 正文：
#475569 - 辅助标签：
#64748B
不再使用大面积纯白字配深底卡的表达。
4. 强调色与图标
整个洞察区只保留一套强调色，即首页已经在使用的企业蓝。
原则：
- 图标底块可使用浅蓝底
- 图标本体使用品牌蓝或深蓝
- hover 描边和小面积强调也统一走蓝色
- 不再引入紫色、粉色或多主色混用
图标表达建议同步简化：
- 优先用单色简洁图形或几何符号
- 不建议继续保留当前 emoji 图标
这样可以把视觉从“模板感”拉回“企业产品感”。
5. 与前后区块的衔接
该区块在整页中的作用是“收束信息并导向 CTA”，而不是单独跳出来抢视觉中心。
因此衔接原则如下：
- 从上方白底产品展示区进入时，通过浅冷灰蓝背景制造轻层次切换
- 区块内部用白卡承载信息，保持可读性和专业感
- 向下衔接 CTA 时，允许品牌蓝重新增强，从而形成自然的节奏递进
整体节奏应是：
白底内容区 -> 浅冷灰蓝重点区 -> 品牌蓝 CTA
而不是：
白底内容区 -> 粉紫氛围区 -> 品牌蓝 CTA
实现约束
- 仅修改洞察区相关模板和样式，不顺带重做其它模块
- 不增加复杂伪元素动画
- 不增加高饱和光晕、玻璃拟态或蓝紫混合渐变
- 如果需要强调层次，优先通过
背景明度差、卡片描边、轻阴影解决
验收标准
完成后，这一区块应满足以下判断标准：
- 单独看，它仍然是一个重点区块，而不是普通白底列表。
- 放回整页看，它不会再像另一套视觉体系插进页面中间。
- 从“联络、编排、分析能力覆盖业务全链路”往下滚动到这一区时，色彩过渡自然。
- 再往下滚到 CTA 时，品牌蓝的增强是顺势加重，而不是重新起一套颜色关系。
- 整体观感更接近成熟企业官网，而不是 AI 风格 landing page。