风控平台（Risk Control / Security Platform）

一、落地页总体设计思路

  • 主题色调：深蓝 + 紫色渐变 + 红橙高亮（风险警示色）
  • 风格：现代扁平化 + 玻璃化卡片 + 微交互粒子科技感
  • 排版：全屏滚动 + 分屏模块化呈现
  • 交互：悬停动效、滚动触发动画、数据可视化动态演示
  • 目标：突出平台实时风险感知、智能风控、数据驱动安全决策的能力

二、页面结构（Section Layout）

  1. Hero Section（首屏）

    • 大标题：智能风控，实时护航企业安全
    • 副标题：全链路风险监测、实时告警、可视化决策
    • 背景：粒子网络 + 数据流动动画 + 风险信号动态闪烁
    • CTA 按钮：立即体验、申请演示

    • 交互：

      • 粒子随鼠标轻微移动
      • CTA 悬停时发光 + 波纹动画

  2. 核心能力（Feature Section）

    • 网格布局 4~6 个核心能力卡片：

      1. 实时风险监测：多维数据接入，实时分析异常行为
      2. 自动告警与响应：多级告警、策略触发自动阻断
      3. 异常行为检测：机器学习 / AI 风控模型
      4. 风险策略管理：规则配置、策略库管理
      5. 可视化分析报表：风险地图、趋势分析
      6. 多系统联动：IAM / SSO / 审计 / KMSS

    • 卡片交互：

      • 鼠标悬停翻转显示能力详细说明
      • 背面可滑动查看风险示例和案例

  3. 数据可视化模块（Analytics Section）

    • 实时仪表盘 + 图表：

      • 风险趋势折线图
      • 告警地图热力图
      • 风险等级分布饼图
      • 风险事件列表卡片

    • 动效：

      • 图表加载动画（折线逐渐绘制、柱状渐入）
      • 鼠标悬停显示详细数据
      • 告警卡片闪烁提示

  4. 风险场景（Scenario Section）

    • 动态演示企业典型风险场景：

      1. 异常登录 / 异地访问
      2. 高危命令执行 / 数据泄露风险
      3. API / 数据接口异常流量
      4. 供应链 / 第三方接入风险

    • 交互：

      • 场景卡片滚动触发动画
      • 悬停显示风险分析示意图
      • 点击弹窗展示处置策略

  5. 技术架构展示（Architecture Section）

    • 风控平台整体架构图：

      • 数据采集 → 数据分析 → 风险模型 → 告警策略 → 响应执行

    • 动效：

      • 数据流粒子沿箭头移动，显示实时分析过程
      • 节点悬停显示模块功能
      • 可切换不同模块视图（告警 / 异常检测 / AI 模型）

  6. 客户案例（Case Section）

    • 滑动轮播客户 LOGO + 风控价值展示
    • 动效：LOGO 悬停轻微放大，显示风险减少 / 响应时间提升等 KPI

  7. 安全合规 & 指标（Trust Section）

    • KPI 数字卡片：

      • 实时告警数量
      • 已拦截风险事件数
      • 响应时间平均值
      • 系统覆盖资产数量
      • 合规标准（ISO 27001 / 等保 / PCI-DSS）

    • 动效：

      • 数字滚动动画
      • 悬停显示详细说明

  8. CTA / 联系我们（Footer Section）

    • 按钮：免费试用、申请演示
    • 背景：渐变 + 微粒子动画
    • CTA 悬停发光效果

三、视觉与交互细节

模块 视觉设计 动效 / 交互
Hero 粒子网络 + 数据流 + 科技背景 CTA 悬停发光，粒子随鼠标移动
核心能力卡片 玻璃化卡片，深色半透明，圆角 鼠标悬停翻转，背面显示详细描述
数据可视化 仪表盘 + 热力图 + 折线/柱状图 图表加载动画，数据动态填充，鼠标悬停显示详细数值
风险场景 SVG / Lottie 动画 滚动触发场景演示，悬停展示处置策略，点击弹窗
技术架构 节点+箭头+粒子数据流 节点悬停显示模块说明，粒子沿箭头流动，动态切换视图
KPI 指标 卡片式数字 + 高亮边框 数字滚动动画，悬停显示指标说明
Footer CTA 渐变背景 + 微粒子漂浮 CTA 悬停发光，按钮波纹动画

四、交互流程文档

  1. 访问落地页 → Hero Section

    • 粒子动画加载，CTA 按钮光效
    • 点击 CTA → 弹出试用表单

  2. 滚动到核心能力模块

    • 卡片淡入
    • 悬停翻转显示详细说明
    • 点击卡片跳转案例 / 详细介绍

  3. 数据可视化模块

    • 图表加载动画（折线、柱状）
    • 悬停显示详细数值
    • 滚动时 KPI 卡片逐个出现

  4. 风险场景模块

    • 滚动触发动画
    • 悬停展示风险示意图
    • 点击弹窗显示风险处置策略

  5. 技术架构模块

    • 数据流粒子沿箭头移动
    • 节点悬停显示模块功能
    • 可切换视图（告警 / 异常检测 / AI 模型）

  6. 客户案例 & KPI

    • LOGO 轮播动画
    • 数字滚动动画显示关键指标
    • 悬停显示详细解释

  7. Footer CTA

    • 鼠标悬停发光，微粒子漂浮
    • 点击 CTA → 弹出申请表单

五、技术实现建议

  • 前端框架：Vue 3 + Vite + Tailwind / Element Plus
  • 动画：GSAP + Lottie + Three.js (Hero 粒子和数据流)
  • 图表：ECharts / D3.js / AntV
  • 滚动动画：Intersection Observer + GSAP ScrollTrigger
  • 颜色方案：#0A1F3D (深蓝) + #1C3B5A (科技蓝) + #FF6B6B (告警红) + #5C7AEA (高光)

六、信息架构总结

Hero Section
 ├── CTA 按钮
核心能力模块
 ├── 6 个核心能力卡片
数据可视化模块
 ├── 仪表盘 + 折线/柱状图 + 热力图
风险场景模块
 ├── 4 个风险场景卡片 + 动画
技术架构模块
 ├── 节点+箭头+粒子数据流
客户案例模块
 ├── LOGO 轮播 + 风险价值展示
KPI 指标模块
 ├── 数字滚动 + 指标说明
Footer CTA
 ├── 按钮 + 表单