// 内容部分 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:"核心方向:区块链底层技术研发、分布式共识机制(PoSR)、可信基础设施搭建,为上层业务提供去中心化、不可篡改的技术底座。" }, { // img:"images/IMUT_night.jpg", img:"images/index_bussiness2.webp", name:"代表产品:端到端 AI、AI 间自主交流社区事业、AI 影视平台", desc:"核心方向:
(1)底层:端到端 AI 技术研发、多模态模型训练与推理
(2)应用:AI 自主交互社区、AI 影视内容生产平台
(3)生态:构建 AI 协作与内容创作的完整生态闭环", }, { // img:"images/IMUT_day.jpg", img:"images/index_bussiness3.webp", name:"代表产品:高性能 JAVA 框架、虚幻引擎 JS 通用地编辑器", desc:"核心方向:
(1)后端:高性能企业级 Java 框架开发,支撑高并发业务场景
(2)前端 / 3D:基于虚幻引擎的 JS 可视化编辑器,降低 3D 场景开发门槛,赋能游戏、数字孪生等领域", }, { // img:"images/IMUT_night.jpg", img:"images/index_bussiness4.webp", name:"代表产品:海外通平台 H5、活畜收运销金融服务平台、基于白名单的安全防护系统、聚研 SaaS 平台", desc:"核心方向:
(1)产业数字化:活畜产业链金融服务、海外业务数字化 H5 平台
(2)企业服务:聚研 SaaS 平台,提供轻量化企业级解决方案
(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 = `
${businessList[index].name}
${businessList[index].desc}
`; // 处理背景图切换(兼容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); }) });