丙维科技官网 - 现代化升级版
🚀 项目概述
上海丙维数字科技有限公司官网的现代化升级版本，采用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
安装依赖
npm install
开发模式
npm run serve
生产构建
npm run build
📱 浏览器支持
- Chrome >= 60
- Firefox >= 55
- Safari >= 12
- Edge >= 79
🔧 自定义配置
主题色彩
在 src/assets/css/common.css 中修改CSS变量：
:root {
--primary-color: #3498db;
--secondary-color: #3498db;
--success-color: #27ae60;
--warning-color: #f39c12;
--danger-color: #e74c3c;
}
动画效果
调整动画时长和缓动函数：
.transition {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
📈 性能优化
图片优化
- 使用WebP格式
- 响应式图片
- 懒加载支持
代码优化
- 组件懒加载
- CSS代码分割
- JavaScript压缩
🤝 贡献指南
- Fork 项目
- 创建特性分支
- 提交更改
- 推送到分支
- 创建Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
📞 联系我们
- 公司：上海丙维数字科技有限公司
- 地址：上海市宝山区高逸路112-118号3幢6422室
- 电话：13817819452
- 邮箱：bimwe@bimwe.com
- 官网：www.bimwe.com
丙维科技 - 技术驱动未来，服务创造价值 🚀