# TechCorp 官网项目

一个简约科技风格的多页面企业官网，基于 Vue 3 + Vite + Element Plus 构建。

## 🚀 技术栈

- **前端框架**: Vue 3.5.32
- **构建工具**: Vite 7.3.2
- **UI 组件库**: Element Plus
- **路由管理**: Vue Router 5.0.6
- **状态管理**: Pinia 3.0.4

## 📁 项目结构

```
src/
├── assets/              # 静态资源
│   └── main.css        # 全局样式文件
├── module/             # 公共组件
│   ├── head_menu.vue   # 顶部导航栏
│   └── footer.vue      # 页脚组件
├── router/             # 路由配置
│   └── router.js
├── views/              # 页面组件
│   ├── index/          # 首页
│   ├── products/       # 产品服务页
│   ├── about/          # 关于我们页
│   └── contact/        # 联系我们页
├── App.vue             # 根组件
└── main.js             # 入口文件
```

## ✨ 功能特性

### 1. 首页 (Home)

- 轮播图展示（自动播放，图片自适应）
- 核心优势展示
- 数据统计区域（动态数字展示）
- 行动号召区域（CTA）

### 2. 产品服务页 (Products)

- 产品分类筛选功能
- 产品卡片展示
- 服务特色介绍
- 价格信息展示

### 3. 关于我们页 (About)

- 简介和基本信息
- 价值展示
- 团队介绍
- 发展历程时间线

### 4. 联系我们页 (Contact)

- 联系信息展示（QQ、微信、邮箱等）
- 常见问题FAQ

## 🎨 设计风格

### 配色方案

- **主色调**: 科技蓝 (#0066ff)
- **辅助色**: 青色 (#00d4ff)
- **背景色**: 纯白 (#ffffff) / 浅灰 (#f8f9fa)
- **文字色**: 深灰 (#1a1a1a) / 中灰 (#666666)

### 设计特点

- 简约现代的界面设计
- 渐变色点缀增加科技感
- 卡片式布局，层次分明
- 流畅的动画过渡效果
- 响应式设计，适配移动端

## 🛠️ 开发指南

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:5174/

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 📱 响应式支持

网站完全支持响应式设计，在以下设备上都有良好的显示效果：

- 桌面端（Desktop）
- 平板端（Tablet）
- 移动端（Mobile）

## 🎯 核心组件

### 导航栏 (head_menu.vue)

- 使用 router-link 实现无刷新页面切换
- 当前页面高亮显示
- 毛玻璃效果背景
- 响应式菜单布局

### 页脚 (footer.vue)

- 公司信息展示
- 快速链接导航
- 社交媒体图标
- 版权信息

### 全局样式 (main.css)

- CSS 变量定义主题色
- 通用按钮样式
- 卡片组件样式
- 动画效果定义
- 响应式断点设置

## 🔧 可定制内容

### 修改公司信息

在相应页面组件中修改：

- 公司名称
- 联系方式
- 团队成员
- 发展历程

### 修改产品信息

在 `products.vue` 中修改：

- 产品列表
- 产品分类
- 产品价格
- 产品特性

### 修改配色方案

在 `assets/main.css` 中修改 CSS 变量：

```css
:root {
  --primary-color: #0066ff;
  --accent-color: #00d4ff;
  /* ... 更多变量 */
}
```

## 📝 注意事项

1. 图片资源需要放置在对应的 `img` 目录下
2. 联系表单目前是模拟提交，需要接入后端API
3. 地图部分为占位符，可以集成百度地图或高德地图
4. 轮播图图片建议尺寸：1920x600px

## 🌟 后续优化建议

1. 添加页面加载动画
2. 集成真实的数据统计图表
3. 添加多语言支持
4. 优化SEO配置
5. 添加博客/新闻模块
6. 集成在线客服系统
7. 添加用户登录注册功能

## 📄 许可证

MIT License

---

**开发者**: TechCorp Team  
**最后更新**: 2026年5月