bimwe/official_network
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-08-25 17:55:01 +08:00
parent 3fa80ef071
commit 2d0a8a4647
20 changed files with 673 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

830
src/assets/css/animations.less
View File

File diff suppressed because it is too large Load Diff

BIN
src/assets/img/banner_index0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 390 KiB

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/assets/img/banner_index0_mobile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 274 KiB

BIN
src/assets/img/banner_index1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 347 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/img/banner_index1_mobile.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 124 KiB

BIN
src/assets/img/banner_index2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 KiB

After

Width:  |  Height:  |  Size: 123 KiB

BIN
src/assets/img/banner_index2_mobile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 190 KiB

BIN
src/assets/img/banner_index3_mobile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 150 KiB

BIN
src/assets/img/ic_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/img/ic_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/img/ic_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

40
src/components/ifooter.vue
View File

@@ -15,19 +15,18 @@
<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>
<li v-for="item in aboutUsMenu" :key="item.name">
<router-link :to="item.url">{{ item.name }}</router-link>
</li>
</ul>
</div>
<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>
<li v-for="solution in solutionsMenu" :key="solution.name">
<router-link :to="solution.url">{{ solution.name }}</router-link>
</li>
</ul>
</div>
@@ -35,19 +34,19 @@
<h4>联系我们</h4>
<div class="contact-info">
<div class="contact-item">
<span class="contact-icon">📍</span>
<span class="contact-icon">🏢</span>
<span>上海市宝山区高逸路112-118号3幢6422室</span>
</div>
<div class="contact-item">
<span class="contact-icon">📞</span>
<span class="contact-icon">📱</span>
<span>13817819452</span>
</div>
<div class="contact-item">
<span class="contact-icon">✉️</span>
<span class="contact-icon">📧</span>
<span>bimwe@bimwe.com</span>
</div>
<div class="contact-item">
<span class="contact-icon">🌐</span>
<span class="contact-icon">💻</span>
<span>www.bimwe.com</span>
</div>
</div>
@@ -58,12 +57,12 @@
<div class="footer-bottom">
<div class="footer-bottom-content">
<div class="copyright">
<p>&copy; 2024 上海丙维数字科技有限公司. 保留所有权利.</p>
<p>&copy; © 2025 上海丙维数字科技有限公司. 保留所有权利.</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>
<span class="beian-icon">🔒</span>
<span>沪ICP备19005870号-1</span>
</div>
</div>
</div>
@@ -79,11 +78,15 @@
</template>
<script>
import { getFooterAboutUsMenu, getFooterSolutionsMenu } from '../config/menu'
export default {
name: 'ifooter',
data() {
return {
showBackToTop: false
showBackToTop: false,
aboutUsMenu: getFooterAboutUsMenu(),
solutionsMenu: getFooterSolutionsMenu()
}
},
mounted() {
@@ -264,9 +267,10 @@ export default {
}
.beian-icon {
width: 16px;
height: 16px;
filter: brightness(0) invert(0.6);
font-size: 1.2rem;
width: 20px;
text-align: center;
color: #95a5a6;
}
/* 返回顶部按钮 */

26
src/components/ihead.vue
View File

@@ -70,36 +70,14 @@
<script>
import { common } from '../static/common'
import { getMainMenu } from '../config/menu'
export default {
name: 'ihead',
data() {
return {
isMiniHeader: false,
menus: [
{
name: '首页',
url: '/index',
child: []
},
{
name: '关于我们',
url: '/aboutUs',
child: []
},
{
name: '我们的方案',
url: '/ourPlan',
child: [
{ name: 'AI集成', url: '/ourPlan/aiSolutions' },
{ name: '智能建筑', url: '/ourPlan/estateManagement' },
{ name: '物联网', url: '/ourPlan/iot' },
{ name: '设施管理', url: '/ourPlan/facilityManagement' },
{ name: '系统集成', url: '/ourPlan/technologyIntegration' }
]
},
]
menus: getMainMenu()
}
},
computed: {

59
src/config/menu.js Normal file
View File

@@ -0,0 +1,59 @@
/**
* 菜单配置文件 - 统一管理头部和页脚菜单
*/
export const menuConfig = {
// 主导航菜单
mainMenu: [
{
name: '首页',
url: '/index',
child: []
},
{
name: '关于我们',
url: '/aboutUs',
child: []
},
{
name: '我们的方案',
url: '/ourPlan',
child: [
{ name: 'AI集成', url: '/ourPlan/aiSolutions' },
{ name: '智能建筑', url: '/ourPlan/estateManagement' },
{ name: '物联网', url: '/ourPlan/iot' },
{ name: '设施管理', url: '/ourPlan/facilityManagement' },
{ name: '系统集成', url: '/ourPlan/technologyIntegration' }
]
}
],
// 页脚菜单配置
footerMenu: {
aboutUs: [
{ name: '公司简介', url: '/aboutUs' }
],
solutions: [
{ name: 'AI集成', url: '/ourPlan/aiSolutions' },
{ name: '智能建筑', url: '/ourPlan/estateManagement' },
{ name: '物联网', url: '/ourPlan/iot' },
{ name: '设施管理', url: '/ourPlan/facilityManagement' },
{ name: '系统集成', url: '/ourPlan/technologyIntegration' }
]
}
}
// 获取主导航菜单
export const getMainMenu = () => menuConfig.mainMenu
// 获取页脚关于我们菜单
export const getFooterAboutUsMenu = () => menuConfig.footerMenu.aboutUs
// 获取页脚解决方案菜单
export const getFooterSolutionsMenu = () => menuConfig.footerMenu.solutions
// 获取所有解决方案
export const getAllSolutions = () => {
const solutionMenu = menuConfig.mainMenu.find(menu => menu.name === '我们的方案');
return solutionMenu && solutionMenu.child ? solutionMenu.child : [];
}

8
src/router.js
View File

@@ -71,4 +71,12 @@ router.beforeEach((to, from, next) => {
next();
});
// 全局后置钩子 - 路由切换完成后触发动画重置
router.afterEach((to, from) => {
// 触发自定义路由变化事件
window.dispatchEvent(new CustomEvent('routeChange', {
detail: { to, from }
}));
});
export default router

79
src/static/animation_helper.js
View File

@@ -22,6 +22,9 @@ class AnimationHelper {
// 添加滚动事件监听
this.addScrollListeners();
// 监听路由变化
this.setupRouteListener();
// 初始化页面加载动画
this.initPageLoadAnimations();
@@ -61,6 +64,20 @@ class AnimationHelper {
window.addEventListener('resize', this.handleResize.bind(this), { passive: true });
}
/**
* 设置路由监听
*/
setupRouteListener() {
// 监听 popstate 事件（浏览器前进后退）
window.addEventListener('popstate', this.handleRouteChange.bind(this));
// 监听自定义路由变化事件
window.addEventListener('routeChange', this.handleRouteChange.bind(this));
// 监听页面可见性变化
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
}
/**
* 处理滚动事件
*/
@@ -77,6 +94,30 @@ class AnimationHelper {
this.recalculateAnimations();
}
/**
* 处理路由变化
*/
handleRouteChange() {
// 延迟重置动画，确保DOM已更新
setTimeout(() => {
this.resetAnimations();
this.initPageLoadAnimations();
}, 100);
}
/**
* 处理页面可见性变化
*/
handleVisibilityChange() {
if (!document.hidden) {
// 页面重新可见时，重置动画状态
setTimeout(() => {
this.resetAnimations();
this.initPageLoadAnimations();
}, 100);
}
}
/**
* 初始化页面加载动画
*/
@@ -276,6 +317,41 @@ class AnimationHelper {
});
}
/**
* 重置所有动画状态
*/
resetAnimations() {
// 重置所有动画元素的类
this.animatedElements.forEach(element => {
if (element.classList.contains('scroll-animate')) {
element.classList.remove('animate-in');
} else if (element.classList.contains('animate-stagger')) {
element.classList.remove('visible');
// 重置子元素状态
const children = Array.from(element.children);
children.forEach((child, index) => {
child.style.opacity = '0';
child.style.transform = 'translateY(30px)';
});
}
});
// 重置所有带有动画类的元素
const allAnimatedElements = document.querySelectorAll('.animate-on-scroll, .animate-stagger, .scroll-animate');
allAnimatedElements.forEach(element => {
element.classList.remove('visible', 'animate-in');
// 重置 transform 和 opacity
if (element.classList.contains('animate-on-scroll')) {
element.style.opacity = '0';
element.style.transform = 'translateY(30px)';
}
});
// 重新观察所有元素
this.recalculateAnimations();
}
/**
* 显示所有元素（降级处理）
*/
@@ -334,6 +410,9 @@ class AnimationHelper {
window.removeEventListener('scroll', this.handleScroll);
window.removeEventListener('resize', this.handleResize);
window.removeEventListener('popstate', this.handleRouteChange);
window.removeEventListener('routeChange', this.handleRouteChange);
document.removeEventListener('visibilitychange', this.handleVisibilityChange);
this.animatedElements = [];
this.isInitialized = false;

74
src/views/aboutUs/aboutUs.vue
View File

@@ -60,7 +60,10 @@
<div class="advantages-grid">
<div class="advantage-card" v-for="advantage in advantages" :key="advantage.title">
<div class="advantage-icon">{{advantage.icon}}</div>
<div class="advantage-icon">
<img v-if="typeof advantage.icon === 'string' && advantage.icon.includes('.png')" :src="advantage.icon" :alt="advantage.title" class="icon-image">
<span v-else>{{advantage.icon}}</span>
</div>
<h3>{{advantage.title}}</h3>
<p>{{advantage.description}}</p>
<ul class="advantage-features">
@@ -103,7 +106,10 @@
<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>
<div class="area-icon">
<img v-if="typeof area.icon === 'string' && area.icon.includes('.png')" :src="area.icon" :alt="area.name" class="icon-image">
<span v-else>{{area.icon}}</span>
</div>
<h3>{{area.name}}</h3>
</div>
<p class="area-description">{{area.description}}</p>
@@ -192,16 +198,16 @@ export default {
'来自顶尖互联网公司的技术精英'
]
},
{
icon: '🤖',
title: 'AI领域战略转型',
description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案。',
features: [
'成功转型AI交付领域',
'定制化智能应用解决方案',
'数据分析、智能推荐、自动化流程等高效解决方案'
]
},
{
icon:'🤖',
title: 'AI领域战略转型',
description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案。',
features: [
'成功转型AI交付领域',
'定制化智能应用解决方案',
'数据分析、智能推荐、自动化流程等高效解决方案'
]
},
{
icon: '🏆',
title: '客户广泛认可',
@@ -231,8 +237,8 @@ export default {
}
],
businessAreas: [
{
icon: '💻',
{
icon: require('../../assets/img/ic_1.png'),
name: '技术开发与服务',
description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务，致力于推动行业技术进步。',
services: [
@@ -243,7 +249,7 @@ export default {
]
},
{
icon: '🧠',
icon: require('../../assets/img/ic_2.png'),
name: 'AI智能应用',
description: '专注于人工智能技术，为客户提供定制化的智能解决方案，涵盖数据分析、智能推荐、自动化流程等多个领域。',
services: [
@@ -254,7 +260,7 @@ export default {
]
},
{
icon: '🔧',
icon: require('../../assets/img/ic_3.png'),
name: '系统集成与软件开发',
description: '提供高效的计算机信息系统集成服务，以及创新的软件开发，助力企业数字化转型。',
services: [
@@ -432,11 +438,20 @@ export default {
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.advantage-icon {
font-size: 3rem;
margin-bottom: 20px;
text-align: center;
}
.advantage-icon {
font-size: 3rem;
margin-bottom: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.advantage-icon .icon-image {
width: 60px;
height: 60px;
object-fit: contain;
}
.advantage-card h3 {
font-size: 1.8rem;
@@ -591,10 +606,19 @@ export default {
margin-bottom: 25px;
}
.area-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.area-icon {
font-size: 3rem;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.area-icon .icon-image {
width: 60px;
height: 60px;
object-fit: contain;
}
.area-header h3 {
font-size: 1.8rem;

67
src/views/index.vue
View File

@@ -75,11 +75,14 @@
<div class="container">
<h2 class="section-title animate-on-scroll">核心优势</h2>
<div class="advantages-grid animate-stagger">
<div class="advantage-item hover-scale" v-for="advantage in advantages" :key="advantage.title">
<div class="advantage-icon animate bounce delay-1s">{{advantage.icon}}</div>
<h3>{{advantage.title}}</h3>
<p>{{advantage.description}}</p>
</div>
<div class="advantage-item hover-scale" v-for="advantage in advantages" :key="advantage.title">
<div class="advantage-icon animate bounce delay-1s">
<img v-if="typeof advantage.icon === 'string' && advantage.icon.includes('.png')" :src="advantage.icon" :alt="advantage.title" class="icon-image">
<span v-else>{{advantage.icon}}</span>
</div>
<h3>{{advantage.title}}</h3>
<p>{{advantage.description}}</p>
</div>
</div>
</div>
</div>
@@ -89,14 +92,18 @@
<div class="container">
<h2 class="section-title animate-on-scroll">业务领域</h2>
<div class="areas-grid animate-stagger">
<div class="area-item hover-glow" v-for="area in businessAreas" :key="area.name">
<div class="area-icon animate wobble delay-2s">{{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 class="area-item hover-glow" v-for="area in businessAreas" :key="area.name">
<div class="area-icon animate wobble delay-2s">
<img v-if="typeof area.icon === 'string' && area.icon.startsWith('data:')" :src="area.icon" :alt="area.name">
<img v-else-if="typeof area.icon === 'string' && area.icon.includes('.png')" :src="area.icon" :alt="area.name">
<span v-else>{{area.icon}}</span>
</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>
@@ -256,19 +263,19 @@ export default {
],
businessAreas: [
{
icon: '💻',
icon: require('../assets/img/ic_1.png'),
name: '技术开发与服务',
description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务',
features: ['系统优化与性能提升', '网络架构设计', '信息安全解决方案', '技术咨询与培训']
},
{
icon: '🧠',
icon: require('../assets/img/ic_2.png'),
name: 'AI智能应用',
description: '专注于人工智能技术，为客户提供定制化的智能解决方案',
features: ['数据分析与挖掘', '智能推荐系统', '自动化流程', '机器学习模型']
},
{
icon: '🔧',
icon: require('../assets/img/ic_3.png'),
name: '系统集成与软件开发',
description: '提供高效的计算机信息系统集成服务，以及创新的软件开发',
features: ['系统集成服务', '定制化软件开发', '数字化转型', '技术架构设计']
@@ -328,7 +335,7 @@ export default {
.banner {
position: relative;
height: 80vh;
min-height: 500px;
min-height:400px;
overflow: hidden;
}
@@ -479,10 +486,19 @@ export default {
padding: 40px 20px;
}
.advantage-icon {
font-size: 4rem;
margin-bottom: 20px;
}
.advantage-icon {
font-size: 4rem;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.advantage-icon .icon-image {
width: 60px;
height: 60px;
object-fit: contain;
}
.advantage-item h3 {
font-size: 1.8rem;
@@ -527,6 +543,15 @@ export default {
font-size: 3rem;
margin-bottom: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.area-icon img {
width: 60px;
height: 60px;
object-fit: contain;
}
.area-item h3 {

13
src/views/ourPlan/facilityManagement.vue
View File

@@ -22,7 +22,9 @@
</div>
<div class="service-card">
<div class="service-icon">🔧</div>
<div class="service-icon">
<img src="../../assets/img/ic_3.png" alt="设施管理" class="icon-image">
</div>
<h3>设备管理</h3>
<p>设备生命周期管理、性能监控、故障预警，最大化设备使用效率</p>
</div>
@@ -174,6 +176,15 @@ export default {
.service-icon {
font-size: 3rem;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.service-icon .icon-image {
width: 60px;
height: 60px;
object-fit: contain;
}
.service-card h3 {

21
src/views/ourPlan/ourPlan.vue
View File

@@ -33,21 +33,27 @@
</div>
<div class="service-card">
<div class="service-icon">⚙️</div>
<div class="service-icon">
<img src="../../assets/img/ic_1.png" alt="设施管理" class="icon-image">
</div>
<h4>设施管理</h4>
<p>提供全面的设施管理解决方案，确保设备高效运行。</p>
<router-link to="/ourPlan/facilityManagement" class="service-link">了解更多</router-link>
</div>
<div class="service-card">
<div class="service-icon">🤖</div>
<div class="service-icon">
<img src="../../assets/img/ic_2.png" alt="AI解决方案" class="icon-image">
</div>
<h4>AI解决方案</h4>
<p>运用人工智能技术，为企业提供智能化决策支持。</p>
<router-link to="/ourPlan/aiSolutions" class="service-link">了解更多</router-link>
</div>
<div class="service-card">
<div class="service-icon">🔧</div>
<div class="service-icon">
<img src="../../assets/img/ic_3.png" alt="技术集成" class="icon-image">
</div>
<h4>技术集成</h4>
<p>整合多种技术平台，构建统一的技术架构体系。</p>
<router-link to="/ourPlan/technologyIntegration" class="service-link">了解更多</router-link>
@@ -162,6 +168,15 @@ export default {
.service-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.service-icon .icon-image {
width: 60px;
height: 60px;
object-fit: contain;
}
.service-card h4 {