# DETH 官网设计方案 ## 首页设计 (5屏) ### 1. Hero Section - **布局**：全屏背景视频 - **内容**： - 公司logo - 使命宣言 - 主要解决方案快速导航 - 向下滚动提示 - **动画**：fade-in - **导航**：直接链接到解决方案页面 ### 2. 核心解决方案概览 - **布局**：3列网格 - **内容**： - POD智能验证系统 - 智能调度优化 - 地址智能解析 - **交互**：每个解决方案卡片包含： - 图标 - 简短描述 - "了解更多"按钮 - **动画**：stagger fade-up ### 3. 行业痛点与数据 - **布局**：左侧信息图，右侧数据面板 - **内容**： - 关键行业数据统计 - 交互式信息图展示痛点 - **导航**："查看详细分析"按钮链接到解决方案页面 ### 4. 精选案例研究 - **布局**：3列卡片 - **内容**： - 案例标题 - 简短描述 - 关键数据 - "查看详情"按钮 - **动画**：slide-in ### 5. 客户评价与合作伙伴 - **布局**：上部分轮播，下部分logo墙 - **内容**： - 客户评价轮播 - 合作伙伴logo展示 - **导航**："查看更多评价"按钮链接到资源中心 ## 解决方案与行业分析页面 (4屏) ### 1. 行业痛点 - **布局**：全屏交互式信息图 - **内容**： - 高投诉率 - 低效路线规划 - 地址解析问题 - **动画**：zoom-in ### 2. POD智能验证系统 - **布局**：左右分屏 - **内容**： - 解决方案详情 - Before/After对比 - **交互**：点击查看详细流程 ### 3. 智能调度优化 - **布局**：顶部描述，底部动态路线图 - **内容**： - 动态路线规划 - 实时交通预测 - **动画**：路线绘制动画 ### 4. 地址智能解析 - **布局**：分步演示 - **内容**： - 地址标准化过程 - 建筑物位置优化 - **交互**：逐步展示解析过程 ## 关于我们页面 (2屏) ### 1. 团队介绍 - **布局**：网格布局 - **内容**： - 团队成员照片 - 姓名和职位 - 简短介绍 - **动画**：stagger fade-up ### 2. 发展历程 - **布局**：垂直时间轴 - **内容**： - 公司里程碑 - 重要成就 - **动画**：fade-up ## 资源中心页面 (2屏) ### 1. 案例研究 - **布局**：Masonry布局 - **内容**： - 案例标题 - 简短描述 - 关键数据 - 下载链接 ### 2. 视频演示 - **布局**：视频画廊 - **内容**： - 解决方案演示视频 - 客户案例视频 - 行业分析视频 ## 联系我们页面 (1屏) - **布局**：左右分屏 - **内容**： - 左侧：联系表单 - 姓名 - 邮箱 - 消息 - 提交按钮 - 右侧：地图嵌入 - 办公地点标记 - 地址信息 ## 设计系统规范 ### 颜色变量系统（基于Tailwind配置） ### 响应式设计规范 1. **断点系统**： ```javascript // tailwind.config.cjs const breakpoints = { sm: 640, // 手机竖屏 md: 768, // 手机横屏/小平板 lg: 1024, // 平板/小笔记本 xl: 1280 // 桌面 }; ``` 2. **移动端适配策略**： - 导航栏在sm断点切换为汉堡菜单 - 图片网格布局在md断点切换为单列 - 交互元素最小点击区域44x44px ### 全屏滚动实现方案 **方案选择**：原生CSS Scroll Snap + IntersectionObserver组合方案 ```css /* 全屏容器 */ .scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; } /* 全屏区块 */ .screen-section { height: 100vh; scroll-snap-align: start; position: relative; } /* 移动端优化 */ @media (pointer: coarse) { .scroll-container { scroll-behavior: smooth; } } ``` **方案优势**： 1. 原生实现无依赖 2. 完美兼容移动端触控 3. 与现有Tailwind样式无缝集成 4. 可通过IntersectionObserver实现视口检测 ## 技术实现 ### 动画系统