1
This commit is contained in:
张成
185
README.md
185
README.md
@@ -1,36 +1,175 @@
|
||||
# 官网
|
||||
# 丙维科技官网 - 现代化升级版
|
||||
|
||||
#### 项目介绍
|
||||
官网
|
||||
## 🚀 项目概述
|
||||
|
||||
#### 软件架构
|
||||
软件架构说明
|
||||
上海丙维数字科技有限公司官网的现代化升级版本，采用Vue2 + 现代化设计理念，突出公司作为AI技术公司的专业形象。
|
||||
|
||||
## ✨ 升级特性
|
||||
|
||||
#### 安装教程
|
||||
### 🎨 现代化设计
|
||||
- **渐变背景**：使用现代化的渐变色彩搭配
|
||||
- **卡片式布局**：清晰的信息层次和视觉分组
|
||||
- **阴影效果**：增强立体感和现代感
|
||||
- **圆角设计**：柔和的视觉体验
|
||||
|
||||
1. npm install 安装依赖项
|
||||
2
|
||||
### 🎭 动画效果
|
||||
- **页面加载动画**：淡入上升效果
|
||||
- **悬停交互**：卡片悬停时的变换效果
|
||||
- **滚动动画**：元素进入视口时的动画
|
||||
- **过渡效果**：平滑的状态转换
|
||||
|
||||
#### 使用说明
|
||||
### 📱 响应式设计
|
||||
- **移动端优化**：完全适配移动设备
|
||||
- **弹性布局**：使用CSS Grid和Flexbox
|
||||
- **断点设计**：多设备兼容性
|
||||
|
||||
### 🔧 功能组件
|
||||
- **现代化导航**：固定头部、下拉菜单
|
||||
- **横幅轮播**：增强的Swiper轮播
|
||||
- **业务展示**：专业的产品和服务展示
|
||||
- **联系信息**：清晰的联系方式展示
|
||||
|
||||
2. npm run serve 运行项目
|
||||
3. npm run build 编译项目
|
||||
## 🏗️ 技术架构
|
||||
|
||||
#### 参与贡献
|
||||
### 前端技术栈
|
||||
- **Vue2**：渐进式JavaScript框架
|
||||
- **Vue Router**：单页面应用路由
|
||||
- **Swiper**：触摸滑动组件
|
||||
- **CSS3**：现代化样式和动画
|
||||
|
||||
1. Fork 本项目
|
||||
2. 新建 Feat_xxx 分支
|
||||
3. 提交代码
|
||||
4. 新建 Pull Request
|
||||
### 设计系统
|
||||
- **色彩方案**：专业的蓝色主题
|
||||
- **字体系统**：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
|
||||
```
|
||||
|
||||
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
|
||||
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
|
||||
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
|
||||
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
|
||||
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
|
||||
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
||||
## 🎯 核心页面
|
||||
|
||||
### 首页 (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
|
||||
|
||||
---
|
||||
|
||||
**丙维科技** - 技术驱动未来，服务创造价值 🚀
|
||||
@@ -1,5 +1,7 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
['@vue/app', {
|
||||
useBuiltIns: 'entry'
|
||||
}]
|
||||
]
|
||||
}
|
||||
|
||||
BIN
docs/上海丙维数字科技有限公司简介.pdf
Normal file
BIN
docs/上海丙维数字科技有限公司简介.pdf
Normal file
Binary file not shown.
BIN
docs/以AI驱动产业变革的数字工匠.pdf
Normal file
BIN
docs/以AI驱动产业变革的数字工匠.pdf
Normal file
Binary file not shown.
172
docs/升级.md
Normal file
172
docs/升级.md
Normal file
@@ -0,0 +1,172 @@
|
||||
上海丙维数字科技有限公司简介 公司概况 上海丙维数字科技有限公司（以下简称“丙维科技”） ，成立于2018年10月22日，总部位于上海市宝山区高逸路112-118号3幢6422室，注册资本600万元人民币。公司致力于计算机软硬件、网络科技、信息科技领域的技术开发、技术咨询、技术转让和技术服务，以及计算机软件开发和计算机信息系统集成，专注于为客户提供高质量的数字化解决方案。 核心优势 丙维科技拥有一支由阿里、字节、腾讯等互联网巨头出身的技术精英组成的纯技术团队，技术实力扎实，经验丰富。公司自2022年起转型专注于AI交付内容，围绕客户需求提供智能应用解决方案，服务于多家知名大型企业，赢得了广泛的行业认可。 业务领域 丙维科技的经营范围涵盖：
|
||||
|
||||
技术开发与服务：从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务，致力于推动行业技术进步。 AI智能应用：聚焦人工智能技术，为客户提供定制化的智能解决方案，涵盖数据分析、智能推荐、自动化流程等多个领域。 系统集成与软件开发：提供高效的计算机信息系统集成服务，以及创新的软件开发，助力企业数字化转型。
|
||||
|
||||
发展历程与成就 自成立以来，丙维科技凭借卓越的技术能力和专业的服务态度，迅速在行业内崭露头角。公司核心团队由来自阿里、字节、腾讯等顶尖企业的资深开发人员组成，具备深厚的技术积累和丰富的项目经验。2022年，公司成功转型AI交付领域，专注于为客户提供高效、精准的智能应用解决方案，服务对象包括多家国内外知名企业，涉及金融、制造、零售等多个行业。 企业愿景 丙维科技以“技术驱动未来，服务创造价值”为核心理念，致力于通过前沿技术为客户提供卓越的数字化解决方案。公司以客户需求为导向，不断创新，追求技术与服务的完美结合，助力客户在数字化时代实现业务突破。 联系我们
|
||||
|
||||
注册地址：上海市宝山区高逸路112-118号3幢6422室 电话：13817819452 官网：www.bimwe.com（示例网站，具体请替换为真实网址）
|
||||
|
||||
丙维科技期待与您携手，共同开启智能数字化的新篇章！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
丙维
|
||||
上海丙维数字科技有限公司
|
||||
公司简介
|
||||
技术驱动未来，服务创造价值
|
||||
|
||||
上海丙维数字科技有限公司
|
||||
成立于2018年10月22日，注册资本600万元人民币
|
||||
总部位于上海市宝山区高逸路112-118号3幢6422室
|
||||
公司使命
|
||||
致力于计算机软硬件、网络科技、信息科技领域的技术开发、技术咨询、
|
||||
技术转让和技术服务，以及计算机软件开发和计算机信息系统集成，专注
|
||||
于为客户提供高质量的数字化解决方案。
|
||||
业务方向
|
||||
计算机软硬件、网络科技、信息科技领域的技术服务
|
||||
计算机软件开发和计算机信息系统集成
|
||||
专注于提供高质量的数字化解决方案
|
||||
2 上海丙维数字科技有限公司
|
||||
|
||||
核心优势
|
||||
顶尖技术团队
|
||||
由阿里、字节、腾讯等顶尖互联网公司资深
|
||||
开发人员组成
|
||||
技术积累深厚，项目经验丰富
|
||||
纯技术团队，专注于计算机软硬件、网络科
|
||||
技及信息科技领域
|
||||
AI领域战略转型
|
||||
2022年成功转型，将业务重心聚焦于AI交
|
||||
付领域
|
||||
围绕客户需求提供定制化智能应用解决方案
|
||||
提供数据分析、智能推荐、自动化流程等高
|
||||
效解决方案
|
||||
客户广泛认可
|
||||
为金融、制造、零售等多个行业的国内外知
|
||||
名企业提供服务
|
||||
成功案例证明了公司解决方案的价值
|
||||
在行业内树立了可靠、专业的品牌形象
|
||||
业务领域
|
||||
公司业务涵盖三大核心领域，全方位满足客户数字化需求
|
||||
技术开发与服务
|
||||
从事计算机软硬件、网络科技、信息科
|
||||
技领域的技术开发、咨询、转让和服务
|
||||
推动行业技术进步
|
||||
AI智能应用
|
||||
专注于人工智能技术，为客户提供定制
|
||||
化的智能解决方案
|
||||
数据分析 智能推荐 自动化流程
|
||||
系统集成与软件开发
|
||||
提供高效的计算机信息系统集成服务，
|
||||
以及创新的软件开发
|
||||
助力企业数字化转型
|
||||
通过全方位的业务布局，丙维科技为客户提供端到端的数字化解决方案
|
||||
技术开发与服务
|
||||
计算机软硬件
|
||||
提供计算机软硬件领域的技术开发、咨询、转让
|
||||
和服务，包括系统优化、性能提升、故障排除等
|
||||
全方位支持。
|
||||
网络科技
|
||||
从事网络科技领域的技术开发与服务，包括网络
|
||||
架构设计、系统集成、安全解决方案等，打造高
|
||||
效、安全的网络环境。
|
||||
信息科技
|
||||
专注于信息科技领域的技术探索，提供数据处
|
||||
理、信息管理系统、智能化解决方案等服务，助
|
||||
力企业信息转型。
|
||||
服务内容
|
||||
技术开发
|
||||
定制化技术解决方案
|
||||
技术咨询
|
||||
专业建议与分析
|
||||
技术转让
|
||||
知识产权与技术成果
|
||||
技术服务
|
||||
持续的技术支持
|
||||
我们的使命
|
||||
致力于推动行业技术进步，通过专业的技术开发与服务，助力客户实现数字化转型与业务增长。
|
||||
|
||||
AI智能应用
|
||||
人工智能技术
|
||||
自2022年起，丙维科技成功转型并专注于AI交付领域，围绕客户需求提供
|
||||
定制化的智能解决方案，致力于解决企业在数字化转型中遇到的核心痛
|
||||
点。
|
||||
智能解决方案领域
|
||||
上海丙维数字科技有限公司6/10数据分析
|
||||
利用先进的算法对海量数据进行深度挖掘与分析，提取商业洞见，为决策提供
|
||||
支持。
|
||||
智能推荐
|
||||
为电商、内容平台等构建个性化推荐系统，提升用户体验和转化率。
|
||||
自动化流程
|
||||
通过AI技术实现业务流程的自动化，提高运营效率，降低人力成本。
|
||||
丙维科技已成功为金融、制造、零售等多个行业的国内外知名企业提供高效、
|
||||
精准的智能应用解决方案。
|
||||
系统集成与软件开发
|
||||
提供高效的计算机信息系统集成服务，以及创新的软件开发，助力企业数字化转型。
|
||||
计算机信息系统集成服务
|
||||
为企业提供高效、稳定、可扩展的系统集成服务，确保各信息系统之间的无缝对接与协同工
|
||||
作。通过专业的技术整合，提升企业整体运营效率。
|
||||
创新软件开发
|
||||
提供创新的定制化软件开发服务，帮助企业构建符合自身业务需求的软件应用。通过现代化
|
||||
开发方法和前沿技术，打造企业数字化转型的核心竞争力。
|
||||
数字化转型解决方案
|
||||
结合系统集成与软件开发优势，为客户提供全方位数字化转型支持。从需求分析到系统实
|
||||
施，助力企业在数字化浪潮中实现业务突破和持续增长。
|
||||
系统集成流程
|
||||
数字化转型价值
|
||||
提升企业运营效率，降低人力成本
|
||||
实现业务流程自动化与智能化
|
||||
增强企业数据处理与决策能力
|
||||
提高用户体验，增强市场竞争力
|
||||
需求分析
|
||||
7 上海丙维数字科技有限公司
|
||||
方案设计 实施集成
|
||||
发展历程与成就
|
||||
发展里程碑
|
||||
核心团队
|
||||
公司拥有一支由来自阿里、字节、腾讯等顶尖互联网公司资深开发人员组成
|
||||
的技术精英团队，具备深厚的技术积累和丰富的项目经验
|
||||
服务行业
|
||||
公司专注于为金融、制造、零售等多个行业的国内外知名企业提供高效、精
|
||||
准的智能应用解决方案
|
||||
金融 制造 零售 其他行业
|
||||
2018年10月
|
||||
公司成立，开始在计算机软硬件、网络科技、信息科技等领域提供技术服
|
||||
务
|
||||
2022年
|
||||
公司成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供智能应
|
||||
用解决方案
|
||||
现今
|
||||
公司已为多家国内外知名大型企业提供服务，业务范围覆盖多个行业，赢
|
||||
得了广泛的行业认可
|
||||
8 上海丙维数字科技有限公司
|
||||
|
||||
企业愿景
|
||||
技术驱动未来，服务创造价值
|
||||
创新理念
|
||||
以客户需求为导向，将持续创新作为企业发展
|
||||
的基石，深入理解客户在数字化转型过程中的
|
||||
挑战与机遇。
|
||||
技术融合
|
||||
追求技术与服务的完美结合，通过不断的技术
|
||||
探索和应用优化，为客户提供技术领先且高度
|
||||
契合业务需求的解决方案。
|
||||
价值创造
|
||||
致力于运用前沿技术，为客户提供卓越的数字
|
||||
化解决方案，助力客户在激烈的市场竞争中实
|
||||
现业务突破和持续增长。
|
||||
展望未来
|
||||
丙维科技将继续深耕智能数字化领域，与合作伙伴及客户携手并进，共同开启一个更加智能、高效的数字化新篇章，为社会和行业的进步贡献力量。
|
||||
|
||||
注册地址
|
||||
上海市宝山区高逸路
|
||||
112-118号3幢6422室
|
||||
电话
|
||||
13817819452
|
||||
官网
|
||||
www.bimwe.com
|
||||
感谢您的关注
|
||||
丙维科技期待与您携手，共同开启智能数字化的新篇章！
|
||||
1 上海丙维数字科技有限公司
|
||||
14555
package-lock.json
generated
14555
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@@ -5,24 +5,25 @@
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"build:rem": "ENABLE_PX_TO_REM=true vue-cli-service build",
|
||||
"build:px": "ENABLE_PX_TO_REM=false vue-cli-service build",
|
||||
"build:mobile": "REM_ROOT_VALUE=37.5 ENABLE_PX_TO_REM=true vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"es6-promise": "^4.2.5",
|
||||
"image-webpack-loader": "^7.0.1",
|
||||
"jquery": "^3.5.1",
|
||||
"less-loader": "^5.0.0",
|
||||
"url-loader": "^4.1.1",
|
||||
"image-webpack-loader": "^8.1.0",
|
||||
"swiper": "^8.4.7",
|
||||
"vue": "^2.5.17",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-swiper": "^0.5.0",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.3",
|
||||
"@vue/cli-service": "^3.0.3",
|
||||
"less": "^4.1.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss-pxtorem": "^6.1.0",
|
||||
"vue-template-compiler": "^2.5.17"
|
||||
},
|
||||
"postcss": {
|
||||
|
||||
57
postcss.config.js
Normal file
57
postcss.config.js
Normal file
@@ -0,0 +1,57 @@
|
||||
// 根据环境变量决定是否启用 px 转 rem
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
const enablePxToRem = process.env.ENABLE_PX_TO_REM !== 'false';
|
||||
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
// 只在生产环境或明确启用时转换 px 为 rem
|
||||
...(enablePxToRem && {
|
||||
'postcss-pxtorem': {
|
||||
// 根元素字体大小，通常是 16px
|
||||
// 你可以根据设计稿调整这个值
|
||||
// 如果设计稿是 750px 宽度，可以设置为 37.5
|
||||
// 如果设计稿是 375px 宽度，可以设置为 37.5
|
||||
rootValue: process.env.REM_ROOT_VALUE || 16,
|
||||
|
||||
// 需要转换的属性，* 表示所有属性
|
||||
propList: ['*'],
|
||||
|
||||
// 不转换的选择器，可以添加特定的类名
|
||||
selectorBlackList: [
|
||||
'.no-rem', // 添加 .no-rem 类来阻止转换
|
||||
'.px-only', // 添加 .px-only 类来阻止转换
|
||||
'.keep-px' // 添加 .keep-px 类来阻止转换
|
||||
],
|
||||
|
||||
// 是否替换属性值
|
||||
replace: true,
|
||||
|
||||
// 是否转换媒体查询中的 px
|
||||
mediaQuery: false,
|
||||
|
||||
// 最小转换的像素值，小于等于此值的不转换
|
||||
minPixelValue: 1,
|
||||
|
||||
// 排除的目录
|
||||
exclude: /node_modules/i,
|
||||
|
||||
// 转换后的精度，小数点后几位
|
||||
unitPrecision: 5,
|
||||
|
||||
// 自定义转换函数
|
||||
transformUnit: function(value, unit) {
|
||||
const numValue = parseFloat(value);
|
||||
|
||||
// 如果值小于等于 1px，不转换（保持像素）
|
||||
if (numValue <= 1) {
|
||||
return value + unit;
|
||||
}
|
||||
|
||||
// 如果值大于 1px，转换为 rem
|
||||
return (numValue / 16) + 'rem';
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 283 B After Width: | Height: | Size: 528 B |
@@ -5,7 +5,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
<title>上海丙维科技有限公司</title>
|
||||
|
||||
</head>
|
||||
|
||||
@@ -1247,7 +1247,7 @@ input[type="text"].search {
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
}
|
||||
|
||||
#.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li:last-child {
|
||||
.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -1290,7 +1290,7 @@ div.googleMap {
|
||||
/* IE6-9 */
|
||||
-webkit-filter: grayscale(99%);
|
||||
/* Chrome 19+ & Safari 6+ */
|
||||
-webkit-backface?visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
/* Fix for transition flickering */
|
||||
}
|
||||
|
||||
@@ -1359,7 +1359,7 @@ div.googleMap {
|
||||
}
|
||||
|
||||
|
||||
/* SMALLER LAPTOPS */
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 1400px) {
|
||||
table.mainMenu {
|
||||
@@ -1377,7 +1377,7 @@ div.googleMap {
|
||||
}
|
||||
|
||||
|
||||
/* SMALLER LAPTOPS */
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.footer>.row1 table.footerTable {
|
||||
@@ -1842,3 +1842,737 @@ div.googleMap {
|
||||
|
||||
|
||||
/* END MEDIA QUERIES */
|
||||
|
||||
/* 现代化全局样式 */
|
||||
|
||||
/* 基础重置 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'ProximaNova-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 现代化按钮样式 */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
|
||||
box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4);
|
||||
}
|
||||
|
||||
/* 现代化卡片样式 */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
padding: 30px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 现代化输入框样式 */
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||||
}
|
||||
|
||||
/* 现代化标签样式 */
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* 现代化表格样式 */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.table tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 现代化列表样式 */
|
||||
.list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: #f8f9fa;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 现代化徽章样式 */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: #f39c12;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
/* 现代化进度条样式 */
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #e9ecef;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #3498db, #9b59b6);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 现代化加载动画 */
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 现代化工具提示 */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 现代化模态框样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
margin: 5% auto;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
animation: modalSlideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 现代化通知样式 */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
border-left: 4px solid #3498db;
|
||||
z-index: 1000;
|
||||
animation: slideInRight 0.3s ease;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
border-left-color: #27ae60;
|
||||
}
|
||||
|
||||
.notification.warning {
|
||||
border-left-color: #f39c12;
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
border-left-color: #e74c3c;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 现代化分页样式 */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: #2c3e50;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination-item:hover,
|
||||
.pagination-item.active {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
/* 现代化面包屑导航 */
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 现代化标签页样式 */
|
||||
.tabs {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
text-decoration: none;
|
||||
color: #6c757d;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-link:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.tab-link.active {
|
||||
color: #3498db;
|
||||
border-bottom-color: #3498db;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 现代化折叠面板样式 */
|
||||
.accordion {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.accordion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
padding: 15px 20px;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.accordion-header:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.accordion-title {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.accordion-header.active .accordion-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
padding: 0 20px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.accordion-header.active + .accordion-content {
|
||||
padding: 20px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
/* 现代化滑块样式 */
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #e9ecef;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #3498db;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #3498db;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
/* 现代化开关样式 */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider-switch {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: 0.4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider-switch:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider-switch {
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
input:checked + .slider-switch:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
/* 响应式工具类 */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* 现代化间距工具类 */
|
||||
.m-0 { margin: 0 !important; }
|
||||
.m-1 { margin: 0.25rem !important; }
|
||||
.m-2 { margin: 0.5rem !important; }
|
||||
.m-3 { margin: 1rem !important; }
|
||||
.m-4 { margin: 1.5rem !important; }
|
||||
.m-5 { margin: 3rem !important; }
|
||||
|
||||
.p-0 { padding: 0 !important; }
|
||||
.p-1 { padding: 0.25rem !important; }
|
||||
.p-2 { padding: 0.5rem !important; }
|
||||
.p-3 { padding: 1rem !important; }
|
||||
.p-4 { padding: 1.5rem !important; }
|
||||
.p-5 { padding: 3rem !important; }
|
||||
|
||||
/* 现代化颜色工具类 */
|
||||
.text-primary { color: #3498db !important; }
|
||||
.text-success { color: #27ae60 !important; }
|
||||
.text-warning { color: #f39c12 !important; }
|
||||
.text-danger { color: #e74c3c !important; }
|
||||
.text-info { color: #17a2b8 !important; }
|
||||
.text-light { color: #6c757d !important; }
|
||||
.text-dark { color: #2c3e50 !important; }
|
||||
|
||||
.bg-primary { background-color: #3498db !important; }
|
||||
.bg-success { background-color: #27ae60 !important; }
|
||||
.bg-warning { background-color: #f39c12 !important; }
|
||||
.bg-danger { background-color: #e74c3c !important; }
|
||||
.bg-info { background-color: #17a2b8 !important; }
|
||||
.bg-light { background-color: #f8f9fa !important; }
|
||||
.bg-dark { background-color: #2c3e50 !important; }
|
||||
|
||||
/* 现代化阴影工具类 */
|
||||
.shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow-xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; }
|
||||
|
||||
/* 现代化圆角工具类 */
|
||||
.rounded { border-radius: 0.375rem !important; }
|
||||
.rounded-sm { border-radius: 0.25rem !important; }
|
||||
.rounded-lg { border-radius: 0.5rem !important; }
|
||||
.rounded-xl { border-radius: 0.75rem !important; }
|
||||
.rounded-full { border-radius: 9999px !important; }
|
||||
|
||||
/* 现代化过渡工具类 */
|
||||
.transition { transition: all 0.3s ease !important; }
|
||||
.transition-fast { transition: all 0.15s ease !important; }
|
||||
.transition-slow { transition: all 0.5s ease !important; }
|
||||
|
||||
/* 现代化变换工具类 */
|
||||
.transform { transform: none !important; }
|
||||
.scale-95 { transform: scale(0.95) !important; }
|
||||
.scale-105 { transform: scale(1.05) !important; }
|
||||
.rotate-90 { transform: rotate(90deg) !important; }
|
||||
.rotate-180 { transform: rotate(180deg) !important; }
|
||||
|
||||
/* 响应式断点 */
|
||||
@media (max-width: 576px) {
|
||||
.container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 10% auto;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.tabs .tab-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 现代化滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* 现代化选择文本样式 */
|
||||
::selection {
|
||||
background: rgba(52, 152, 219, 0.3);
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: rgba(52, 152, 219, 0.3);
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* 现代化焦点样式 */
|
||||
:focus {
|
||||
outline: 2px solid #3498db;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 现代化禁用状态样式 */
|
||||
.disabled,
|
||||
[disabled] {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 现代化加载状态样式 */
|
||||
.loading-state {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading-state::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-state::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -10px 0 0 -10px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1,34 +1,424 @@
|
||||
/*PAGE*/
|
||||
|
||||
/* 使用 CSS 自定义属性定义响应式断点 */
|
||||
:root {
|
||||
/* 响应式断点 */
|
||||
--breakpoint-xs: 380px;
|
||||
--breakpoint-sm: 480px;
|
||||
--breakpoint-md: 620px;
|
||||
--breakpoint-lg: 768px;
|
||||
--breakpoint-xl: 992px;
|
||||
--breakpoint-xxl: 1200px;
|
||||
--breakpoint-xxxl: 1500px;
|
||||
--breakpoint-xxxxl: 1600px;
|
||||
|
||||
/* 间距变量 */
|
||||
--spacing-xs: 0.5em;
|
||||
--spacing-sm: 1em;
|
||||
--spacing-md: 1.5em;
|
||||
--spacing-lg: 2em;
|
||||
--spacing-xl: 3em;
|
||||
--spacing-xxl: 4em;
|
||||
--spacing-xxxl: 5em;
|
||||
--spacing-xxxxl: 7em;
|
||||
|
||||
/* 字体大小变量 */
|
||||
--font-size-xs: 0.9em;
|
||||
--font-size-sm: 1.2em;
|
||||
--font-size-md: 1.5em;
|
||||
--font-size-lg: 2.5em;
|
||||
--font-size-xl: 3em;
|
||||
|
||||
/* 布局变量 */
|
||||
--sidebar-width: 25%;
|
||||
--content-width: 75%;
|
||||
--content-padding: 4em;
|
||||
--sidebar-padding: 5em;
|
||||
}
|
||||
|
||||
.contentPage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
margin: 0 auto 0 auto;
|
||||
padding-top: 7em;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--spacing-xxxxl);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 容器查询支持 */
|
||||
container-type: inline-size;
|
||||
container-name: content-page;
|
||||
}
|
||||
|
||||
/* CONTENT TABLES */
|
||||
|
||||
.contentTableLeft {
|
||||
width: 25%;
|
||||
padding-left: 5em;
|
||||
padding-top: 3em;
|
||||
width: var(--sidebar-width);
|
||||
padding-left: var(--sidebar-padding);
|
||||
padding-top: var(--spacing-xl);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
width: 75%;
|
||||
width: var(--content-width);
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 4.0em;
|
||||
padding-left: var(--content-padding);
|
||||
padding-right: var(--content-padding);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 使用容器查询替代媒体查询 */
|
||||
@container content-page (max-width: 1600px) {
|
||||
.contentTableRight {
|
||||
padding-right: 8em;
|
||||
}
|
||||
}
|
||||
|
||||
/* END CONTENT TABLES */
|
||||
@container content-page (max-width: 1500px) {
|
||||
.contentTableRight {
|
||||
padding-right: 6em;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 1200px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.contentTableLeft {
|
||||
padding-left: var(--spacing-xl);
|
||||
padding-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
padding-top: var(--spacing-xl);
|
||||
padding-left: var(--content-padding);
|
||||
padding-right: var(--content-padding);
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 992px) {
|
||||
.contentTableLeft {
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
padding-top: 4.5em;
|
||||
padding-left: var(--spacing-xl);
|
||||
padding-right: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-top: 4em;
|
||||
padding-bottom: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
border-top: 0.4em solid transparent;
|
||||
border-bottom: 0.4em solid transparent;
|
||||
border-left: 0.4em solid #ee3224;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
.categoryItems {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-top: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 容器查询回退方案 - 为不支持容器查询的浏览器提供媒体查询 */
|
||||
@supports not (container-type: inline-size) {
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 8.0em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1500px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 6.0em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
}
|
||||
.contentTableLeft {
|
||||
padding-left: 3em;
|
||||
padding-top: 3em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 3em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 4.0em;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.contentTableLeft {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 4.5em;
|
||||
padding-left: 3em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 90%;
|
||||
}
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
.accordion {
|
||||
padding: 2em;
|
||||
}
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-top: 4em;
|
||||
padding-bottom: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
display: none;
|
||||
}
|
||||
.triangle {
|
||||
border-top: 0.4em solid transparent;
|
||||
border-bottom: 0.4em solid transparent;
|
||||
border-left: 0.4em solid #ee3224;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
.categoryItems {
|
||||
padding: 0;
|
||||
}
|
||||
.accordion {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
}
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* NAV SIDEBAR */
|
||||
@@ -479,179 +869,396 @@
|
||||
|
||||
/* MEDIA QUERIES */
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 8.0em;
|
||||
}
|
||||
|
||||
/* 现代 CSS 优化和增强功能 */
|
||||
|
||||
/* 使用 CSS Grid 实现更灵活的布局 */
|
||||
.contentPage {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) var(--content-width);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1500px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 6.0em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
}
|
||||
.contentTableLeft {
|
||||
padding-left: 3em;
|
||||
padding-top: 3em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 3em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 4.0em;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.contentTableLeft {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 4.5em;
|
||||
padding-left: 3em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* LARGE TABLETS */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-top: 5.5em;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的国际化支持 */
|
||||
.contentTableLeft {
|
||||
padding-inline-start: var(--sidebar-padding);
|
||||
padding-block-start: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
padding-inline: var(--content-padding);
|
||||
padding-block-start: 3.5em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 自定义属性实现主题切换 */
|
||||
:root {
|
||||
/* 颜色主题 */
|
||||
--primary-color: #ee3224;
|
||||
--secondary-color: #737373;
|
||||
--border-color: #DCDCDC;
|
||||
--text-color: #000;
|
||||
--link-hover-color: #737373;
|
||||
|
||||
/* 动画变量 */
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
}
|
||||
|
||||
/* 深色主题支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #ff6b6b;
|
||||
--secondary-color: #a0a0a0;
|
||||
--border-color: #404040;
|
||||
--text-color: #ffffff;
|
||||
--link-hover-color: #ff6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 自定义属性 */
|
||||
.breadcrumb>a:hover {
|
||||
color: var(--link-hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.accordion:after {
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的 RTL 支持 */
|
||||
.accordion:after {
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的间距 */
|
||||
.accordion>.content {
|
||||
margin-block-start: var(--spacing-lg);
|
||||
padding-inline-start: 0.2em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的边框 */
|
||||
.accordion>ul>li.category {
|
||||
margin-block-end: 1.2em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的定位 */
|
||||
.accordion>ul>li.category>a.categoryHead {
|
||||
margin-block-end: 1.2em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的布局 */
|
||||
.accordion>ul>li.category>a.categoryHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的响应式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion {
|
||||
padding-inline: var(--spacing-lg);
|
||||
padding-block: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端优化 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-block-start: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的图片优化 */
|
||||
@container content-page (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的三角形样式 */
|
||||
.triangle {
|
||||
border-block: 0.4em solid transparent;
|
||||
border-inline-start: 0.4em solid var(--primary-color);
|
||||
margin-inline-end: 0.6em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的链接样式 */
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-block-end: 0;
|
||||
color: var(--primary-color);
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
.linkContactUs:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的面包屑样式 */
|
||||
.breadcrumb {
|
||||
margin-block-end: var(--spacing-lg);
|
||||
margin-inline-end: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的分类项样式 */
|
||||
.categoryItems {
|
||||
padding-inline: 0;
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端内容样式 */
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
text-align: center;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: var(--border-radius);
|
||||
transition: background-color var(--transition-normal);
|
||||
}
|
||||
|
||||
.accordion div.mobileContent a.seekJob:hover {
|
||||
background: var(--link-hover-color);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的页面横幅样式 */
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: 1.2;
|
||||
margin-block: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
margin-block: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端横幅样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 90%;
|
||||
}
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
.accordion {
|
||||
padding: 2em;
|
||||
}
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@container content-page (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* PHONES */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-top: 4em;
|
||||
padding-bottom: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
display: none;
|
||||
}
|
||||
.triangle {
|
||||
border-top: 0.4em solid transparent;
|
||||
border-bottom: 0.4em solid transparent;
|
||||
border-left: 0.4em solid #ee3224;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的页面内容样式 */
|
||||
.contentPage {
|
||||
padding-block-start: var(--spacing-xxxxl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-block-start: 5.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-block-start: 4em;
|
||||
padding-block-end: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的表格样式 */
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
margin-block-end: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-block-end: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端表格样式 */
|
||||
@container content-page (max-width: 1200px) {
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-block-end: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端内容样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端导航样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端图标样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端链接样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding-block: var(--spacing-sm);
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端页面横幅样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端布局样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端手风琴样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端链接样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端字体样式 */
|
||||
@container content-page (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端三角形样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.triangle {
|
||||
border-block: 0.4em solid transparent;
|
||||
border-inline-start: 0.4em solid var(--primary-color);
|
||||
margin-inline-end: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端分类项样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.categoryItems {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端手风琴样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion {
|
||||
padding-bottom: 0;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端求职包装器样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-top: 2em;
|
||||
margin-block-start: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端求职链接样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 380px) {
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端客户图标样式 */
|
||||
@container content-page (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* END NEW BY MARK */
|
||||
29
src/assets/icon.svg
Normal file
29
src/assets/icon.svg
Normal file
@@ -0,0 +1,29 @@
|
||||
<svg class="css-ze2te4 css-qd6ojx" viewBox="0 0 100 100">
|
||||
<g
|
||||
transform="translate(-1.3683870295384977, -1.3683870295384977) scale(0.3424559467337198)"
|
||||
class="css-owa8dd" fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.719 -0.6951 0.6951 0.719 -62.0973 146.4242)"
|
||||
width="283" height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path:url(#a);">
|
||||
<path
|
||||
d="M67.2,155.9l-59.3-1c-2.3,0-4,1.9-3.9,4c1.4,22.6,7.8,43.7,18.3,62.4c1,1.7,3,2.5,4.8,1.7l57.5-24.6 c3.7-1.6,8.1-1.3,11.5,1.1c4.4,3.2,5.8,9.2,3.6,13.9l-26.7,57c-0.8,1.7-0.2,3.9,1.5,4.9c18.3,11,39.2,18.2,61.7,20.4 c2.2,0.2,4.1-1.5,4.2-3.8l1-59.3C142,190.9,108.9,156.6,67.2,155.9z"></path>
|
||||
<path
|
||||
d="M144.1,67.2l1-59.3c0-2.3-1.9-4-4-3.9c-22.6,1.4-43.7,7.8-62.4,18.3c-1.7,1-2.5,3-1.7,4.8l24.6,57.5 c1.6,3.7,1.3,8.1-1.1,11.5c-3.2,4.4-9.1,5.8-13.9,3.6L29.7,72.9c-1.7-0.8-3.9-0.2-4.9,1.5c-11,18.3-18.2,39.2-20.4,61.7 c-0.2,2.2,1.5,4.1,3.8,4.2l59.3,1C109.1,142,143.4,108.9,144.1,67.2z"></path>
|
||||
<path
|
||||
d="M232.8,144.1l59.3,1c2.3,0,4-1.9,3.9-4c-1.4-22.6-7.8-43.7-18.3-62.4c-1-1.7-3-2.5-4.8-1.7l-57.5,24.6 c-3.7,1.6-8.1,1.3-11.5-1.1c-4.4-3.2-5.8-9.1-3.6-13.9L227,29.8c0.8-1.7,0.2-3.9-1.5-4.9c-18.2-11.1-39.2-18.3-61.7-20.4 c-2.2-0.2-4.1,1.5-4.2,3.8l-1,59.3C158,109.1,191.1,143.4,232.8,144.1z"></path>
|
||||
<path
|
||||
d="M198.2,215.1c-2.1-4.9-0.6-10.7,4.1-13.8c3.4-2.4,7.8-2.5,11.5-0.7l56.6,26.5c1.7,0.8,3.9,0.2,4.9-1.5 c11-18.3,18.2-39.2,20.3-61.7c0.2-2.2-1.5-4.1-3.8-4.2l-59.3-1c-41.7-0.7-76,32.4-76.7,74.1l-1,59.3c0,2.3,1.9,4,4,3.9 c22.6-1.4,43.7-7.8,62.4-18.3c1.7-1,2.5-3,1.7-4.8L198.2,215.1z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
29
src/assets/img/icon.svg
Normal file
29
src/assets/img/icon.svg
Normal file
@@ -0,0 +1,29 @@
|
||||
<svg class="css-ze2te4 css-qd6ojx" viewBox="0 0 100 100">
|
||||
<g
|
||||
transform="translate(-1.3683870295384977, -1.3683870295384977) scale(0.3424559467337198)"
|
||||
class="css-owa8dd" fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.719 -0.6951 0.6951 0.719 -62.0973 146.4242)"
|
||||
width="283" height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path:url(#a);">
|
||||
<path
|
||||
d="M67.2,155.9l-59.3-1c-2.3,0-4,1.9-3.9,4c1.4,22.6,7.8,43.7,18.3,62.4c1,1.7,3,2.5,4.8,1.7l57.5-24.6 c3.7-1.6,8.1-1.3,11.5,1.1c4.4,3.2,5.8,9.2,3.6,13.9l-26.7,57c-0.8,1.7-0.2,3.9,1.5,4.9c18.3,11,39.2,18.2,61.7,20.4 c2.2,0.2,4.1-1.5,4.2-3.8l1-59.3C142,190.9,108.9,156.6,67.2,155.9z"></path>
|
||||
<path
|
||||
d="M144.1,67.2l1-59.3c0-2.3-1.9-4-4-3.9c-22.6,1.4-43.7,7.8-62.4,18.3c-1.7,1-2.5,3-1.7,4.8l24.6,57.5 c1.6,3.7,1.3,8.1-1.1,11.5c-3.2,4.4-9.1,5.8-13.9,3.6L29.7,72.9c-1.7-0.8-3.9-0.2-4.9,1.5c-11,18.3-18.2,39.2-20.4,61.7 c-0.2,2.2,1.5,4.1,3.8,4.2l59.3,1C109.1,142,143.4,108.9,144.1,67.2z"></path>
|
||||
<path
|
||||
d="M232.8,144.1l59.3,1c2.3,0,4-1.9,3.9-4c-1.4-22.6-7.8-43.7-18.3-62.4c-1-1.7-3-2.5-4.8-1.7l-57.5,24.6 c-3.7,1.6-8.1,1.3-11.5-1.1c-4.4-3.2-5.8-9.1-3.6-13.9L227,29.8c0.8-1.7,0.2-3.9-1.5-4.9c-18.2-11.1-39.2-18.3-61.7-20.4 c-2.2-0.2-4.1,1.5-4.2,3.8l-1,59.3C158,109.1,191.1,143.4,232.8,144.1z"></path>
|
||||
<path
|
||||
d="M198.2,215.1c-2.1-4.9-0.6-10.7,4.1-13.8c3.4-2.4,7.8-2.5,11.5-0.7l56.6,26.5c1.7,0.8,3.9,0.2,4.9-1.5 c11-18.3,18.2-39.2,20.3-61.7c0.2-2.2-1.5-4.1-3.8-4.2l-59.3-1c-41.7-0.7-76,32.4-76.7,74.1l-1,59.3c0,2.3,1.9,4,4,3.9 c22.6-1.4,43.7-7.8,62.4-18.3c1.7-1,2.5-3,1.7-4.8L198.2,215.1z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 5.9 KiB |
45
src/assets/img/logo.svg
Normal file
45
src/assets/img/logo.svg
Normal file
@@ -0,0 +1,45 @@
|
||||
<svg width="448.3" height="309.7"
|
||||
viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
|
||||
<defs id="SvgjsDefs9244"></defs>
|
||||
<g id="SvgjsG9245" featurekey="JQyOZB-0"
|
||||
transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
|
||||
fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
|
||||
height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path: url(#a)"
|
||||
fill="#0097f3"
|
||||
>
|
||||
<path
|
||||
d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
|
||||
<path
|
||||
d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
|
||||
<path
|
||||
d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
|
||||
<path
|
||||
d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="SvgjsG9243" featurekey="SbCDzn-3"
|
||||
transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
<g id="SvgjsG9246" featurekey="SbCDzn-0"
|
||||
transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
44
src/assets/img/logo_b.svg
Normal file
44
src/assets/img/logo_b.svg
Normal file
@@ -0,0 +1,44 @@
|
||||
<svg width="448.3" height="309.7"
|
||||
viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
|
||||
<defs id="SvgjsDefs9244"></defs>
|
||||
<g id="SvgjsG9245" featurekey="JQyOZB-0"
|
||||
transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
|
||||
fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
|
||||
height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path: url(#a)"
|
||||
>
|
||||
<path
|
||||
d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
|
||||
<path
|
||||
d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
|
||||
<path
|
||||
d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
|
||||
<path
|
||||
d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="SvgjsG9243" featurekey="SbCDzn-3"
|
||||
transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
|
||||
fill="#fafafa">
|
||||
<path
|
||||
d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
<g id="SvgjsG9246" featurekey="SbCDzn-0"
|
||||
transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
|
||||
fill="#fafafa">
|
||||
<path
|
||||
d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 528 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
45
src/assets/logo.svg
Normal file
45
src/assets/logo.svg
Normal file
@@ -0,0 +1,45 @@
|
||||
<svg width="448.3" height="309.7"
|
||||
viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
|
||||
<defs id="SvgjsDefs9244"></defs>
|
||||
<g id="SvgjsG9245" featurekey="JQyOZB-0"
|
||||
transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
|
||||
fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
|
||||
height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path: url(#a)"
|
||||
fill="#0097f3"
|
||||
>
|
||||
<path
|
||||
d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
|
||||
<path
|
||||
d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
|
||||
<path
|
||||
d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
|
||||
<path
|
||||
d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="SvgjsG9243" featurekey="SbCDzn-3"
|
||||
transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
<g id="SvgjsG9246" featurekey="SbCDzn-0"
|
||||
transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -3,7 +3,7 @@ import ihead from './components/ihead.vue'
|
||||
import ifooter from './components/ifooter.vue'
|
||||
import icontent from './components/icontent.vue'
|
||||
import leftMenu from './components/leftMenu.vue'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||||
|
||||
class Component {
|
||||
|
||||
@@ -12,9 +12,9 @@ class Component {
|
||||
Vue.component("ifooter", ifooter);
|
||||
Vue.component("icontent", icontent);
|
||||
Vue.component("leftMenu", leftMenu);
|
||||
Vue.component("swiper", swiper);
|
||||
Vue.component("swiperSlide", swiperSlide);
|
||||
|
||||
// 注册Swiper组件
|
||||
Vue.use(VueAwesomeSwiper);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,83 +1,370 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="footer">
|
||||
<div class="row1">
|
||||
<div class="pageWidth">
|
||||
<table class="footerTable">
|
||||
<thead class="bread desktop smallDesktop">
|
||||
<tr>
|
||||
<th>我们的办公室</th>
|
||||
<th>快速链接</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="stackable">
|
||||
<ul class="quickLinks bread">
|
||||
<li v-for="item in contactData" :key="item.name">
|
||||
<label>{{item.name+"："}}</label>
|
||||
<label>{{item.value}}</label>
|
||||
</li>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<!-- 主要页脚信息 -->
|
||||
<div class="footer-main">
|
||||
<div class="footer-section">
|
||||
<div class="footer-logo">
|
||||
<img :src="require('@/assets/img/logo.png')" alt="丙维科技" class="logo">
|
||||
<h3>上海丙维数字科技有限公司</h3>
|
||||
<p class="company-desc">技术驱动未来，服务创造价值</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>关于我们</h4>
|
||||
<ul class="footer-links">
|
||||
<li><router-link to="/aboutUs/aboutUs">公司简介</router-link></li>
|
||||
<li><router-link to="/aboutUs/propystTechnology">技术优势</router-link></li>
|
||||
<li><router-link to="/aboutUs/cooperateWithUs">合作共赢</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td class="quickLinksContainer">
|
||||
<div class="mobile mobileFooterTitle bread">Snabblänkar</div>
|
||||
<ul class="quickLinks bread">
|
||||
<li v-for="menu in menus" :key="menu.name">
|
||||
<router-link :to="menu.url">{{menu.name}}</router-link>
|
||||
</li>
|
||||
<div class="footer-section">
|
||||
<h4>解决方案</h4>
|
||||
<ul class="footer-links">
|
||||
<li><router-link to="/ourPlan/iot">物联网</router-link></li>
|
||||
<li><router-link to="/ourPlan/smartbuildings">智能建筑</router-link></li>
|
||||
<li><router-link to="/ourPlan/facilityManagement">设施管理</router-link></li>
|
||||
<li><router-link to="/ourPlan/reaEstate">房地产</router-link></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row2">
|
||||
<div class="contentContainer pageWidth">
|
||||
<div class="bread">Copyright © 2018 Bimwe Technology co. LTD</div>
|
||||
|
||||
<div class="beian-box">
|
||||
<img src="../assets/img/beian_icon.png" style="width:20px;" />
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备19005870号-1</a>
|
||||
<div class="footer-section">
|
||||
<h4>联系我们</h4>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">📍</span>
|
||||
<span>上海市宝山区高逸路112-118号3幢6422室</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">📞</span>
|
||||
<span>13817819452</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">✉️</span>
|
||||
<span>bimwe@bimwe.com</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-icon">🌐</span>
|
||||
<span>www.bimwe.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚底部 -->
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-bottom-content">
|
||||
<div class="copyright">
|
||||
<p>© 2024 上海丙维数字科技有限公司. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="footer-extra">
|
||||
<div class="beian">
|
||||
<img :src="require('@/assets/img/beian_icon.png')" alt="备案" class="beian-icon">
|
||||
<span>沪ICP备XXXXXXXX号</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<div class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
|
||||
<span class="arrow">↑</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ifooter',
|
||||
data() {
|
||||
return {
|
||||
menus: window.config.menus,
|
||||
contactData: [
|
||||
{ name: '地址', value: '上海市宝山区' },
|
||||
{ name: '手机', value: '13817819452' },
|
||||
{ name: '邮箱', value: 'Zhp@bimwe.com' }
|
||||
]
|
||||
showBackToTop: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initScrollListener()
|
||||
},
|
||||
methods: {
|
||||
initScrollListener() {
|
||||
window.addEventListener('scroll', () => {
|
||||
this.showBackToTop = window.pageYOffset > 300
|
||||
})
|
||||
},
|
||||
|
||||
scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.quickLinks li {
|
||||
float: left;
|
||||
margin: 5px 20px;
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
color: white;
|
||||
position: relative;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.beian-box {
|
||||
.footer-content {
|
||||
padding: 60px 0 0 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 主要页脚区域 */
|
||||
.footer-main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #ecf0f1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-section h4::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #3498db;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.footer-logo .logo {
|
||||
height: 50px;
|
||||
margin-bottom: 15px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.footer-logo h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.company-desc {
|
||||
color: #bdc3c7;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 链接列表 */
|
||||
.footer-links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #bdc3c7;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #3498db;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.footer-links a::before {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover::before {
|
||||
opacity: 1;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
/* 联系信息 */
|
||||
.contact-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #bdc3c7;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 1.2rem;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 页脚底部 */
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.copyright p {
|
||||
color: #95a5a6;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.beian {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #95a5a6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.beian-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: brightness(0) invert(0.6);
|
||||
}
|
||||
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
a {
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.back-to-top .arrow {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
padding: 40px 0 0 0;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.back-to-top .arrow {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.footer-section {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.footer-section:nth-child(1) { animation-delay: 0.1s; }
|
||||
.footer-section:nth-child(2) { animation-delay: 0.2s; }
|
||||
.footer-section:nth-child(3) { animation-delay: 0.3s; }
|
||||
.footer-section:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果增强 */
|
||||
.footer-section:hover {
|
||||
transform: translateY(-2px);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
/* 渐变背景动画 */
|
||||
.footer {
|
||||
background-size: 200% 200%;
|
||||
animation: gradientShift 10s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,79 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="header bottomShadow">
|
||||
<div class="header bottomShadow" :class="{ 'mini': isMiniHeader }">
|
||||
<div class="content pageWidth">
|
||||
<div class="top">
|
||||
<div class="content bread">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="contact contactLinks">
|
||||
<img src="../assets/img/svg/mobile.svg" class="inlineTextIcon inlineTextPhoneIcon"><span>
|
||||
<a href="tel:13817819452">13817819452</a></span> <img src="../assets/img/svg/airplane.svg" class="inlineTextIcon">
|
||||
<span><a href="mailto:bimwe@bimwe.com">bimwe@bimwe.com</a></span>
|
||||
</td>
|
||||
<td class="searchContainer desktop">
|
||||
<input type="text" class="search" placeholder="Sök" style="margin-left:1em;width:10em">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BOTTOM - DESKTOP -->
|
||||
|
||||
<!-- 主要导航区域 -->
|
||||
<div class="bottom desktop">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="logoCell">
|
||||
<img class="logo" src="../assets/img/logo.png">
|
||||
</td>
|
||||
<td class="mainMenuCell">
|
||||
<table class="mainMenu">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h2" v-for="menu in menus" :key="menu.name">
|
||||
<router-link :to="menu.url">
|
||||
<div class="nav-container">
|
||||
<div class="logoCell">
|
||||
<img class="logo" :src="image_paths.logo" alt="丙维科技">
|
||||
</div>
|
||||
<div class="mainMenuCell">
|
||||
<nav class="mainMenu">
|
||||
<div class="nav-item" v-for="menu in menus" :key="menu.name">
|
||||
<router-link :to="menu.url" class="nav-link">
|
||||
{{menu.name}}
|
||||
<span v-if="menu.child.length>0" class="downCaret"></span>
|
||||
</router-link>
|
||||
<div class="dropDown bottomShadowSegment" v-if="menu.child.length>0">
|
||||
<router-link :to="sonMenu.url" v-for="sonMenu in menu.child" :key="sonMenu.name">{{sonMenu.name}}</router-link>
|
||||
<router-link
|
||||
:to="sonMenu.url"
|
||||
v-for="sonMenu in menu.child"
|
||||
:key="sonMenu.name"
|
||||
class="dropdown-item"
|
||||
>
|
||||
{{sonMenu.name}}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- END BOTTOM - DESKTOP -->
|
||||
|
||||
<!-- 移动端导航 -->
|
||||
<div class="bottom headerBottom mobile">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="logoCell">
|
||||
<img class="logo" src="../assets/img/bimwe_logo.png">
|
||||
</td>
|
||||
<td class="mobileIconsCell">
|
||||
<!-- <img src="../assets/img/svg/ic_search.svg" /> -->
|
||||
<img src="../assets/img/svg/ic_hamburger.svg" id="hamburger">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="mobile-nav">
|
||||
<div class="logoCell">
|
||||
<img class="logo" :src="image_paths.mobile_logo" alt="丙维科技">
|
||||
</div>
|
||||
<div class="mobileIconsCell">
|
||||
<img :src="image_paths.hamburger" id="hamburger" alt="菜单">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移动端菜单 -->
|
||||
<div id="mobileMenu" class="headerMobileMenu bread">
|
||||
<div class="menuDummy"></div>
|
||||
<div class="menuContent">
|
||||
<ul>
|
||||
<li v-for="menu in menus" :key="menu.name">
|
||||
<a href="menu.url" v-if="menu.name=='首页'">{{menu.name}}</a>
|
||||
<router-link :to="menu.url" v-if="menu.name=='首页'">{{menu.name}}</router-link>
|
||||
<label v-else class="hasSubmenu" style="display:block;">{{menu.name}}</label>
|
||||
<ul class="subMenu" v-if="menu.child.length>0">
|
||||
<li v-for="sonMenu in menu.child" :key="sonMenu.name">
|
||||
@@ -81,11 +59,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="goBack">
|
||||
<a href="JavaScript:void()" class="linkGoBack flexVerticalCenter">
|
||||
<img src="../assets/img/svg/ic_arrow_back.svg" alt="返回">
|
||||
<img :src="image_paths.arrow_back" alt="返回">
|
||||
<span>返回</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -94,26 +71,711 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { common } from '../static/common'
|
||||
|
||||
export default {
|
||||
name: 'ihead',
|
||||
data() {
|
||||
return {
|
||||
menus: window.config.menus
|
||||
isMiniHeader: false,
|
||||
menus: [
|
||||
{
|
||||
name: '首页',
|
||||
url: '/index',
|
||||
child: []
|
||||
},
|
||||
{
|
||||
name: '关于我们',
|
||||
url: '/aboutUs/aboutUs',
|
||||
child: []
|
||||
},
|
||||
{
|
||||
name: '我们的方案',
|
||||
url: '/ourPlan/ourPlan',
|
||||
child: [
|
||||
{ name: '智能建筑', url: '/ourPlan/estateManagement' },
|
||||
{ name: '物联网', url: '/ourPlan/iot' },
|
||||
{ name: '设施管理', url: '/ourPlan/facilityManagement' },
|
||||
{ name: 'AI解决方案', url: '/ourPlan/aiSolutions' },
|
||||
{ name: '技术集成', url: '/ourPlan/technologyIntegration' }
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
common.init()
|
||||
common.initListeners()
|
||||
common.initHeader()
|
||||
common.initForms()
|
||||
common.initMobileMenu()
|
||||
common.adjustElementsForScreen()
|
||||
computed: {
|
||||
// 统一管理图片路径，提高可维护性
|
||||
image_paths() {
|
||||
return {
|
||||
logo: require('@/assets/img/logo.png'),
|
||||
mobile_logo: require('@/assets/img/bimwe_logo.png'),
|
||||
hamburger: require('@/assets/img/svg/ic_hamburger.svg'),
|
||||
arrow_back: require('@/assets/img/svg/ic_arrow_back.svg')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initHeader()
|
||||
this.initScrollListener()
|
||||
},
|
||||
methods: {
|
||||
// 封装事件监听器创建，提高代码复用性
|
||||
add_event_listener(selector, event_type, callback, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.addEventListener(event_type, callback);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 封装类名操作，提高代码复用性
|
||||
toggle_class(selector, class_name, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.classList.toggle(class_name);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 封装类名添加，提高代码复用性
|
||||
add_class(selector, class_name, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.classList.add(class_name);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 封装类名移除，提高代码复用性
|
||||
remove_class(selector, class_name, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.classList.remove(class_name);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
initHeader() {
|
||||
// 点击logo返回首页
|
||||
this.add_event_listener(".logoCell .logo", "click", () => {
|
||||
if (window.location.href.indexOf("index") === -1) {
|
||||
window.location.href = "#/index";
|
||||
}
|
||||
});
|
||||
|
||||
// 移动端菜单切换
|
||||
this.add_event_listener("hamburger", "click", () => {
|
||||
this.toggle_class("mobileMenu", "active", true);
|
||||
}, true);
|
||||
|
||||
// 返回按钮
|
||||
this.add_event_listener(".linkGoBack", "click", () => {
|
||||
this.remove_class("mobileMenu", "active", true);
|
||||
// 关闭移动端菜单后滚动到顶部
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
initScrollListener() {
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.pageYOffset > 200) {
|
||||
if (!this.isMiniHeader) {
|
||||
this.isMiniHeader = true;
|
||||
this.add_class('.header', 'mini');
|
||||
}
|
||||
} else {
|
||||
if (this.isMiniHeader) {
|
||||
this.isMiniHeader = false;
|
||||
this.remove_class('.header', 'mini');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
/* 使用更高优先级覆盖 common.css 的样式 */
|
||||
/* 重置旧表格布局样式 */
|
||||
.header table,
|
||||
.header table tbody,
|
||||
.header table tbody tr,
|
||||
.header table tbody tr td {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 头部基础样式 - 使用 !important 覆盖 common.css */
|
||||
.header {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
z-index: 1000 !important;
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
transition: all var(--transition-speed) ease !important;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
/* 覆盖旧表格布局 */
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.header.mini {
|
||||
background: rgba(255, 255, 255, 0.98) !important;
|
||||
box-shadow: var(--shadow-light) !important;
|
||||
}
|
||||
|
||||
/* 顶部联系信息 - 覆盖旧样式 */
|
||||
.top {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
|
||||
padding: 8px 0 !important;
|
||||
/* 覆盖旧表格布局 */
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.contact-item a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inlineTextIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 6px 15px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.search:focus {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 主要导航区域 - 覆盖旧样式 */
|
||||
.bottom {
|
||||
padding: 15px 0 !important;
|
||||
/* 覆盖旧表格布局 */
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logoCell .logo {
|
||||
height: 50px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.logoCell .logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 主导航菜单 */
|
||||
.mainMenu {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 15px 25px;
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #3498db;
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #3498db;
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* 下拉菜单 */
|
||||
.dropDown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background: white;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-medium);
|
||||
padding: 15px 0;
|
||||
min-width: 200px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-item:hover .dropDown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
padding: 12px 25px;
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
color: #3498db;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
/* 下拉箭头 */
|
||||
.downCaret {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover .downCaret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 移动端导航 */
|
||||
.mobile-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile .logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#hamburger {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#hamburger:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 移动端菜单 */
|
||||
.headerMobileMenu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
transition: left 0.3s ease;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.headerMobileMenu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menuContent {
|
||||
background: white;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menuContent ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menuContent li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.menuContent a,
|
||||
.menuContent label {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: #2c3e50;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border-radius: var(--border-radius);
|
||||
transition: all var(--transition-speed) ease;
|
||||
}
|
||||
|
||||
.menuContent a:hover,
|
||||
.menuContent label:hover {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.subMenu {
|
||||
margin-left: 20px;
|
||||
border-left: 2px solid #e9ecef;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.goBack {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.linkGoBack {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.linkGoBack:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
/* 现代响应式设计 - 使用容器查询和逻辑属性 */
|
||||
/* 基础响应式容器 */
|
||||
.header {
|
||||
container-type: inline-size;
|
||||
container-name: header;
|
||||
}
|
||||
|
||||
/* 使用容器查询替代媒体查询 */
|
||||
@container header (max-width: 768px) {
|
||||
.desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.searchContainer {
|
||||
width: 100% !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* 移动端头部高度调整 */
|
||||
.header {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.header .content {
|
||||
padding: 0 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
@container header (min-width: 769px) {
|
||||
.mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用逻辑属性实现更好的国际化支持 */
|
||||
.header .content {
|
||||
padding-inline: 3em;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header .content {
|
||||
padding-inline: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS Grid 实现更灵活的布局 */
|
||||
.nav-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@container header (max-width: 768px) {
|
||||
.nav-container {
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 自定义属性实现主题切换 */
|
||||
:root {
|
||||
--header-bg: rgba(255, 255, 255, 0.95);
|
||||
--header-border: rgba(0, 0, 0, 0.1);
|
||||
--nav-hover-bg: rgba(52, 152, 219, 0.1);
|
||||
--nav-hover-color: #3498db;
|
||||
}
|
||||
|
||||
/* 深色主题支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--header-bg: rgba(30, 30, 30, 0.95);
|
||||
--header-border: rgba(255, 255, 255, 0.1);
|
||||
--nav-hover-bg: rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 自定义属性 */
|
||||
.header {
|
||||
background: var(--header-bg) !important;
|
||||
border-bottom: 1px solid var(--header-border) !important;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: var(--nav-hover-bg) !important;
|
||||
color: var(--nav-hover-color) !important;
|
||||
}
|
||||
|
||||
/* 现代动画效果 - 使用 CSS 自定义属性和性能优化 */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 will-change 优化动画性能 */
|
||||
.nav-item {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* 使用 CSS 自定义属性控制动画延迟 */
|
||||
.nav-item {
|
||||
animation: slideDown 0.5s ease forwards;
|
||||
animation-delay: calc(var(--animation-index, 0) * 0.1s);
|
||||
}
|
||||
|
||||
/* 使用 CSS 计数器自动生成动画延迟 */
|
||||
.nav-item:nth-child(1) { --animation-index: 1; }
|
||||
.nav-item:nth-child(2) { --animation-index: 2; }
|
||||
.nav-item:nth-child(3) { --animation-index: 3; }
|
||||
.nav-item:nth-child(4) { --animation-index: 4; }
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的动画方向 */
|
||||
@keyframes slideInFromStart {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 支持 RTL 的动画 */
|
||||
[dir="rtl"] .nav-item {
|
||||
animation: slideInFromStart 0.5s ease forwards;
|
||||
}
|
||||
|
||||
/* 使用现代 CSS 实现内容间距 */
|
||||
/* 使用 CSS 自定义属性定义头部高度 */
|
||||
:root {
|
||||
--header-height: 120px;
|
||||
--header-height-mobile: 100px;
|
||||
|
||||
/* 添加更多主题变量 */
|
||||
--transition-speed: 0.3s;
|
||||
--border-radius: 8px;
|
||||
--shadow-light: 0 2px 20px rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 容器查询回退方案 - 为不支持容器查询的浏览器提供媒体查询 */
|
||||
@supports not (container-type: inline-size) {
|
||||
@media (max-width: 768px) {
|
||||
.desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.searchContainer {
|
||||
width: 100% !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.header .content {
|
||||
padding: 0 1em !important;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 100px !important;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
grid-template-columns: 1fr auto !important;
|
||||
gap: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用逻辑属性确保内容不被遮挡 */
|
||||
body {
|
||||
padding-block-start: var(--header-height) !important;
|
||||
}
|
||||
|
||||
/* 使用容器查询替代媒体查询 */
|
||||
@container header (max-width: 768px) {
|
||||
body {
|
||||
padding-block-start: var(--header-height-mobile) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的 RTL 支持 */
|
||||
.header {
|
||||
inset-block-start: 0;
|
||||
inset-inline: 0;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的间距 */
|
||||
.contact-info {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的边框 */
|
||||
.header {
|
||||
border-block-end: 1px solid var(--header-border) !important;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
animation: slideDown 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.nav-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.nav-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.nav-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.nav-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import './assets/css/cookieconsent.min.css'
|
||||
import './assets/css/common.css'
|
||||
import 'swiper/dist/css/swiper.css'
|
||||
import 'swiper/swiper.min.css'
|
||||
import './static/config.js'
|
||||
import 'es6-promise/auto'
|
||||
|
||||
|
||||
@@ -4,19 +4,15 @@ import Router from "vue-router"
|
||||
import index from './views/index'
|
||||
|
||||
import aboutUs from './views/aboutUs/aboutUs'
|
||||
import cooperateWithUs from './views/aboutUs/cooperateWithUs'
|
||||
import propystTechnology from './views/aboutUs/propystTechnology'
|
||||
|
||||
|
||||
import fulEdge from './views/fulEdge/fulEdge'
|
||||
import mobileSolution from './views/fulEdge/mobileSolution'
|
||||
import other from './views/fulEdge/other'
|
||||
|
||||
|
||||
import ourPlan from './views/ourPlan/ourPlan'
|
||||
import estateManagement from './views/ourPlan/estateManagement'
|
||||
import facilityManagement from './views/ourPlan/facilityManagement'
|
||||
import iot from './views/ourPlan/iot'
|
||||
import reaEstate from './views/ourPlan/reaEstate'
|
||||
import aiSolutions from './views/ourPlan/aiSolutions'
|
||||
import technologyIntegration from './views/ourPlan/technologyIntegration'
|
||||
|
||||
|
||||
@@ -24,17 +20,13 @@ import technologyIntegration from './views/ourPlan/technologyIntegration'
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
const router = new Router({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes: [
|
||||
{
|
||||
path: '*',
|
||||
component: index
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: index
|
||||
redirect: '/index'
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
@@ -42,36 +34,39 @@ export default new Router({
|
||||
},
|
||||
{
|
||||
path: '/aboutUs',
|
||||
component: aboutUs,
|
||||
children: [
|
||||
{ path:'/',component:cooperateWithUs, },
|
||||
{ path: 'cooperateWithUs', component: cooperateWithUs },
|
||||
{ path: 'propystTechnology', component: propystTechnology },
|
||||
|
||||
]
|
||||
component: aboutUs
|
||||
},
|
||||
{
|
||||
path: '/fulEdge',
|
||||
component: fulEdge,
|
||||
children: [
|
||||
{ path:'/',component:mobileSolution, },
|
||||
{ path: 'mobileSolution', component: mobileSolution },
|
||||
{ path: 'other', component: other },
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/ourPlan',
|
||||
component: ourPlan,
|
||||
children: [
|
||||
{ path:'/',component:estateManagement, },
|
||||
{ path: '', redirect: 'ourPlan' },
|
||||
{ path: 'ourPlan', component: ourPlan },
|
||||
{ path: 'estateManagement', component: estateManagement },
|
||||
{ path: 'facilityManagement', component: facilityManagement },
|
||||
{ path: 'iot', component: iot },
|
||||
{ path: 'reaEstate', component: reaEstate },
|
||||
{ path: 'aiSolutions', component: aiSolutions },
|
||||
{ path: 'technologyIntegration', component: technologyIntegration }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/index'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 全局前置守卫 - 路由切换时自动滚动到顶部
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 滚动到页面顶部
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth' // 平滑滚动效果
|
||||
});
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
export default router
|
||||
|
||||
@@ -2,7 +2,7 @@ var isMobile = null;
|
||||
var wasMobile = isMobile;
|
||||
var isMiniHeader = false;
|
||||
|
||||
import $ from 'jquery'
|
||||
// 移除 jQuery 导入，使用原生 JavaScript
|
||||
|
||||
class Common {
|
||||
constructor(name, age) {
|
||||
@@ -10,66 +10,252 @@ class Common {
|
||||
this.age = age;
|
||||
}
|
||||
|
||||
init() {
|
||||
// 封装原生 JavaScript 方法，提高代码复用性
|
||||
add_event_listener(selector, event_type, callback, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.addEventListener(event_type, callback);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
toggle_class(selector, class_name, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.classList.toggle(class_name);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
add_class(selector, class_name, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.classList.add(class_name);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
remove_class(selector, class_name, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.classList.remove(class_name);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
show_element(selector, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.style.display = 'block';
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
hide_element(selector, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.style.display = 'none';
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
get_element_value(selector, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
return element ? element.value : '';
|
||||
}
|
||||
|
||||
set_element_value(selector, value, use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
element.value = value;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 滚动到页面顶部 - 支持平滑滚动
|
||||
scroll_to_top(behavior = 'smooth') {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: behavior
|
||||
});
|
||||
}
|
||||
|
||||
// 滚动到指定元素 - 支持平滑滚动和偏移
|
||||
scroll_to_element(selector, offset = 0, behavior = 'smooth', use_id = false) {
|
||||
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
|
||||
if (element) {
|
||||
const elementTop = element.offsetTop - offset;
|
||||
window.scrollTo({
|
||||
top: elementTop,
|
||||
left: 0,
|
||||
behavior: behavior
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 滚动到指定位置 - 支持平滑滚动
|
||||
scroll_to_position(top = 0, left = 0, behavior = 'smooth') {
|
||||
window.scrollTo({
|
||||
top: top,
|
||||
left: left,
|
||||
behavior: behavior
|
||||
});
|
||||
}
|
||||
|
||||
// 获取当前滚动位置
|
||||
get_scroll_position() {
|
||||
return {
|
||||
top: window.pageYOffset || document.documentElement.scrollTop,
|
||||
left: window.pageXOffset || document.documentElement.scrollLeft
|
||||
};
|
||||
}
|
||||
|
||||
// 检查是否在页面顶部
|
||||
is_at_top() {
|
||||
return window.pageYOffset === 0;
|
||||
}
|
||||
|
||||
// 检查是否在页面底部
|
||||
is_at_bottom() {
|
||||
return window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight;
|
||||
}
|
||||
|
||||
// 创建返回顶部按钮
|
||||
create_back_to_top_button() {
|
||||
// 检查是否已存在返回顶部按钮
|
||||
if (document.getElementById('backToTopBtn')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.id = 'backToTopBtn';
|
||||
button.innerHTML = '↑';
|
||||
button.title = '返回顶部';
|
||||
button.className = 'back-to-top-btn';
|
||||
|
||||
// 添加样式
|
||||
button.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
|
||||
`;
|
||||
|
||||
// 悬停效果
|
||||
button.addEventListener('mouseenter', () => {
|
||||
button.style.background = '#2980b9';
|
||||
button.style.transform = 'scale(1.1)';
|
||||
});
|
||||
|
||||
button.addEventListener('mouseleave', () => {
|
||||
button.style.background = '#3498db';
|
||||
button.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
// 点击事件
|
||||
button.addEventListener('click', () => {
|
||||
this.scroll_to_top('smooth');
|
||||
});
|
||||
|
||||
// 添加到页面
|
||||
document.body.appendChild(button);
|
||||
|
||||
// 监听滚动事件，控制按钮显示/隐藏
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
button.style.opacity = '1';
|
||||
button.style.visibility = 'visible';
|
||||
} else {
|
||||
button.style.opacity = '0';
|
||||
button.style.visibility = 'hidden';
|
||||
}
|
||||
});
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
init() {
|
||||
var self = this;
|
||||
|
||||
isMobile = common.isMobile();
|
||||
|
||||
//create trigger to resizeEnd event, called after event is finished
|
||||
$(window).resize(function() {
|
||||
if (this.resizeTO) clearTimeout(this.resizeTO);
|
||||
this.resizeTO = setTimeout(function() {
|
||||
$(this).trigger('resizeEnd');
|
||||
// 创建 resizeEnd 事件触发器，在事件完成后调用
|
||||
let resizeTO;
|
||||
window.addEventListener('resize', function() {
|
||||
if (resizeTO) clearTimeout(resizeTO);
|
||||
resizeTO = setTimeout(function() {
|
||||
// 触发自定义 resizeEnd 事件
|
||||
window.dispatchEvent(new CustomEvent('resizeEnd'));
|
||||
}, 100);
|
||||
});
|
||||
|
||||
//cdetermine scren type and call style functions after window resize is completed
|
||||
$(window).on('resizeEnd', function() {
|
||||
|
||||
// 确定屏幕类型并在窗口调整大小完成后调用样式函数
|
||||
window.addEventListener('resizeEnd', function() {
|
||||
self.adjustElementsForScreen();
|
||||
|
||||
});
|
||||
|
||||
$(window).scroll(function() {
|
||||
if ($(window).scrollTop() > 200) {
|
||||
// 创建返回顶部按钮
|
||||
this.create_back_to_top_button();
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.pageYOffset > 200) {
|
||||
if (isMiniHeader === false && !self.isMobile()) {
|
||||
$('.header').addClass('mini');
|
||||
common.add_class('.header', 'mini');
|
||||
isMiniHeader = true;
|
||||
}
|
||||
} else {
|
||||
if (isMiniHeader === true) {
|
||||
$('.header').removeClass('mini');
|
||||
common.remove_class('.header', 'mini');
|
||||
isMiniHeader = false;
|
||||
}
|
||||
|
||||
}
|
||||
//var scroll = $(window).scrollTop();
|
||||
});
|
||||
|
||||
// 滚动到元素的原生实现
|
||||
this.scrollToElement = function(selector) {
|
||||
const element = document.querySelector(selector);
|
||||
if (element) {
|
||||
const adjustment = isMiniHeader ? 35 : 0;
|
||||
const header = document.querySelector('.header:first-child');
|
||||
const headerHeight = header ? header.offsetHeight : 0;
|
||||
const targetPosition = element.offsetTop - headerHeight - adjustment;
|
||||
|
||||
|
||||
$.scrollToElement = function($element) {
|
||||
|
||||
var adjustment = 0;
|
||||
if (isMiniHeader) {
|
||||
adjustment = 35;
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
var $header = $('.header:first');
|
||||
$('html,body').animate({ scrollTop: $element.offset().top - ($header.length > 0 ? $header.height() : 0) - adjustment }, 'slow');
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
adjustElementsForScreen() {
|
||||
|
||||
isMobile = this.isMobile();
|
||||
|
||||
if (!this.isMobile()) {
|
||||
$(".mobileContent").hide();
|
||||
const mobileContents = document.querySelectorAll(".mobileContent");
|
||||
mobileContents.forEach(content => content.style.display = 'none');
|
||||
}
|
||||
|
||||
if (isMobile) wasMobile = true;
|
||||
@@ -77,293 +263,404 @@ class Common {
|
||||
if (wasMobile && !isMobile) location.reload();
|
||||
|
||||
if (isMobile && isMiniHeader === true) {
|
||||
$('.header').removeClass('mini');
|
||||
common.remove_class('.header', 'mini');
|
||||
isMiniHeader = false;
|
||||
}
|
||||
|
||||
|
||||
this.adjustContentBannersForScreen();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
initHeader() {
|
||||
|
||||
//go to main page if not there on logo click
|
||||
$(".logoCell .logo").on("click", function() {
|
||||
// 点击 logo 返回主页
|
||||
this.add_event_listener(".logoCell .logo", "click", function() {
|
||||
if (window.location.href.indexOf("index") === -1) {
|
||||
window.location.href = "#/index";
|
||||
}
|
||||
});
|
||||
|
||||
//show/hide main menu dropdowns on hover
|
||||
$(".mainMenu > tbody > tr > td")
|
||||
.on("mouseenter", function(e) {
|
||||
// 显示/隐藏主导航下拉菜单（悬停）
|
||||
const mainMenuItems = document.querySelectorAll(".mainMenu > tbody > tr > td");
|
||||
mainMenuItems.forEach(item => {
|
||||
item.addEventListener("mouseenter", function(e) {
|
||||
e.stopPropagation();
|
||||
$(".dropDown").hide();
|
||||
$("table.mainMenu > tbody > tr > td.selected").css("box-shadow", "none");
|
||||
$(this).find(".dropDown").addClass("droppedDown");
|
||||
$(this).find(".dropDown").slideDown();
|
||||
})
|
||||
.on("mouseleave", function(e) {
|
||||
e.stopPropagation();
|
||||
$(this).find(".dropDown").removeClass("droppedDown");
|
||||
$(this).find(".dropDown").hide();
|
||||
$("table.mainMenu > tbody > tr > td.selected").css("box-shadow", "0 -3px 0 #ff0000 inset");
|
||||
const dropDowns = document.querySelectorAll(".dropDown");
|
||||
dropDowns.forEach(dd => dd.style.display = 'none');
|
||||
|
||||
const selectedItems = document.querySelectorAll("table.mainMenu > tbody > tr > td.selected");
|
||||
selectedItems.forEach(selected => selected.style.boxShadow = 'none');
|
||||
|
||||
const currentDropDown = this.querySelector(".dropDown");
|
||||
if (currentDropDown) {
|
||||
currentDropDown.classList.add("droppedDown");
|
||||
currentDropDown.style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
item.addEventListener("mouseleave", function(e) {
|
||||
e.stopPropagation();
|
||||
const currentDropDown = this.querySelector(".dropDown");
|
||||
if (currentDropDown) {
|
||||
currentDropDown.classList.remove("droppedDown");
|
||||
currentDropDown.style.display = 'none';
|
||||
}
|
||||
|
||||
|
||||
const selectedItems = document.querySelectorAll("table.mainMenu > tbody > tr > td.selected");
|
||||
selectedItems.forEach(selected => selected.style.boxShadow = '0 -3px 0 #ff0000 inset');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
initListeners() {
|
||||
|
||||
$("#hamburger").on("click", function() {
|
||||
|
||||
if ($("#mobileLanguageMenu").hasClass("showing")) {
|
||||
$("#mobileLanguageMenu").hide();
|
||||
$("#mobileLanguageMenu").removeClass("showing");
|
||||
// 汉堡菜单点击事件
|
||||
this.add_event_listener("hamburger", "click", function() {
|
||||
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
|
||||
if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
|
||||
common.hide_element("mobileLanguageMenu", true);
|
||||
common.remove_class("mobileLanguageMenu", "showing", true);
|
||||
}
|
||||
|
||||
if ($("#mobileMenu").hasClass("showing")) {
|
||||
const mobileMenu = document.getElementById("mobileMenu");
|
||||
if (mobileMenu && mobileMenu.classList.contains("showing")) {
|
||||
common.hideMobileMenu();
|
||||
} else {
|
||||
common.showMobileMenu();
|
||||
}
|
||||
});
|
||||
}, true);
|
||||
|
||||
$("#mobileLanguage").on("click", function() {
|
||||
|
||||
if ($("#mobileMenu").hasClass("showing")) {
|
||||
$("#mobileMenu").hide();
|
||||
$("#mobileMenu").removeClass("showing");
|
||||
// 移动端语言菜单点击事件
|
||||
this.add_event_listener("mobileLanguage", "click", function() {
|
||||
const mobileMenu = document.getElementById("mobileMenu");
|
||||
if (mobileMenu && mobileMenu.classList.contains("showing")) {
|
||||
common.hide_element("mobileMenu", true);
|
||||
common.remove_class("mobileMenu", "showing", true);
|
||||
}
|
||||
|
||||
if (!$("#mobileLanguageMenu").hasClass("showing")) {
|
||||
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
|
||||
if (mobileLanguageMenu && !mobileLanguageMenu.classList.contains("showing")) {
|
||||
common.showMobileLanguageMenu();
|
||||
}
|
||||
}, true);
|
||||
|
||||
});
|
||||
// 屏幕覆盖层和返回按钮点击事件
|
||||
const screenOverlay = document.getElementById("screenOverlayBehindHeader");
|
||||
const goBackLinks = document.querySelectorAll(".linkGoBack");
|
||||
|
||||
|
||||
$("#screenOverlayBehindHeader, .linkGoBack").on("click", function() {
|
||||
if ($("#mobileMenu").hasClass("showing")) {
|
||||
if (screenOverlay) {
|
||||
screenOverlay.addEventListener("click", function() {
|
||||
const mobileMenu = document.getElementById("mobileMenu");
|
||||
if (mobileMenu && mobileMenu.classList.contains("showing")) {
|
||||
common.hideMobileMenu();
|
||||
}
|
||||
if ($("#mobileLanguageMenu").hasClass("showing")) {
|
||||
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
|
||||
if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
|
||||
common.hideMobileLanguageMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$("#mobileLanguageMenu a").on("click", function(e) {
|
||||
e.preventDefault();
|
||||
goBackLinks.forEach(link => {
|
||||
link.addEventListener("click", function() {
|
||||
const mobileMenu = document.getElementById("mobileMenu");
|
||||
if (mobileMenu && mobileMenu.classList.contains("showing")) {
|
||||
common.hideMobileMenu();
|
||||
}
|
||||
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
|
||||
if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
|
||||
common.hideMobileLanguageMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//show support form
|
||||
$("a.linkSupport").on("click", function(e) {
|
||||
// 移动端语言菜单链接点击事件
|
||||
const mobileLanguageMenuLinks = document.querySelectorAll("#mobileLanguageMenu a");
|
||||
mobileLanguageMenuLinks.forEach(link => {
|
||||
link.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
// 显示支持表单
|
||||
const supportLinks = document.querySelectorAll("a.linkSupport");
|
||||
supportLinks.forEach(link => {
|
||||
link.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
common.showForm("support");
|
||||
});
|
||||
});
|
||||
|
||||
//show contact form
|
||||
$("a.linkContactUs").on("click", function(e) {
|
||||
// 显示联系表单
|
||||
const contactLinks = document.querySelectorAll("a.linkContactUs");
|
||||
contactLinks.forEach(link => {
|
||||
link.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
common.showForm("contact");
|
||||
});
|
||||
});
|
||||
|
||||
$("#scrollToBoxes").on("click", function(e) {
|
||||
// 滚动到盒子容器
|
||||
const scrollToBoxes = document.getElementById("scrollToBoxes");
|
||||
if (scrollToBoxes) {
|
||||
scrollToBoxes.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
$.scrollToElement($("#pageBoxesContainer"));
|
||||
common.scrollToElement("#pageBoxesContainer");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$('.cookiesInfo').children('input[type=button]').on('click', function() {
|
||||
$(this).parent().remove();
|
||||
// Cookie 信息按钮点击事件
|
||||
const cookieButtons = document.querySelectorAll('.cookiesInfo input[type="button"]');
|
||||
cookieButtons.forEach(button => {
|
||||
button.addEventListener("click", function() {
|
||||
const parent = this.parentElement;
|
||||
if (parent) {
|
||||
parent.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
initMobileMenu() {
|
||||
$("#mobileMenu label").on("click", function(e) {
|
||||
// 移动端菜单标签点击事件
|
||||
const mobileMenuLabels = document.querySelectorAll("#mobileMenu label");
|
||||
mobileMenuLabels.forEach(label => {
|
||||
label.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
$("#mobileMenu .subMenu").not($(this).siblings()).slideUp();
|
||||
$(".hasSubmenu").not($(this)).css("font-weight", "normal");
|
||||
$(this).css("font-weight", "bold");
|
||||
//$(this).parent().css("border-bottom", "none");
|
||||
$(this).parent().find(".subMenu").slideDown();
|
||||
});
|
||||
|
||||
$("#mobileMenu a").on("click", function() {
|
||||
common.hideMobileMenu();
|
||||
|
||||
});
|
||||
|
||||
|
||||
const subMenus = document.querySelectorAll("#mobileMenu .subMenu");
|
||||
subMenus.forEach(subMenu => {
|
||||
if (subMenu !== this.nextElementSibling) {
|
||||
subMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
const hasSubmenuElements = document.querySelectorAll(".hasSubmenu");
|
||||
hasSubmenuElements.forEach(element => {
|
||||
if (element !== this) {
|
||||
element.style.fontWeight = "normal";
|
||||
}
|
||||
});
|
||||
|
||||
this.style.fontWeight = "bold";
|
||||
const currentSubMenu = this.parentElement.querySelector(".subMenu");
|
||||
if (currentSubMenu) {
|
||||
currentSubMenu.style.display = 'block';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 移动端菜单链接点击事件
|
||||
const mobileMenuLinks = document.querySelectorAll("#mobileMenu a");
|
||||
mobileMenuLinks.forEach(link => {
|
||||
link.addEventListener("click", function() {
|
||||
common.hideMobileMenu();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
initForms() {
|
||||
|
||||
|
||||
$(".btnQuitForm").on("click", function() {
|
||||
$("#forms").hide();
|
||||
$("#screenOverlay").hide();
|
||||
$("#formContactContainer").hide();
|
||||
$("#formSupportContainer").hide();
|
||||
// 退出表单按钮
|
||||
const quitButtons = document.querySelectorAll(".btnQuitForm");
|
||||
quitButtons.forEach(button => {
|
||||
button.addEventListener("click", function() {
|
||||
common.hide_element("#forms", true);
|
||||
common.hide_element("#screenOverlay", true);
|
||||
common.hide_element("#formContactContainer", true);
|
||||
common.hide_element("#formSupportContainer", true);
|
||||
});
|
||||
});
|
||||
|
||||
$("#formSupport").on("submit", function(e) {
|
||||
// 支持表单提交
|
||||
const supportForm = document.getElementById("formSupport");
|
||||
if (supportForm) {
|
||||
supportForm.addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
common.submitSupportForm($(this));
|
||||
});
|
||||
|
||||
$("#formContact").on("submit", function(e) {
|
||||
e.preventDefault();
|
||||
common.submitContactForm($(this));
|
||||
common.submitSupportForm(this);
|
||||
});
|
||||
}
|
||||
|
||||
// 联系表单提交
|
||||
const contactForm = document.getElementById("formContact");
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
common.submitContactForm(this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showForm(formName) {
|
||||
common.show_element("#forms", true);
|
||||
common.show_element("#screenOverlay", true);
|
||||
|
||||
$("#forms").show();
|
||||
$("#screenOverlay").show();
|
||||
const contactTable = document.querySelector(".contactTable");
|
||||
const formInputContainer = document.querySelector(".formInputContainer");
|
||||
const formResultContainer = document.querySelector(".formResultContainer");
|
||||
|
||||
$(".contactTable").show();
|
||||
$(".formInputContainer").show();
|
||||
$(".formResultContainer").hide();
|
||||
if (contactTable) contactTable.style.display = 'table';
|
||||
if (formInputContainer) formInputContainer.style.display = 'block';
|
||||
if (formResultContainer) formResultContainer.style.display = 'none';
|
||||
|
||||
if (formName === "contact") {
|
||||
var $conCommentsTitle = $("label[for='conComments']");
|
||||
|
||||
if ($(".contentTableRight").find("[data-contact-link]").length) {
|
||||
$conCommentsTitle.html("Berätta vad du vill veta mer om gällande " +
|
||||
$(".contentTableRight").find("[data-contact-link]").data("contact-link") + ": *");
|
||||
const conCommentsTitle = document.querySelector("label[for='conComments']");
|
||||
if (conCommentsTitle) {
|
||||
const contactLinkElement = document.querySelector(".contentTableRight [data-contact-link]");
|
||||
if (contactLinkElement && contactLinkElement.dataset.contactLink) {
|
||||
conCommentsTitle.innerHTML = "Berätta vad du vill veta mer om gällande " +
|
||||
contactLinkElement.dataset.contactLink + ": *";
|
||||
} else {
|
||||
$conCommentsTitle.html("Vad vill du veta mer om: ");
|
||||
conCommentsTitle.innerHTML = "Vad vill du veta mer om: ";
|
||||
}
|
||||
$("#formContactContainer").show();
|
||||
}
|
||||
common.show_element("#formContactContainer", true);
|
||||
} else if (formName === "support") {
|
||||
$("#formSupportContainer").show();
|
||||
common.show_element("#formSupportContainer", true);
|
||||
}
|
||||
|
||||
common.scrollToTop();
|
||||
|
||||
}
|
||||
|
||||
|
||||
submitSupportForm() {
|
||||
// 使用原生 fetch API 替代 jQuery.post
|
||||
const formData = {
|
||||
subject: common.get_element_value("#supSubject", true),
|
||||
company: common.get_element_value("#supCompany", true),
|
||||
name: common.get_element_value("#supName", true),
|
||||
email: common.get_element_value("#supEmail", true),
|
||||
phone: common.get_element_value("#supPhone", true),
|
||||
product: common.get_element_value("#supProduct", true),
|
||||
comments: common.get_element_value("#supComments", true)
|
||||
};
|
||||
|
||||
$.post("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_support_form.php", {
|
||||
subject: $("#supSubject").val(),
|
||||
company: $("#supCompany").val(),
|
||||
name: $("#supName").val(),
|
||||
email: $("#supEmail").val(),
|
||||
phone: $("#supPhone").val(),
|
||||
product: $("#supProduct").val(),
|
||||
comments: $("#supComments").val()
|
||||
fetch("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_support_form.php", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
function(data) {
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
$(".formInputContainer").hide();
|
||||
$(".formResultContainer").show();
|
||||
common.hide_element("#formInputContainer", true);
|
||||
common.show_element("#formResultContainer", true);
|
||||
common.scrollToTop();
|
||||
|
||||
$("#supSubject").val("");
|
||||
$("#supCompany").val("");
|
||||
$("#supName").val("");
|
||||
$("#supEmail").val("");
|
||||
$("#supPhone").val("");
|
||||
$("#supProduct").val("");
|
||||
$("#supComments").val("");
|
||||
// 清空表单
|
||||
common.set_element_value("#supSubject", "", true);
|
||||
common.set_element_value("#supCompany", "", true);
|
||||
common.set_element_value("#supName", "", true);
|
||||
common.set_element_value("#supEmail", "", true);
|
||||
common.set_element_value("#supPhone", "", true);
|
||||
common.set_element_value("#supProduct", "", true);
|
||||
common.set_element_value("#supComments", "", true);
|
||||
}
|
||||
|
||||
|
||||
submitContactForm() {
|
||||
// 使用原生 fetch API 替代 jQuery.post
|
||||
const formData = {
|
||||
name: common.get_element_value("#conName", true),
|
||||
email: common.get_element_value("#conEmail", true),
|
||||
phone: common.get_element_value("#conPhone", true),
|
||||
comments: common.get_element_value("#conComments", true)
|
||||
};
|
||||
|
||||
$.post("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_contact_form.php", {
|
||||
name: $("#conName").val(),
|
||||
email: $("#conEmail").val(),
|
||||
phone: $("#conPhone").val(),
|
||||
comments: $("#conComments").val()
|
||||
fetch("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_contact_form.php", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
function(data) {
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
$(".contactTable").hide();
|
||||
$(".formResultContainer").show();
|
||||
common.hide_element(".contactTable");
|
||||
common.show_element("#formResultContainer", true);
|
||||
common.scrollToTop();
|
||||
|
||||
$("#conName").val("");
|
||||
$("#conEmail").val("");
|
||||
$("#conPhone").val("");
|
||||
$("#conComments").val("");
|
||||
// 清空表单
|
||||
common.set_element_value("#conName", "", true);
|
||||
common.set_element_value("#conEmail", "", true);
|
||||
common.set_element_value("#conPhone", "", true);
|
||||
common.set_element_value("#conComments", "", true);
|
||||
}
|
||||
|
||||
|
||||
adjustContentBannersForScreen() {
|
||||
|
||||
if (this.isMobile()) {
|
||||
$("#pageBannerImage1").attr("src", "images/banner_page_mobile_solutions_mobile.jpg");
|
||||
$("#pageBannerImage2").attr("src", "images/banner_page_ifrs16_mobile.jpg");
|
||||
$("#pageBannerImage3").attr("src", "images/banner_page_gdpr_mobile.jpg");
|
||||
const banner1 = document.getElementById("pageBannerImage1");
|
||||
const banner2 = document.getElementById("pageBannerImage2");
|
||||
const banner3 = document.getElementById("pageBannerImage3");
|
||||
|
||||
if (banner1) banner1.src = "images/banner_page_mobile_solutions_mobile.jpg";
|
||||
if (banner2) banner2.src = "images/banner_page_ifrs16_mobile.jpg";
|
||||
if (banner3) banner3.src = "images/banner_page_gdpr_mobile.jpg";
|
||||
} else {
|
||||
$("#pageBannerImage1").attr("src", "images/banner_page_mobile_solutions.jpg");
|
||||
$("#pageBannerImage2").attr("src", "images/banner_page_ifrs16.jpg");
|
||||
$("#pageBannerImage3").attr("src", "images/banner_page_gdpr.jpg");
|
||||
const banner1 = document.getElementById("pageBannerImage1");
|
||||
const banner2 = document.getElementById("pageBannerImage2");
|
||||
const banner3 = document.getElementById("pageBannerImage3");
|
||||
|
||||
if (banner1) banner1.src = "images/banner_page_mobile_solutions.jpg";
|
||||
if (banner2) banner2.src = "images/banner_page_ifrs16.jpg";
|
||||
if (banner3) banner3.src = "images/banner_page_gdpr.jpg";
|
||||
}
|
||||
}
|
||||
|
||||
showMobileMenu() {
|
||||
$("#screenOverlayBehindHeader").show();
|
||||
|
||||
$("#mobileMenu").slideDown();
|
||||
$("#mobileMenu").addClass("showing");
|
||||
common.show_element("#screenOverlayBehindHeader", true);
|
||||
const mobileMenu = document.getElementById("mobileMenu");
|
||||
if (mobileMenu) {
|
||||
mobileMenu.style.display = 'block';
|
||||
common.add_class("mobileMenu", "showing", true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
hideMobileMenu() {
|
||||
$("#mobileMenu").slideUp(function() {
|
||||
$("#screenOverlayBehindHeader").hide();
|
||||
});
|
||||
$("#mobileMenu").removeClass("showing");
|
||||
const mobileMenu = document.getElementById("mobileMenu");
|
||||
if (mobileMenu) {
|
||||
mobileMenu.style.display = 'none';
|
||||
common.hide_element("#screenOverlayBehindHeader", true);
|
||||
common.remove_class("mobileMenu", "showing", true);
|
||||
}
|
||||
}
|
||||
|
||||
showMobileLanguageMenu() {
|
||||
$("#screenOverlayBehindHeader").show();
|
||||
|
||||
$("#mobileLanguageMenu").slideDown();
|
||||
$("#mobileLanguageMenu").addClass("showing");
|
||||
common.show_element("#screenOverlayBehindHeader", true);
|
||||
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
|
||||
if (mobileLanguageMenu) {
|
||||
mobileLanguageMenu.style.display = 'block';
|
||||
common.add_class("mobileLanguageMenu", "showing", true);
|
||||
}
|
||||
}
|
||||
|
||||
hideMobileLanguageMenu() {
|
||||
$("#mobileLanguageMenu").slideUp(function() {
|
||||
$("#screenOverlayBehindHeader").hide();
|
||||
});
|
||||
$("#mobileLanguageMenu").removeClass("showing");
|
||||
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
|
||||
if (mobileLanguageMenu) {
|
||||
mobileLanguageMenu.style.display = 'none';
|
||||
common.hide_element("#screenOverlayBehindHeader", true);
|
||||
common.remove_class("mobileLanguageMenu", "showing", true);
|
||||
}
|
||||
}
|
||||
|
||||
scrollToTop() {
|
||||
$("body,html").animate({ scrollTop: 0 }, "slow");
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
isMobile() {
|
||||
|
||||
var ua = navigator.userAgent;
|
||||
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
|
||||
|
||||
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
|
||||
|
||||
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
|
||||
|
||||
isMobile = isIphone || isAndroid;
|
||||
|
||||
return isMobile;
|
||||
@@ -377,5 +674,4 @@ class Common {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const common = new Common();
|
||||
@@ -1,27 +1,801 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="about-us-page">
|
||||
<ihead></ihead>
|
||||
<div class="contentPage">
|
||||
|
||||
<div class="contentTable">
|
||||
<router-view></router-view>
|
||||
<!-- 页面横幅 -->
|
||||
<div class="page-banner">
|
||||
<div class="banner-content">
|
||||
<div class="container">
|
||||
<h1 class="banner-title">关于丙维科技</h1>
|
||||
<p class="banner-subtitle">技术驱动未来，服务创造价值</p>
|
||||
<div class="banner-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">2018</div>
|
||||
<div class="stat-label">成立年份</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">600万</div>
|
||||
<div class="stat-label">注册资本</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">AI</div>
|
||||
<div class="stat-label">核心业务</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公司概况 -->
|
||||
<div class="company-overview">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">公司概况</h2>
|
||||
<p class="section-subtitle">专注于AI交付内容，为客户提供高质量的数字化解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="overview-content">
|
||||
<div class="overview-text">
|
||||
<p>上海丙维数字科技有限公司成立于2018年10月22日，总部位于上海市宝山区高逸路112-118号3幢6422室，注册资本600万元人民币。</p>
|
||||
<p>公司致力于计算机软硬件、网络科技、信息科技领域的技术开发、技术咨询、技术转让和技术服务，以及计算机软件开发和计算机信息系统集成。</p>
|
||||
<p>自2022年起，公司成功转型专注于AI交付内容，围绕客户需求提供智能应用解决方案，服务于多家知名大型企业，赢得了广泛的行业认可。</p>
|
||||
</div>
|
||||
<div class="overview-image">
|
||||
<div class="image-placeholder">
|
||||
<span class="placeholder-icon">🏢</span>
|
||||
<p>公司总部</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心优势 -->
|
||||
<div class="core-advantages">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">核心优势</h2>
|
||||
<p class="section-subtitle">我们拥有顶尖的技术团队和丰富的行业经验</p>
|
||||
</div>
|
||||
|
||||
<div class="advantages-grid">
|
||||
<div class="advantage-card" v-for="advantage in advantages" :key="advantage.title">
|
||||
<div class="advantage-icon">{{advantage.icon}}</div>
|
||||
<h3>{{advantage.title}}</h3>
|
||||
<p>{{advantage.description}}</p>
|
||||
<ul class="advantage-features">
|
||||
<li v-for="feature in advantage.features" :key="feature">{{feature}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 发展历程 -->
|
||||
<div class="development-timeline">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">发展历程</h2>
|
||||
<p class="section-subtitle">从创立到AI转型的成长之路</p>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item" v-for="(milestone, index) in milestones" :key="index">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">{{milestone.year}}</div>
|
||||
<h3>{{milestone.title}}</h3>
|
||||
<p>{{milestone.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 业务领域 -->
|
||||
<div class="business-areas">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">业务领域</h2>
|
||||
<p class="section-subtitle">三大核心业务，全方位满足客户数字化需求</p>
|
||||
</div>
|
||||
|
||||
<div class="areas-grid">
|
||||
<div class="area-card" v-for="area in businessAreas" :key="area.name">
|
||||
<div class="area-header">
|
||||
<div class="area-icon">{{area.icon}}</div>
|
||||
<h3>{{area.name}}</h3>
|
||||
</div>
|
||||
<p class="area-description">{{area.description}}</p>
|
||||
<div class="area-services">
|
||||
<h4>服务内容</h4>
|
||||
<ul>
|
||||
<li v-for="service in area.services" :key="service">{{service}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 企业愿景 -->
|
||||
<div class="company-vision">
|
||||
<div class="container">
|
||||
<div class="vision-content">
|
||||
<div class="vision-text">
|
||||
<h2>企业愿景</h2>
|
||||
<h3>技术驱动未来，服务创造价值</h3>
|
||||
<p>以客户需求为导向，将持续创新作为企业发展的基石，深入理解客户在数字化转型过程中的挑战与机遇。</p>
|
||||
<p>追求技术与服务的完美结合，通过不断的技术探索和应用优化，为客户提供技术领先且高度契合业务需求的解决方案。</p>
|
||||
<p>致力于运用前沿技术，为客户提供卓越的数字化解决方案，助力客户在激烈的市场竞争中实现业务突破和持续增长。</p>
|
||||
</div>
|
||||
<div class="vision-image">
|
||||
<div class="image-placeholder">
|
||||
<span class="placeholder-icon">🚀</span>
|
||||
<p>未来愿景</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<div class="contact-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">联系我们</h2>
|
||||
<p class="section-subtitle">期待与您携手，共同开启智能数字化的新篇章</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-grid">
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📍</div>
|
||||
<h4>注册地址</h4>
|
||||
<p>上海市宝山区高逸路112-118号3幢6422室</p>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📞</div>
|
||||
<h4>联系电话</h4>
|
||||
<p>13817819452</p>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">✉️</div>
|
||||
<h4>电子邮箱</h4>
|
||||
<p>bimwe@bimwe.com</p>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">🌐</div>
|
||||
<h4>官方网站</h4>
|
||||
<p>www.bimwe.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ifooter></ifooter>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'AboutUs',
|
||||
data() {
|
||||
return {
|
||||
msg: "Welcome to Your Vue.js App"
|
||||
};
|
||||
advantages: [
|
||||
{
|
||||
icon: '👥',
|
||||
title: '顶尖技术团队',
|
||||
description: '由阿里、字节、腾讯等顶尖互联网公司资深开发人员组成，技术积累深厚，项目经验丰富。',
|
||||
features: [
|
||||
'纯技术团队，专注于计算机软硬件、网络科技及信息科技领域',
|
||||
'技术积累深厚，项目经验丰富',
|
||||
'来自顶尖互联网公司的技术精英'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'AI领域战略转型',
|
||||
description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案。',
|
||||
features: [
|
||||
'成功转型AI交付领域',
|
||||
'定制化智能应用解决方案',
|
||||
'数据分析、智能推荐、自动化流程等高效解决方案'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🏆',
|
||||
title: '客户广泛认可',
|
||||
description: '为金融、制造、零售等多个行业的国内外知名企业提供服务，在行业内树立了可靠、专业的品牌形象。',
|
||||
features: [
|
||||
'服务多个行业知名企业',
|
||||
'金融、制造、零售等行业经验',
|
||||
'可靠的品牌形象和专业的服务'
|
||||
]
|
||||
}
|
||||
};
|
||||
],
|
||||
milestones: [
|
||||
{
|
||||
year: '2018年10月',
|
||||
title: '公司成立',
|
||||
description: '开始在计算机软硬件、网络科技、信息科技等领域提供技术服务'
|
||||
},
|
||||
{
|
||||
year: '2022年',
|
||||
title: 'AI战略转型',
|
||||
description: '成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供智能应用解决方案'
|
||||
},
|
||||
{
|
||||
year: '现今',
|
||||
title: '行业领先',
|
||||
description: '已为多家国内外知名大型企业提供服务，业务范围覆盖多个行业，赢得了广泛的行业认可'
|
||||
}
|
||||
],
|
||||
businessAreas: [
|
||||
{
|
||||
icon: '💻',
|
||||
name: '技术开发与服务',
|
||||
description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务，致力于推动行业技术进步。',
|
||||
services: [
|
||||
'系统优化与性能提升',
|
||||
'网络架构设计',
|
||||
'信息安全解决方案',
|
||||
'技术咨询与培训'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🧠',
|
||||
name: 'AI智能应用',
|
||||
description: '专注于人工智能技术，为客户提供定制化的智能解决方案，涵盖数据分析、智能推荐、自动化流程等多个领域。',
|
||||
services: [
|
||||
'数据分析与挖掘',
|
||||
'智能推荐系统',
|
||||
'自动化流程',
|
||||
'机器学习模型'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '🔧',
|
||||
name: '系统集成与软件开发',
|
||||
description: '提供高效的计算机信息系统集成服务，以及创新的软件开发，助力企业数字化转型。',
|
||||
services: [
|
||||
'系统集成服务',
|
||||
'定制化软件开发',
|
||||
'数字化转型',
|
||||
'技术架构设计'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面基础样式 */
|
||||
.about-us-page {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 页面横幅 */
|
||||
.page-banner {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
color: white;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
animation: fadeInUp 1s ease-out;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 3rem;
|
||||
opacity: 0.9;
|
||||
animation: fadeInUp 1s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.banner-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 60px;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
animation: fadeInUp 1s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #3498db;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 通用区域样式 */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #3498db, #9b59b6);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #6c757d;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 公司概况 */
|
||||
.company-overview {
|
||||
padding: 80px 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.overview-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overview-text p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #495057;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.overview-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
background: white;
|
||||
padding: 60px 40px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 4rem;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.image-placeholder p {
|
||||
color: #6c757d;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 核心优势 */
|
||||
.core-advantages {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.advantages-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.advantage-card {
|
||||
background: white;
|
||||
padding: 40px 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.advantage-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.advantage-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.advantage-card h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.advantage-card p {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.advantage-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.advantage-features li {
|
||||
color: #495057;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.advantage-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #28a745;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 发展历程 */
|
||||
.development-timeline {
|
||||
padding: 80px 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: #3498db;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #3498db;
|
||||
border: 4px solid white;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
width: 45%;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) .timeline-content {
|
||||
margin-right: 55%;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) .timeline-content {
|
||||
margin-left: 55%;
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
color: #3498db;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.timeline-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 业务领域 */
|
||||
.business-areas {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.areas-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.area-card {
|
||||
background: white;
|
||||
padding: 40px 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.area-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.area-header {
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.area-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.area-header h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.area-description {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.area-services h4 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.area-services ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.area-services li {
|
||||
color: #495057;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.area-services li::before {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #3498db;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 企业愿景 */
|
||||
.company-vision {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.vision-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vision-text h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.vision-text h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.vision-text p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #bdc3c7;
|
||||
}
|
||||
|
||||
.vision-image .image-placeholder {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.vision-image .placeholder-icon {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.vision-image .image-placeholder p {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
/* 联系我们 */
|
||||
.contact-section {
|
||||
padding: 80px 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.contact-card h4 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.contact-card p {
|
||||
color: #6c757d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.banner-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.banner-stats {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.overview-content,
|
||||
.vision-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
width: calc(100% - 60px);
|
||||
margin-left: 60px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.advantages-grid,
|
||||
.areas-grid,
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.company-overview,
|
||||
.core-advantages,
|
||||
.development-timeline,
|
||||
.business-areas,
|
||||
.company-vision,
|
||||
.contact-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<leftMenu> </leftMenu>
|
||||
<icontent>
|
||||
<h3 data-v-7630ff5e="" data-v-41de0e1c=""> 我们是谁？</h3>
|
||||
<p data-v-7630ff5e="" data-v-41de0e1c="">
|
||||
我们是一家员工所有的公司，其业务围绕着许多核心价值观。可持续性，平等和合作是其中的一部分。我们业务的很大一部分是基于与客户共同寻找创新解决方案，使客户能够降低能耗。我们有很多技巧。通过将我们的技能与客户技能相结合，我们帮助客户简化其物业，房地产和设施管理流程。
|
||||
</p>
|
||||
<h3 data-v-7630ff5e="" data-v-41de0e1c="">我们做什么</h3>
|
||||
<p data-v-7630ff5e="" data-v-41de0e1c="">
|
||||
我们开发IT解决方案和服务，用于管理房地产，房地产和设施管理中的战略信息。我们还在智能建筑和物业及设施管理领域从事商业咨询。借助最新技术，我们可以创建解决方案和平台，帮助客户将其业务数字化。
|
||||
</p>
|
||||
<h3 data-v-7630ff5e="" data-v-41de0e1c="">
|
||||
我们的愿景和经营理念
|
||||
</h3>
|
||||
<p data-v-7630ff5e="" data-v-41de0e1c="">
|
||||
我们将在物业，房地产和设施管理方面提供最好的服务和解决方案。我们决心拥有传统和保守的部门，以了解持续和自动数据收集和分析的必要性。
|
||||
|
||||
</p>
|
||||
|
||||
</icontent>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted: function () {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav_div {
|
||||
font-size: 25px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.cav_contact_div1 {
|
||||
margin-bottom: 40px;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: left;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 35%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.cav_contact_ul > li {
|
||||
list-style: none;
|
||||
padding-top: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<leftMenu> </leftMenu>
|
||||
<icontent>
|
||||
<p> 丙维科技一直致力于成为一个有吸引力的雇主。</p>
|
||||
<p> 我们是一家信奉环境和性别平等的公司。有了我们，您始终有机会成长和发展。我们一直在寻找新员工。如果您有兴趣加入我们的团队，请随时与我们联系。</p>
|
||||
</icontent>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted: function () {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<ihead></ihead>
|
||||
<div class="contentPage">
|
||||
|
||||
<div class="contentTable">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<ifooter></ifooter>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<leftMenu> </leftMenu>
|
||||
<icontent>
|
||||
|
||||
<p> 我们的解决方案是比亚迪解决方案（自带设备解决方案）。</p>
|
||||
|
||||
<p> 我们开发了可用于管理设施管理中日常工作的应用程序。</p>
|
||||
|
||||
<p> 通过我们的解决方案，您可以随时随地履行职责。</p>
|
||||
</icontent>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<leftMenu> </leftMenu>
|
||||
<icontent></icontent>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,19 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<ihead></ihead>
|
||||
|
||||
<!-- 现代化横幅区域 -->
|
||||
<div class="banner">
|
||||
<swiper ref="swiper" :options="swiperOption">
|
||||
<swiper-slide v-for="banner in banners" :key="banner.img">
|
||||
<div class="banner-content">
|
||||
<img :src="banner.img" width="100%" />
|
||||
<div class="banner-overlay">
|
||||
<div class="banner-text">
|
||||
<h1 class="banner-title">{{banner.title}}</h1>
|
||||
<p class="banner-subtitle">{{banner.subtitle}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
|
||||
<div class="directionControl swiper-button-prev" slot="button-prev"> </div>
|
||||
<div class="directionControl swiper-button-next" slot="button-next"> </div>
|
||||
<div class="swiper-pagination" slot="pagination"> </div>
|
||||
</swiper>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 公司介绍区域 -->
|
||||
<div class="company-intro">
|
||||
<div class="container">
|
||||
<div class="intro-header">
|
||||
<h2 class="section-title">技术驱动未来，服务创造价值</h2>
|
||||
<p class="section-subtitle">上海丙维数字科技有限公司成立于2018年，专注于AI交付内容，为客户提供高质量的数字化解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="intro-content">
|
||||
<div class="intro-card">
|
||||
<div class="card-icon">🏢</div>
|
||||
<h3>公司概况</h3>
|
||||
<p>成立于2018年10月22日，注册资本600万元人民币，总部位于上海市宝山区高逸路112-118号3幢6422室</p>
|
||||
</div>
|
||||
|
||||
<div class="intro-card">
|
||||
<div class="card-icon">🎯</div>
|
||||
<h3>核心使命</h3>
|
||||
<p>致力于计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务</p>
|
||||
</div>
|
||||
|
||||
<div class="intro-card">
|
||||
<div class="card-icon">🚀</div>
|
||||
<h3>AI转型</h3>
|
||||
<p>2022年成功转型AI交付领域，围绕客户需求提供智能应用解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 核心优势展示 -->
|
||||
<div class="core-advantages">
|
||||
<div class="container">
|
||||
<h2 class="section-title">核心优势</h2>
|
||||
<div class="advantages-grid">
|
||||
<div class="advantage-item" v-for="advantage in advantages" :key="advantage.title">
|
||||
<div class="advantage-icon">{{advantage.icon}}</div>
|
||||
<h3>{{advantage.title}}</h3>
|
||||
<p>{{advantage.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 业务领域展示 -->
|
||||
<div class="business-areas">
|
||||
<div class="container">
|
||||
<h2 class="section-title">业务领域</h2>
|
||||
<div class="areas-grid">
|
||||
<div class="area-item" v-for="area in businessAreas" :key="area.name">
|
||||
<div class="area-icon">{{area.icon}}</div>
|
||||
<h3>{{area.name}}</h3>
|
||||
<p>{{area.description}}</p>
|
||||
<ul class="area-features">
|
||||
<li v-for="feature in area.features" :key="feature">{{feature}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原有产品展示区域 -->
|
||||
<div class="scrollToContentWrapper">
|
||||
<a href="javascript:void(0)" id="scrollToBoxes" class="scrollToContent bottomShadowSegmentLight">
|
||||
<img src="../assets/img/svg/ic_caret.svg" alt="">
|
||||
@@ -21,7 +92,6 @@
|
||||
</div>
|
||||
|
||||
<div id="pageBoxesContainer" class="page pageBoxes">
|
||||
|
||||
<div class="box" v-for="product in productData" :key="product.name">
|
||||
<img width="100%" :src="product.img" />
|
||||
<div class="boxTableHeader">
|
||||
@@ -31,9 +101,39 @@
|
||||
<router-link v-else :to="product.url"> </router-link>
|
||||
</div>
|
||||
</div>
|
||||
<ifooter></ifooter>
|
||||
|
||||
<!-- 联系我们区域 -->
|
||||
<div class="contact-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">联系我们</h2>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">📍</div>
|
||||
<div>
|
||||
<h4>注册地址</h4>
|
||||
<p>上海市宝山区高逸路112-118号3幢6422室</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">📞</div>
|
||||
<div>
|
||||
<h4>联系电话</h4>
|
||||
<p>13817819452</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon">🌐</div>
|
||||
<div>
|
||||
<h4>官方网站</h4>
|
||||
<p>www.bimwe.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ifooter></ifooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -53,12 +153,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
swiperOption: {
|
||||
autoplay: 2000,
|
||||
autoplay: 3000,
|
||||
speed: 1000,
|
||||
loop: true,
|
||||
effect: 'fade',
|
||||
fadeEffect: {
|
||||
crossFade: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
|
||||
prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
@@ -68,10 +172,63 @@ export default {
|
||||
},
|
||||
},
|
||||
banners: [
|
||||
{ img: banner_index0 },
|
||||
{ img: banner_index1 },
|
||||
{ img: banner_index2 },
|
||||
{ img: banner_index3 },
|
||||
{
|
||||
img: banner_index0,
|
||||
title: '智能数字化解决方案',
|
||||
subtitle: '技术驱动未来，服务创造价值'
|
||||
},
|
||||
{
|
||||
img: banner_index1,
|
||||
title: 'AI技术引领者',
|
||||
subtitle: '专注AI交付，助力企业数字化转型'
|
||||
},
|
||||
{
|
||||
img: banner_index2,
|
||||
title: '顶尖技术团队',
|
||||
subtitle: '阿里、字节、腾讯技术精英汇聚'
|
||||
},
|
||||
{
|
||||
img: banner_index3,
|
||||
title: '行业解决方案专家',
|
||||
subtitle: '金融、制造、零售多行业服务经验'
|
||||
},
|
||||
],
|
||||
advantages: [
|
||||
{
|
||||
icon: '👥',
|
||||
title: '顶尖技术团队',
|
||||
description: '由阿里、字节、腾讯等顶尖互联网公司资深开发人员组成，技术积累深厚，项目经验丰富'
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'AI领域战略转型',
|
||||
description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案'
|
||||
},
|
||||
{
|
||||
icon: '🏆',
|
||||
title: '客户广泛认可',
|
||||
description: '为金融、制造、零售等多个行业的国内外知名企业提供服务，在行业内树立了可靠、专业的品牌形象'
|
||||
}
|
||||
],
|
||||
businessAreas: [
|
||||
{
|
||||
icon: '💻',
|
||||
name: '技术开发与服务',
|
||||
description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务',
|
||||
features: ['系统优化与性能提升', '网络架构设计', '信息安全解决方案', '技术咨询与培训']
|
||||
},
|
||||
{
|
||||
icon: '🧠',
|
||||
name: 'AI智能应用',
|
||||
description: '专注于人工智能技术，为客户提供定制化的智能解决方案',
|
||||
features: ['数据分析与挖掘', '智能推荐系统', '自动化流程', '机器学习模型']
|
||||
},
|
||||
{
|
||||
icon: '🔧',
|
||||
name: '系统集成与软件开发',
|
||||
description: '提供高效的计算机信息系统集成服务，以及创新的软件开发',
|
||||
features: ['系统集成服务', '定制化软件开发', '数字化转型', '技术架构设计']
|
||||
}
|
||||
],
|
||||
productData: [
|
||||
{
|
||||
@@ -85,7 +242,6 @@ export default {
|
||||
img: boxbg_smartbuildings,
|
||||
url: '/IntelligentBuild',
|
||||
},
|
||||
|
||||
{
|
||||
name: '物联网',
|
||||
img: boxbg_iot,
|
||||
@@ -101,7 +257,6 @@ export default {
|
||||
img: boxbg_errands,
|
||||
url: '/ourPlan/reaEstate',
|
||||
},
|
||||
|
||||
{
|
||||
name: '智慧系统',
|
||||
img: boxbg_propertyandrealestate,
|
||||
@@ -116,7 +271,330 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 横幅样式升级 */
|
||||
.banner {
|
||||
position: relative;
|
||||
height: 80vh;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
max-width: 800px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
animation: fadeInUp 1s ease-out;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
animation: fadeInUp 1s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
/* 公司介绍区域 */
|
||||
.company-intro {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.intro-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #3498db, #9b59b6);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #6c757d;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.intro-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
background: white;
|
||||
padding: 40px 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.intro-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.intro-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.intro-card p {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 核心优势区域 */
|
||||
.core-advantages {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.advantages-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 40px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.advantage-item {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.advantage-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.advantage-item h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.advantage-item p {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* 业务领域区域 */
|
||||
.business-areas {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
}
|
||||
|
||||
.areas-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 40px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.area-item {
|
||||
background: white;
|
||||
padding: 40px 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.area-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.area-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.area-item h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.area-item p {
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.area-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.area-features li {
|
||||
color: #495057;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.area-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #28a745;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 联系我们区域 */
|
||||
.contact-section {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 40px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 30px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-item h4 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
color: #6c757d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.banner-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.intro-content,
|
||||
.advantages-grid,
|
||||
.areas-grid,
|
||||
.contact-info {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.company-intro,
|
||||
.core-advantages,
|
||||
.business-areas,
|
||||
.contact-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 原有样式保持 */
|
||||
.swiper-pagination {
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.pageBoxes {
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,13 +17,27 @@ module.exports = {
|
||||
config.resolve.alias.set("@", resolve("src"));
|
||||
config.resolve.alias.set("_c", resolve("src/components"));
|
||||
|
||||
// 正确处理 SVG 文件
|
||||
config.module.rule('svg')
|
||||
.test(/\.svg$/)
|
||||
.use('file-loader')
|
||||
.loader('file-loader')
|
||||
.options({
|
||||
name: 'assets/svg/[name].[hash:8].[ext]'
|
||||
});
|
||||
|
||||
config.module.rule('images').test(/\.(png|jpe?g|gif)(\?.*)?$/).use('url-loader').loader('url-loader').options({
|
||||
// 处理图片文件（排除 SVG）
|
||||
config.module.rule('images')
|
||||
.test(/\.(png|jpe?g|gif)(\?.*)?$/)
|
||||
.use('url-loader')
|
||||
.loader('url-loader')
|
||||
.options({
|
||||
limit: 10000,
|
||||
esModule: false,
|
||||
outputPath: "images/"
|
||||
})
|
||||
});
|
||||
|
||||
// 图片压缩（仅对 PNG、JPG、GIF）
|
||||
config.module.rule('images')
|
||||
.test(/\.(png|jpe?g|gif)(\?.*)?$/)
|
||||
.use('image-webpack-loader')
|
||||
@@ -47,13 +61,7 @@ module.exports = {
|
||||
webp: {
|
||||
quality: 75
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
configureWebpack: {
|
||||
@@ -61,6 +69,28 @@ module.exports = {
|
||||
filename: "js/[hash].js",
|
||||
},
|
||||
},
|
||||
|
||||
// PostCSS 配置
|
||||
css: {
|
||||
loaderOptions: {
|
||||
postcss: {
|
||||
postcssOptions: {
|
||||
plugins: [
|
||||
require('autoprefixer'),
|
||||
require('postcss-pxtorem')({
|
||||
rootValue: 16,
|
||||
propList: ['*'],
|
||||
selectorBlackList: [],
|
||||
replace: true,
|
||||
mediaQuery: false,
|
||||
minPixelValue: 1,
|
||||
exclude: /node_modules/i
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 设为false打包时不生成.map文件
|
||||
productionSourceMap: sourceMap,
|
||||
};
|
||||
Reference in New Issue
Block a user