195 lines
3.7 KiB
Markdown
195 lines
3.7 KiB
Markdown
# 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月
|