175 lines
4.2 KiB
Markdown
175 lines
4.2 KiB
Markdown
# 丙维科技官网 - 现代化升级版
|
||
|
||
## 🚀 项目概述
|
||
|
||
上海丙维数字科技有限公司官网的现代化升级版本，采用Vue2 + 现代化设计理念，突出公司作为AI技术公司的专业形象。
|
||
|
||
## ✨ 升级特性
|
||
|
||
### 🎨 现代化设计
|
||
- **渐变背景**：使用现代化的渐变色彩搭配
|
||
- **卡片式布局**：清晰的信息层次和视觉分组
|
||
- **阴影效果**：增强立体感和现代感
|
||
- **圆角设计**：柔和的视觉体验
|
||
|
||
### 🎭 动画效果
|
||
- **页面加载动画**：淡入上升效果
|
||
- **悬停交互**：卡片悬停时的变换效果
|
||
- **滚动动画**：元素进入视口时的动画
|
||
- **过渡效果**：平滑的状态转换
|
||
|
||
### 📱 响应式设计
|
||
- **移动端优化**：完全适配移动设备
|
||
- **弹性布局**：使用CSS Grid和Flexbox
|
||
- **断点设计**：多设备兼容性
|
||
|
||
### 🔧 功能组件
|
||
- **现代化导航**：固定头部、下拉菜单
|
||
- **横幅轮播**：增强的Swiper轮播
|
||
- **业务展示**：专业的产品和服务展示
|
||
- **联系信息**：清晰的联系方式展示
|
||
|
||
## 🏗️ 技术架构
|
||
|
||
### 前端技术栈
|
||
- **Vue2**：渐进式JavaScript框架
|
||
- **Vue Router**：单页面应用路由
|
||
- **Swiper**：触摸滑动组件
|
||
- **CSS3**：现代化样式和动画
|
||
|
||
### 设计系统
|
||
- **色彩方案**：专业的蓝色主题
|
||
- **字体系统**：Proxima Nova字体家族
|
||
- **图标系统**：Emoji图标 + SVG图标
|
||
- **间距系统**：统一的间距规范
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
src/
|
||
├── components/ # 组件目录
|
||
│ ├── ihead.vue # 现代化头部组件
|
||
│ ├── ifooter.vue # 现代化页脚组件
|
||
│ └── leftMenu.vue # 左侧菜单组件
|
||
├── views/ # 页面目录
|
||
│ ├── index.vue # 升级后的首页
|
||
│ └── aboutUs/ # 关于我们页面
|
||
├── assets/ # 资源目录
|
||
│ ├── css/ # 样式文件
|
||
│ │ └── common.css # 现代化全局样式
|
||
│ └── img/ # 图片资源
|
||
└── static/ # 静态资源
|
||
└── common.js # 公共JavaScript
|
||
```
|
||
|
||
## 🎯 核心页面
|
||
|
||
### 首页 (index.vue)
|
||
- **现代化横幅**：动态标题和副标题
|
||
- **公司介绍**：突出核心优势
|
||
- **业务领域**：三大核心业务展示
|
||
- **产品展示**：原有产品网格布局
|
||
|
||
### 关于我们 (aboutUs.vue)
|
||
- **公司概况**：详细的公司信息
|
||
- **核心优势**：技术团队、AI转型、客户认可
|
||
- **发展历程**：时间轴展示
|
||
- **企业愿景**：未来发展方向
|
||
|
||
## 🎨 设计特色
|
||
|
||
### 视觉层次
|
||
- **信息架构**：清晰的内容组织
|
||
- **视觉引导**：引导用户关注重点
|
||
- **色彩对比**：良好的可读性
|
||
|
||
### 交互体验
|
||
- **悬停效果**：丰富的交互反馈
|
||
- **动画过渡**：流畅的状态变化
|
||
- **响应式交互**：适配不同设备
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
- Node.js >= 12.0.0
|
||
- npm >= 6.0.0
|
||
|
||
### 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
```bash
|
||
npm run serve
|
||
```
|
||
|
||
### 生产构建
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
## 📱 浏览器支持
|
||
|
||
- Chrome >= 60
|
||
- Firefox >= 55
|
||
- Safari >= 12
|
||
- Edge >= 79
|
||
|
||
## 🔧 自定义配置
|
||
|
||
### 主题色彩
|
||
在 `src/assets/css/common.css` 中修改CSS变量：
|
||
```css
|
||
:root {
|
||
--primary-color: #3498db;
|
||
--secondary-color: #9b59b6;
|
||
--success-color: #27ae60;
|
||
--warning-color: #f39c12;
|
||
--danger-color: #e74c3c;
|
||
}
|
||
```
|
||
|
||
### 动画效果
|
||
调整动画时长和缓动函数：
|
||
```css
|
||
.transition {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
```
|
||
|
||
## 📈 性能优化
|
||
|
||
### 图片优化
|
||
- 使用WebP格式
|
||
- 响应式图片
|
||
- 懒加载支持
|
||
|
||
### 代码优化
|
||
- 组件懒加载
|
||
- CSS代码分割
|
||
- JavaScript压缩
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建特性分支
|
||
3. 提交更改
|
||
4. 推送到分支
|
||
5. 创建Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
|
||
|
||
## 📞 联系我们
|
||
|
||
- **公司**：上海丙维数字科技有限公司
|
||
- **地址**：上海市宝山区高逸路112-118号3幢6422室
|
||
- **电话**：13817819452
|
||
- **邮箱**：bimwe@bimwe.com
|
||
- **官网**：www.bimwe.com
|
||
|
||
---
|
||
|
||
**丙维科技** - 技术驱动未来，服务创造价值 🚀 |