64 lines
3.4 KiB
JavaScript
64 lines
3.4 KiB
JavaScript
// 内容部分
|
||
const businessContent = document.querySelector('.business-content');
|
||
console.log(businessContent);
|
||
const businessBgImg = document.querySelector('#businessBgImg');
|
||
const business_card = document.querySelectorAll('.business-card');
|
||
const business_card_group = document.querySelector('.business-card-group');
|
||
|
||
const businessList = [
|
||
{
|
||
img:"images/index_bussiness1.webp",
|
||
name:"代表产品：众产 PoSR 区块链底座研究",
|
||
// 给核心方向添加span标签并设置样式
|
||
desc:"<span style='font-size:20px; font-weight:600;'>核心方向：</span>区块链底层技术研发、分布式共识机制（PoSR）、可信基础设施搭建，为上层业务提供去中心化、不可篡改的技术底座。"
|
||
},
|
||
{
|
||
// img:"images/IMUT_night.jpg",
|
||
img:"images/index_bussiness2.webp",
|
||
name:"代表产品：端到端 AI、AI 间自主交流社区事业、AI 影视平台",
|
||
desc:"<span style='font-size:20px; font-weight:600;'>核心方向：</span><br>(1)底层：端到端 AI 技术研发、多模态模型训练与推理 <br> (2)应用：AI 自主交互社区、AI 影视内容生产平台 <br> (3)生态：构建 AI 协作与内容创作的完整生态闭环",
|
||
},
|
||
{
|
||
// img:"images/IMUT_day.jpg",
|
||
img:"images/index_bussiness3.webp",
|
||
name:"代表产品：高性能 JAVA 框架、虚幻引擎 JS 通用地编辑器",
|
||
desc:"<span style='font-size:20px; font-weight:600;'>核心方向：</span><br>(1)后端：高性能企业级 Java 框架开发，支撑高并发业务场景 <br> (2)前端 / 3D：基于虚幻引擎的 JS 可视化编辑器，降低 3D 场景开发门槛，赋能游戏、数字孪生等领域",
|
||
},
|
||
{
|
||
// img:"images/IMUT_night.jpg",
|
||
img:"images/index_bussiness4.webp",
|
||
name:"代表产品：海外通平台 H5、活畜收运销金融服务平台、基于白名单的安全防护系统、聚研 SaaS 平台",
|
||
desc:"<span style='font-size:20px; font-weight:600;'>核心方向：</span><br> (1)产业数字化：活畜产业链金融服务、海外业务数字化 H5 平台 <br> (2)企业服务：聚研 SaaS 平台，提供轻量化企业级解决方案 <br> (3)安全保障：基于白名单的安全防护系统，为数字化业务提供可信安全保障",
|
||
},
|
||
];
|
||
|
||
business_card.forEach(card=>{
|
||
card.addEventListener('mouseover',function(){
|
||
const arrayindex = Array.from(business_card);
|
||
const index = arrayindex.indexOf(card);
|
||
console.log(businessList[index].name);
|
||
|
||
// 渲染业务内容
|
||
businessContent.innerHTML =
|
||
`
|
||
<div class="business-content-title" style="color:black;">${businessList[index].name}</div>
|
||
<div class="business-content-desc" style="color:black;">${businessList[index].desc}</div>
|
||
`;
|
||
|
||
// 处理背景图切换（兼容img为空的情况）
|
||
businessBgImg.style.opacity = 0;
|
||
setTimeout(() => {
|
||
// 若当前项无img，保留原有图片，避免加载失败
|
||
if (businessList[index].img) {
|
||
businessBgImg.src = businessList[index].img;
|
||
}
|
||
businessBgImg.onload = function() {
|
||
businessBgImg.style.opacity = 0.25;
|
||
};
|
||
// 兼容图片加载失败的情况
|
||
businessBgImg.onerror = function() {
|
||
businessBgImg.style.opacity = 0.25;
|
||
};
|
||
}, 300);
|
||
})
|
||
}); |