# eh-tech

**Repository Path**: MISSMYSEIF/eh-tech

## Basic Information

- **Project Name**: eh-tech
- **Description**: 一款企业官网
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-25
- **Last Updated**: 2026-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 亿恒科技企业官网

> 亿恒科技 —— 以技术驱动商业创新的可靠技术伙伴

## 项目简介

亿恒科技企业官网是一个现代化的企业品牌官网，展示公司的品牌形象、核心产品和服务。采用 **React 19 + TypeScript + Vite 7** 构建，搭配 **Tailwind CSS** 实现深色科技风格，包含首页、关于我们、产品服务、联系我们、404 五个页面，具备粒子背景、滚动动画、页面过渡、移动端全适配等交互效果。

## 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| UI 框架 | React | 19 |
| 语言 | TypeScript | ~5.9 |
| 构建工具 | Vite | 7 |
| CSS 框架 | Tailwind CSS | 3.4 |
| 路由 | React Router DOM | 7 |
| 动画 | Framer Motion | 12 |
| 表单校验 | react-hook-form + zod | 7 / 4 |
| 组件库 | shadcn/ui (Radix UI) | 最新版 |

## 目录结构

```
eh-tech/
├── .gitignore
├── README.md
├── README.en.md
└── app/                              # 应用主目录
    ├── .vscode/                      # VS Code 工作区配置
    │   ├── settings.json             # Tailwind CSS 智能提示
    │   └── tailwind-css-data.json    # @tailwind 指令补全
    ├── index.html                    # HTML 入口 (SEO meta + OG 标签)
    ├── package.json
    ├── vite.config.mjs
    ├── tailwind.config.js
    ├── eslint.config.js
    ├── postcss.config.js
    ├── tsconfig.json                 # 项目引用
    ├── tsconfig.app.json
    ├── tsconfig.node.json
    └── src/
        ├── main.tsx                  # 应用入口 (ErrorBoundary + BrowserRouter)
        ├── App.tsx                   # 路由配置 (含 404 兜底)
        ├── index.css                 # 全局样式 + Tailwind 指令 + shadcn 变量
        ├── lib/
        │   └── utils.ts              # cn() 类名合并工具
        ├── hooks/
        │   └── use-mobile.ts         # 移动端检测 Hook
        ├── components/
        │   ├── layout/
        │   │   ├── Layout.tsx        # 布局壳 (ScrollToTop + 页面过渡 + Navbar + Footer)
        │   │   ├── Navbar.tsx        # 响应式导航 (桌面/移动端) + 滚动毛玻璃 + 菜单锁定滚动
        │   │   └── Footer.tsx        # 四栏页脚 + 版权信息
        │   ├── shared/
        │   │   ├── FadeInSection.tsx # 滚动淡入入场动画 (4 页面复用)
        │   │   ├── ErrorBoundary.tsx # 全局错误边界 (500 页面 + 刷新/返回)
        │   │   ├── ScrollToTop.tsx   # 路由切换自动滚顶
        │   │   └── PageTransition.tsx# 页面淡入淡出过渡动画
        │   └── ui/                   # 47 个 shadcn/ui 组件
        └── pages/
            ├── Home.tsx              # 首页 (Hero / 核心业务 / 技术优势 / 案例 / 生态 / CTA)
            ├── About.tsx             # 关于我们 (公司介绍 / 文化 / 团队 / 时间线)
            ├── Products.tsx          # 产品服务 (四大服务 / 行业方案 / 交付流程)
            ├── Contact.tsx           # 联系我们 (表单校验 / 联系方式 / 地图 / FAQ)
            └── NotFound.tsx          # 404 页面
```

## 快速开始

```bash
# 1. 进入项目目录
cd app

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 4. 浏览器访问 http://localhost:5173
```

## 脚本命令

| 命令 | 说明 |
|------|------|
| `npm run dev` | 启动 Vite 开发服务器 |
| `npm run build` | TypeScript 类型检查 + Vite 生产构建 |
| `npm run preview` | 预览生产构建 |
| `npm run lint` | ESLint 代码检查 |

## 功能模块

### 首页
- **Hero** — Canvas 粒子背景 (移动端 60→20 自动降级) + 视差滚动 + 渐变光晕 + 统计数字
- **四大核心业务** — 软件定制开发 / 移动端方案 / AI 智能化 / 云架构运维
- **四大技术优势** — 全栈能力 / 敏捷交付 / 安全合规 / 体验追求
- **四大客户案例** — 金融科技 / 智慧医疗 / 零售电商 / 智能制造
- **技术生态横幅** — 12 个主流技术栈标签展示
- **CTA 行动召唤**

### 关于我们
- **公司介绍** — 核心数据卡片 + 创业故事双栏布局
- **企业文化** — 极致匠心 / 持续进化 / 透明协作 / 结果导向
- **核心团队** — 4 位核心成员卡片展示
- **发展历程** — 2018–2025 六节点时间线

### 产品服务
- **四大服务详情** — 特性列表 + 技术标签 + 咨询入口
- **四大行业方案** — 金融 / 医疗 / 零售 / 制造
- **六步交付流程** — 需求洞察 → 方案设计 → 敏捷开发 → 质量保障 → 交付上线 → 持续运维
- **底部 CTA**

### 联系我们
- **四联联系卡片** — 电话 / 邮箱 / 地址 / 微信
- **联系表单** — react-hook-form + zod 校验 (姓名/公司/邮箱/电话/服务/需求), 提交后自动重置
- **办公环境** — SVG 地图示意 + 交通信息
- **FAQ** — 5 个常见问题手风琴交互

### 404 页面
- 渐变大数字 + 返回首页按钮

### 全局特性
- **ErrorBoundary** — 全局错误捕获, 500 页面 + 刷新/返回首页
- **ScrollToTop** — 路由切换自动滚顶
- **PageTransition** — Framer Motion AnimatePresence 淡入淡出过渡
- **SEO** — 中文 lang / meta description + keywords / Open Graph 标签 / 内联 SVG favicon
- **移动端全适配** — 所有页面 sm/md 渐进式断点, Navbar 菜单锁定背景滚动, 粒子/按钮/统计/网格/间距全部优化

## 设计规范

| 项目 | 值 |
|------|------|
| 主题色 | 深蓝 `#4a8eff` → 紫色 `#8b5cf6` → 青色 `#06b6d4` |
| 背景色 | 深色 `#0a0a0f` |
| 字体 | Inter, -apple-system, sans-serif |
| 动画 | Framer Motion 滚动入场 + Canvas 粒子 + 页面过渡 |
| 卡片 | 玻璃态 (backdrop-blur) + 渐变边框 + hover 悬浮 |
| 按钮 | 渐变背景 + 光效 hover |

## 浏览器支持

| 浏览器 | 最低版本 |
|--------|---------|
| Chrome | 110+ |
| Firefox | 110+ |
| Safari | 16+ |
| Edge | 110+ |

## 许可证

MIT License