3.7 KiB
3.7 KiB
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)
设计特点
- 简约现代的界面设计
- 渐变色点缀增加科技感
- 卡片式布局，层次分明
- 流畅的动画过渡效果
- 响应式设计，适配移动端
🛠️ 开发指南
安装依赖
npm install
启动开发服务器
npm run dev
构建生产版本
npm run build
预览生产构建
npm run preview
📱 响应式支持
网站完全支持响应式设计，在以下设备上都有良好的显示效果：
- 桌面端（Desktop）
- 平板端（Tablet）
- 移动端（Mobile）
🎯 核心组件
导航栏 (head_menu.vue)
- 使用 router-link 实现无刷新页面切换
- 当前页面高亮显示
- 毛玻璃效果背景
- 响应式菜单布局
页脚 (footer.vue)
- 公司信息展示
- 快速链接导航
- 社交媒体图标
- 版权信息
全局样式 (main.css)
- CSS 变量定义主题色
- 通用按钮样式
- 卡片组件样式
- 动画效果定义
- 响应式断点设置
🔧 可定制内容
修改公司信息
在相应页面组件中修改：
- 公司名称
- 联系方式
- 团队成员
- 发展历程
修改产品信息
在 products.vue 中修改：
- 产品列表
- 产品分类
- 产品价格
- 产品特性
修改配色方案
在 assets/main.css 中修改 CSS 变量：
:root {
--primary-color: #0066ff;
--accent-color: #00d4ff;
/* ... 更多变量 */
}
📝 注意事项
- 图片资源需要放置在对应的
img目录下 - 联系表单目前是模拟提交，需要接入后端API
- 地图部分为占位符，可以集成百度地图或高德地图
- 轮播图图片建议尺寸：1920x600px
🌟 后续优化建议
- 添加页面加载动画
- 集成真实的数据统计图表
- 添加多语言支持
- 优化SEO配置
- 添加博客/新闻模块
- 集成在线客服系统
- 添加用户登录注册功能
📄 许可证
MIT License
开发者: TechCorp Team
最后更新: 2026年5月