177 lines
5.9 KiB
JavaScript
177 lines
5.9 KiB
JavaScript
const productDataMap = {
|
||
"JavaWeb": {
|
||
title: "JavaWeb",
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
content: `
|
||
<div class="product-section">
|
||
<h3>产品特点</h3>
|
||
<ul>
|
||
<li>1.基于SpringBoot的轻量级Web框架，快速搭建企业级应用；</li>
|
||
<li>2.支持RESTful接口设计，适配前后端分离架构；</li>
|
||
<li>3.内置权限管理、日志记录等基础功能，降低开发成本。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-section">
|
||
<h3>优势功能</h3>
|
||
<ul>
|
||
<li>1.模块化开发，支持功能插件化扩展；</li>
|
||
<li>2.集成MyBatis-Plus，简化数据库操作；</li>
|
||
<li>3.支持Docker容器化部署，适配云原生环境。</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
},
|
||
"实验室SaS": {
|
||
title: "实验室SaS",
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
content: `
|
||
<div class="product-section">
|
||
<h3>产品特点</h3>
|
||
<ul>
|
||
<li>1.云原生SaaS服务，无需本地部署，按需订阅；</li>
|
||
<li>2.贴合实验室管理场景，覆盖样品、流程、数据全链路；</li>
|
||
<li>3.支持多终端访问，移动端适配现场作业。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-section">
|
||
<h3>优势功能</h3>
|
||
<ul>
|
||
<li>1.样品全生命周期追踪，流转可追溯；</li>
|
||
<li>2.SOP流程自动化，减少人为错误；</li>
|
||
<li>3.数据实时同步，支持多角色协同办公。</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
},
|
||
"坤班官网": {
|
||
title: "坤班官网",
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
content: `
|
||
<div class="product-section">
|
||
<h3>产品特点</h3>
|
||
<ul>
|
||
<li>1.响应式设计，适配PC/移动端访问；</li>
|
||
<li>2.集成信息展示、活动报名、资源下载等功能；</li>
|
||
<li>3.支持后台内容管理，快速更新信息。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-section">
|
||
<h3>优势功能</h3>
|
||
<ul>
|
||
<li>1.模块化布局，可灵活调整页面结构；</li>
|
||
<li>2.内置SEO优化，提升搜索引擎收录效果；</li>
|
||
<li>3.支持访问数据统计，分析用户行为。</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
},
|
||
|
||
"UE5": {
|
||
title: "UE5",
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
content: `
|
||
<div class="product-section">
|
||
<h3>产品特点</h3>
|
||
<ul>
|
||
<li>1.基于虚幻引擎5的3D场景开发服务；</li>
|
||
<li>2.支持高精度模型渲染、虚拟场景搭建；</li>
|
||
<li>3.适配VR/AR设备，打造沉浸式体验。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-section">
|
||
<h3>优势功能</h3>
|
||
<ul>
|
||
<li>1.利用Nanite虚拟微多边形几何体，实现超高精度模型；</li>
|
||
<li>2.Lumen全局光照，提升场景真实感；</li>
|
||
<li>3.支持蓝图可视化编程，降低开发门槛。</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
},
|
||
"其他": {
|
||
title: "其他产品",
|
||
img: "images/内蒙古工业大学夜晚.jpg",
|
||
content: `
|
||
<div class="product-section">
|
||
<h3>产品特点</h3>
|
||
<ul>
|
||
<li>1.基于虚幻引擎5的3D场景开发服务；</li>
|
||
<li>2.支持高精度模型渲染、虚拟场景搭建；</li>
|
||
<li>3.适配VR/AR设备，打造沉浸式体验。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-section">
|
||
<h3>优势功能</h3>
|
||
<ul>
|
||
<li>1.利用Nanite虚拟微多边形几何体，实现超高精度模型；</li>
|
||
<li>2.Lumen全局光照，提升场景真实感；</li>
|
||
<li>3.支持蓝图可视化编程，降低开发门槛。</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
},
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 从URL获取产品类型
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const productType = urlParams.get('type') || "JavaWeb";
|
||
// const other = productType.slice(2,3);
|
||
console.log(productType);
|
||
|
||
const detailTitle = document.getElementById('detailTitle');
|
||
// const detailImg = document.getElementById('detailImg');
|
||
const detailContent = document.getElementById('detailContent');
|
||
const formProductName = document.getElementById('formProductName');
|
||
const formTip = document.getElementById('formTip');
|
||
|
||
let product = productDataMap[productType];
|
||
// 填充产品详情
|
||
if(productType.slice(0,2)=='其他'){
|
||
product = productDataMap[productType.slice(0,2)];
|
||
console.log(productType.slice(2,3));
|
||
|
||
if(product){
|
||
detailTitle.textContent = product.title+productType.slice(2,3);
|
||
detailContent.innerHTML = product.content;
|
||
formProductName.textContent = product.title;
|
||
|
||
}
|
||
}else{
|
||
if (product) {
|
||
detailTitle.textContent = product.title;
|
||
detailContent.innerHTML = product.content;
|
||
formProductName.textContent = product.title;
|
||
}
|
||
}
|
||
|
||
// console.log(product.title);
|
||
|
||
|
||
// }
|
||
|
||
// 预约表单逻辑
|
||
const btnReserve = document.querySelector('.btn-reserve');
|
||
const btnCancel = document.querySelector('.btn-cancel');
|
||
const userName = document.getElementById('user-name');
|
||
const contact = document.getElementById('contact');
|
||
const btnReturn = document.querySelector('.btn-return');
|
||
btnReserve.addEventListener('click', function() {
|
||
if (!userName.value.trim() || !/^1[3-9]\d{9}$/.test(contact.value)) {
|
||
formTip.style.color = 'red';
|
||
formTip.textContent = '请输入完整且格式正确的信息！';
|
||
return;
|
||
}
|
||
alert("预约成功！我们将尽快与您联系。");
|
||
});
|
||
|
||
btnCancel.addEventListener('click', function() {
|
||
userName.value = '';
|
||
contact.value = '';
|
||
formTip.textContent = '';
|
||
});
|
||
|
||
btnReturn.addEventListener('click',function(){
|
||
history.back();
|
||
});
|
||
}); |