# 丙维科技官网 - 现代化升级版

## 🚀 项目概述

上海丙维数字科技有限公司官网的现代化升级版本，采用Vue2 + 现代化设计理念，突出公司作为AI技术公司的专业形象。

## ✨ 升级特性

### 🎨 现代化设计
- **渐变背景**：使用现代化的渐变色彩搭配
- **卡片式布局**：清晰的信息层次和视觉分组
- **阴影效果**：增强立体感和现代感
- **圆角设计**：柔和的视觉体验

### 🎭 动画效果
- **页面加载动画**：淡入上升效果
- **悬停交互**：卡片悬停时的变换效果
- **滚动动画**：元素进入视口时的动画
- **过渡效果**：平滑的状态转换

### 📱 响应式设计
- **移动端优化**：完全适配移动设备
- **弹性布局**：使用CSS Grid和Flexbox
- **断点设计**：多设备兼容性

### 🔧 功能组件
- **现代化导航**：固定头部、下拉菜单
- **横幅轮播**：增强的Swiper轮播
- **业务展示**：专业的产品和服务展示
- **联系信息**：清晰的联系方式展示

## 🏗️ 技术架构

### 前端技术栈
- **Vue2**：渐进式JavaScript框架
- **Vue Router**：单页面应用路由
- **Swiper**：触摸滑动组件
- **CSS3**：现代化样式和动画

### 设计系统
- **色彩方案**：专业的蓝色主题
- **字体系统**：Proxima Nova字体家族
- **图标系统**：Emoji图标 + SVG图标
- **间距系统**：统一的间距规范

## 📁 项目结构

```
src/
├── components/          # 组件目录
│   ├── ihead.vue      # 现代化头部组件
│   ├── ifooter.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: #3498db;
  --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

---

**丙维科技** - 技术驱动未来，服务创造价值 🚀