598 lines
31 KiB
HTML
598 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>数据资产</title>
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- 使用组件化的Header -->
|
|
<div id="header"></div>
|
|
|
|
<div class="banner-wrap">
|
|
<div class="s-flex ai-ct" style="height:100%">
|
|
<div class="width1600">
|
|
<h3>可信数据空间</h3>
|
|
<p>构建安全可信环境，保障数据全生命周期的安全流转，促进数据高效共享与深度应用</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="function-module">
|
|
<div class="width1600">
|
|
<div class="public-title">
|
|
<h4>功能模块</h4>
|
|
<p>可信数据空间四大核心功能模块</p>
|
|
</div>
|
|
<div class="function-module-list">
|
|
<div class="function-item">
|
|
<img src="./assets/images/func01-jNIM7hjY.png" alt="数据资产登记">
|
|
<h5>数据资产登记</h5>
|
|
<p>专业的数据资产登记服务，助力企业完成数据确权和入表。</p>
|
|
<a href="http://demo.sutedt.com:3060" class="btn" target="_blank">了解更多</a>
|
|
</div>
|
|
<div class="function-item">
|
|
<img src="./assets/images/func02-Bnh0ZuN5.png" alt="数据治理服务">
|
|
<h5>数据治理服务</h5>
|
|
<p>全面的数据治理能力，提供数据标准化、质量管理等服务。</p>
|
|
<a href="http://demo.sutedt.com:3070" class="btn" target="_blank">立即体验</a>
|
|
</div>
|
|
<div class="function-item">
|
|
<img src="./assets/images/func03-DYYDzlwQ.png" alt="可信数据环境">
|
|
<h5>可信数据环境</h5>
|
|
<p>安全可信的数据环境，支持数据沙箱和隐私计算。</p>
|
|
<a href="https://icloud-open.ibisaas.com" class="btn" target="_blank">进入环境</a>
|
|
</div>
|
|
<div class="function-item">
|
|
<img src="./assets/images/func04-D80yO0ne.png" alt="数据运营服务">
|
|
<h5>数据运营服务</h5>
|
|
<p>专业的数据运营服务，助力企业挖掘数据价值。</p>
|
|
<a href="./pages/mods/mod4-ops/data-market.html" class="btn">进入数据市场</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="core-tech">
|
|
<div class="width1600">
|
|
<div class="public-title">
|
|
<h4>核心技术</h4>
|
|
<p>基于隐私计算的可信数据环境</p>
|
|
</div>
|
|
|
|
<!-- 添加展示类型切换 -->
|
|
<div class="display-tabs">
|
|
<div class="display-tab active">3D演示</div>
|
|
<div class="display-tab">方案架构</div>
|
|
</div>
|
|
|
|
<!-- 展示内容区域 -->
|
|
<div class="display-content">
|
|
<!-- 3D演示 -->
|
|
<div class="demo-3d active">
|
|
<iframe
|
|
class="core-tech-frame"
|
|
src="https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数联网-可信数据空间.icraft&preview=true"
|
|
frameborder="0"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
|
|
<!-- 架构图 -->
|
|
<div class="arch-image">
|
|
<img src="./assets/images/可信空间技术架构图.png" alt="可信空间技术架构图">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 保持原有的技术标签和内容 -->
|
|
<div class="tech-tabs">
|
|
<div class="tech-tab active">数据沙箱</div>
|
|
<div class="tech-tab">数据抽样</div>
|
|
<div class="tech-tab">数据脱敏</div>
|
|
<div class="tech-tab">多方安全计算</div>
|
|
</div>
|
|
<div class="tech-content">
|
|
<div class="tech-image">
|
|
<img src="./assets/images/core01-Do-49SRi.png" alt="数据沙箱">
|
|
<div class="tech-image-value">
|
|
<h5>技术价值</h5>
|
|
<p>实现数据可用不可见，保障数据在流通过程中的安全可信。</p>
|
|
</div>
|
|
</div>
|
|
<div class="tech-info">
|
|
<div class="tech-value">
|
|
<h5>技术价值</h5>
|
|
|
|
<p>数据沙箱技术是一种安全的数据使用环境，通过构建独立的计算空间，允许数据需求方在不接触原始数据的情况下完成数据分析和计算任务。该技术集成了数据脱敏、访问控制、安全审计等多重保护机制，确保数据在流通和使用过程中的安全性。同时，通过提供标准化的数据服务接口，支持多样化的数据应用场景，实现数据价值的安全释放。</p>
|
|
</div>
|
|
<div class="tech-advantages">
|
|
<h5>技术优势</h5>
|
|
<ul>
|
|
<li>安全性高：采用多层安全防护架构，包括身份认证、权限控制、数据加密等措施，从多个维度保障数据安全</li>
|
|
<li>场景丰富：支持数据分析、机器学习、统计建模等多种计算场景，满足不同行业的数据应用需求</li>
|
|
<li>易于管理：提供完整的管理功能，包括数据接入、权限配置、使用监控、审计追踪等，降低运维管理成本</li>
|
|
<li>性能优异：通过优化的计算引擎和资源调度机制，确保数据处理的高效性，支持大规模数据分析需求</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="application">
|
|
<div class="width1600">
|
|
<div class="public-title">
|
|
<h4>应用场景</h4>
|
|
<p>基于隐私计算的可信数据环境</p>
|
|
</div>
|
|
<div class="application-list">
|
|
<div class="application-item">
|
|
<img src="./assets/images/scen01-Df1_Ba-D.png" alt="供应链金融企业信用评级">
|
|
<h5>供应链金融企业信用评级</h5>
|
|
<p>基于多方数据的企业信用评估模型，助力供应链金融风控。</p>
|
|
<ul class="features">
|
|
<li>多维度数据分析</li>
|
|
<li>实时风险预警</li>
|
|
<li>信用评分模型</li>
|
|
</ul>
|
|
<a href="#" class="btn">立即体验</a>
|
|
</div>
|
|
<div class="application-item">
|
|
<img src="./assets/images/scen02-Db38haXK.png" alt="行业研究数据服务">
|
|
<h5>行业研究数据服务</h5>
|
|
<p>整合多家行业数据，提供深度分析和研究报告服务。</p>
|
|
<ul class="features">
|
|
<li>行业趋势分析</li>
|
|
<li>市场洞察</li>
|
|
<li>竞争情报</li>
|
|
</ul>
|
|
<a href="#" class="btn">了解更多</a>
|
|
</div>
|
|
<div class="application-item">
|
|
<img src="./assets/images/scen03-BMj46DR7.png" alt="工业互联网大模型">
|
|
<h5>工业互联网大模型</h5>
|
|
<p>基于海量工业数据训练的专业大模型，赋能智能制造。</p>
|
|
<ul class="features">
|
|
<li>设备预测性维护</li>
|
|
<li>生产优化</li>
|
|
<li>质量控制</li>
|
|
</ul>
|
|
<a href="#" class="btn">体验演示</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="case-section">
|
|
<div class="width1600">
|
|
<div class="public-title">
|
|
<h4>典型案例</h4>
|
|
<p>多行业数据要素流通实践</p>
|
|
</div>
|
|
<div class="case-tabs">
|
|
<div class="case-tab active">政府案例</div>
|
|
<div class="case-tab">企业案例</div>
|
|
<div class="case-tab">行业案例</div>
|
|
</div>
|
|
<div class="case-content">
|
|
<!-- 政府案例 -->
|
|
<div class="case-item active" data-type="政府案例">
|
|
<div class="case-header">
|
|
<div class="case-content">
|
|
<h5>数据基础设施建设</h5>
|
|
<div class="case-desc">
|
|
在成都市新津区、吉安市遂川县、兰州市高新区等地，在当地投资建设可信数据空间，数据要素运营服务站或域算力中心，为当地数据资产运营提供数字基础设施。
|
|
</div>
|
|
<div class="case-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">2亿元</div>
|
|
<div class="stat-label">基础设施投资</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">500TB</div>
|
|
<div class="stat-label">数据接入量</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">1.8万+</div>
|
|
<div class="stat-label">数据源</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">1000万+</div>
|
|
<div class="stat-label">交易次数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 企业案例 -->
|
|
<div class="case-item" data-type="企业案例">
|
|
<div class="case-header">
|
|
<div class="case-content">
|
|
<h5>企业数据资产运营</h5>
|
|
<div class="case-desc">
|
|
我们已为全国十余家企业提供数据资产服务，覆盖智慧城市、交通、农业等领域。作为专业机构，具备数据确权、审计、评估、治理、运营的全生命周期服务能力，助力企业挖掘数据要素价值。
|
|
</div>
|
|
<div class="case-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">500万+</div>
|
|
<div class="stat-label">资产入表金额</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">5000万+</div>
|
|
<div class="stat-label">资产评估金额</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">100万/年</div>
|
|
<div class="stat-label">数据交易金额</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">数千万</div>
|
|
<div class="stat-label">意向融资额度</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 行业案例 -->
|
|
<div class="case-item" data-type="行业案例">
|
|
<div class="case-header">
|
|
<div class="case-content">
|
|
<h5>行业数据资源运营</h5>
|
|
<div class="case-desc">
|
|
以交通行业为例，我们在珠海市、宜宾市、内江市完成了当地公交公司的公交类数据、智慧停车数据等交通领域的数据资产服务。
|
|
</div>
|
|
<div class="case-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">6.5亿+</div>
|
|
<div class="stat-label">数据总量</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">3000万+</div>
|
|
<div class="stat-label">资产评估额</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">100万+</div>
|
|
<div class="stat-label">年度交易收入</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">3个</div>
|
|
<div class="stat-label">示范城市</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 使用组件化的Footer -->
|
|
<div id="footer"></div>
|
|
|
|
<div class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-close">×</div>
|
|
<iframe class="modal-iframe" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="copy-tooltip">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>密码已复制到剪贴板</span>
|
|
</div>
|
|
|
|
<div class="image-modal">
|
|
<div class="image-modal-close">×</div>
|
|
<img src="" alt="技术架构图">
|
|
</div>
|
|
|
|
<script>
|
|
// 加载Header和Footer组件
|
|
fetch('/components/header/header.html')
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
document.getElementById('header').innerHTML = html;
|
|
// 重新初始化header相关的事件监听
|
|
initHeaderEvents();
|
|
});
|
|
|
|
fetch('/components/footer/footer.html')
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
document.getElementById('footer').innerHTML = html;
|
|
});
|
|
|
|
// Header相关事件初始化函数
|
|
function initHeaderEvents() {
|
|
const docIcon = document.querySelector('.doc-icon');
|
|
const dropdownMenu = document.querySelector('.dropdown-menu');
|
|
const copyButtons = document.querySelectorAll('.copy-btn');
|
|
const tooltip = document.querySelector('.copy-tooltip');
|
|
|
|
if (docIcon && dropdownMenu) {
|
|
docIcon.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
dropdownMenu.classList.toggle('show');
|
|
});
|
|
|
|
document.addEventListener('click', () => {
|
|
dropdownMenu.classList.remove('show');
|
|
});
|
|
|
|
dropdownMenu.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
}
|
|
|
|
if (copyButtons && tooltip) {
|
|
copyButtons.forEach(button => {
|
|
button.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const password = button.dataset.password;
|
|
|
|
navigator.clipboard.writeText(password).then(() => {
|
|
tooltip.classList.remove('hide');
|
|
tooltip.classList.add('show');
|
|
|
|
setTimeout(() => {
|
|
tooltip.classList.remove('show');
|
|
tooltip.classList.add('hide');
|
|
}, 2000);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// 准备所有技术内容
|
|
const techContents = {
|
|
'数据沙箱': {
|
|
image: './assets/images/core01-Do-49SRi.png',
|
|
content: `
|
|
<div class="tech-image">
|
|
<img src="./assets/images/core01-Do-49SRi.png" alt="数据沙箱">
|
|
<div class="tech-image-value">
|
|
<h5>技术价值</h5>
|
|
<p>实现数据可用不可见，保障数据在流通过程中的安全可信。</p>
|
|
</div>
|
|
</div>
|
|
<div class="tech-info">
|
|
<div class="tech-intro">
|
|
<h5>技术简介</h5>
|
|
<p>数据沙箱技术是一种安全的数据使用环境，通过构建独立的计算空间，允许数据需求方在不接触原始数据的情况下完成数据分析和计算任务。该技术集成了数据脱敏、访问控制、安全审计等多重保护机制，确保数据在流通和使用过程中的安全性。同时，通过提供标准化的数据服务接口，支持多样化的数据应用场景，实现数据价值的安全释放。</p>
|
|
</div>
|
|
<div class="tech-advantages">
|
|
<h5>技术优势</h5>
|
|
<ul>
|
|
<li>安全性高：采用多层安全防护架构，包括身份认证、权限控制、数据加密等措施，从多个维度保障数据安全</li>
|
|
<li>场景丰富：支持数据分析、机器学习、统计建模等多种计算场景，满足不同行业的数据应用需求</li>
|
|
<li>易于管理：提供完整的管理功能，包括数据接入、权限配置、使用监控、审计追踪等，降低运维管理成本</li>
|
|
<li>性能优异：通过优化的计算引擎和资源调度机制，确保数据处理的高效性，支持大规模数据分析需求</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`
|
|
},
|
|
'数据抽样': {
|
|
image: './assets/images/core02-DYE3Nswp.png',
|
|
content: `
|
|
<div class="tech-image">
|
|
<img src="./assets/images/core02-DYE3Nswp.png" alt="数据抽样">
|
|
<div class="tech-image-value">
|
|
<h5>技术价值</h5>
|
|
<p>确保数据采样的科学性和代表性，提供高效可靠的数据获取方法。</p>
|
|
</div>
|
|
</div>
|
|
<div class="tech-info">
|
|
<div class="tech-intro">
|
|
<h5>技术简介</h5>
|
|
<p>数据抽样技术是一种从大规模数据集中提取代表性样本的科学方法，通过系统化的抽样策略和质量控制机制，确保抽取的数据样本能够准确反映整体数据特征。该技术融合了统计学原理和计算优化算法，支持多种抽样方法，包括随机抽样、分层抽样、配额抽样等，并通过智能化的参数调优和样本验证，保证抽样结果的可靠性和实用价值。</p>
|
|
</div>
|
|
<div class="tech-advantages">
|
|
<h5>技术优势</h5>
|
|
<ul>
|
|
<li>科学准确：基于严谨的统计学理论，通过多种抽样方法和验证机制，确保样本的代表性和可信度</li>
|
|
<li>灵活高效：支持多种抽样策略，可根据不同场景需求灵活配置抽样参数，显著提升数据获取效率</li>
|
|
<li>成本优化：通过合理的样本量设计和优化算法，在保证数据质量的同时，有效降低数据处理成本</li>
|
|
<li>易于集成：提供标准化的接口和服务，可无缝集成到现有数据处理流程中，支持自动化操作</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`
|
|
},
|
|
'数据脱敏': {
|
|
image: './assets/images/core03--_bSTplJ.png',
|
|
content: `
|
|
<div class="tech-image">
|
|
<img src="./assets/images/core03--_bSTplJ.png" alt="数据脱敏">
|
|
<div class="tech-image-value">
|
|
<h5>技术价值</h5>
|
|
<p>在保护敏感信息的同时保持数据可用性，实现数据安全共享和分析利用。</p>
|
|
</div>
|
|
</div>
|
|
<div class="tech-info">
|
|
<div class="tech-intro">
|
|
<h5>技术简介</h5>
|
|
<p>数据脱敏技术是一种信息安全保护方法，通过对敏感数据进行变形、替换、加密等处理，在确保数据分析价值的同时有效保护隐私信息。该技术包含静态脱敏和动态脱敏两大类，支持字符遮蔽、数据替换、格式保留加密等多种脱敏策略，并通过智能规则引擎实现数据的精准识别和安全转换，广泛应用于金融、医疗、政务等领域的数据安全流通场景。</p>
|
|
</div>
|
|
<div class="tech-advantages">
|
|
<h5>技术优势</h5>
|
|
<ul>
|
|
<li>安全可控：采用多层级脱敏策略，支持字段级、记录级的精细化控制，确保敏感信息得到全面保护</li>
|
|
<li>业务友好：在实现隐私保护的同时保持数据的业务价值，支持多种格式保留脱敏方法，便于后续分析利用</li>
|
|
<li>性能卓越：通过优化的脱敏算法和并行处理机制，支持海量数据的高效处理，满足实时业务需求</li>
|
|
<li>灵活扩展：提供丰富的脱敏规则配置选项，可根据不同场景快速定制脱敏方案，适应各类业务需求</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`
|
|
},
|
|
'多方安全计算': {
|
|
image: './assets/images/core04-CgdtwWqu.png',
|
|
content: `
|
|
<div class="tech-image">
|
|
<img src="./assets/images/core04-CgdtwWqu.png" alt="多方安全计算">
|
|
<div class="tech-image-value">
|
|
<h5>技术价值</h5>
|
|
<p>实现多个参与方在不泄露原始数据的前提下进行联合数据计算和分析。</p>
|
|
</div>
|
|
</div>
|
|
<div class="tech-info">
|
|
<div class="tech-intro">
|
|
<h5>技术简介</h5>
|
|
<p>多方安全计算是一种先进的密码学技术，允许多个数据持有方在保护各自数据隐私的前提下完成联合计算任务。该技术融合了秘密分享、混淆电路、同态加密等密码学方法，通过构建安全的计算协议，确保计算过程中各方只能获得最终结果，无法获取其他参与方的原始数据。广泛应用于跨机构数据分析、联合风控、隐私计算等场景，是数据安全流通的核心支撑技术。</p>
|
|
</div>
|
|
<div class="tech-advantages">
|
|
<h5>技术优势</h5>
|
|
<ul>
|
|
<li>隐私保护：基于严格的密码学协议，确保计算过程中各方数据不出域、不泄露，从根本上解决数据安全问题</li>
|
|
<li>结果可信：采用安全的多方计算协议，保证计算结果的准确性和可验证性，支持公平计算</li>
|
|
<li>场景丰富：支持多种基础运算和高级分析功能，可用于联合建模、统计分析、特征计算等多种业务场景</li>
|
|
<li>可扩展性：支持两方到多方的安全计算场景，并可通过分布式计算提升性能，满足大规模数据计算需求</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
};
|
|
|
|
// 添加点击事件处理
|
|
document.querySelectorAll('.tech-tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// 更新激活状态
|
|
document.querySelector('.tech-tab.active').classList.remove('active');
|
|
this.classList.add('active');
|
|
|
|
// 更新内容
|
|
const content = techContents[this.textContent];
|
|
document.querySelector('.tech-content').innerHTML = content.content;
|
|
});
|
|
});
|
|
|
|
const techUrls = {
|
|
'数据沙箱': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据沙箱.icraft&preview=true',
|
|
'数据抽样': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据抽样.icraft&preview=true',
|
|
'数据脱敏': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据脱敏计算.icraft&preview=true',
|
|
'多方安全计算': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/多方安全计算.icraft&preview=true'
|
|
};
|
|
|
|
// 浮窗相关
|
|
const modal = document.querySelector('.modal-overlay');
|
|
const modalIframe = modal.querySelector('.modal-iframe');
|
|
const closeBtn = modal.querySelector('.modal-close');
|
|
|
|
// 点击图片打开浮窗
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('.tech-image')) {
|
|
const techName = document.querySelector('.tech-tab.active').textContent;
|
|
const url = techUrls[techName];
|
|
if (url) {
|
|
modalIframe.src = url;
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
}
|
|
}
|
|
});
|
|
|
|
// 关闭浮窗
|
|
closeBtn.addEventListener('click', function() {
|
|
modal.style.display = 'none';
|
|
modalIframe.src = ''; // 清空 iframe 内容
|
|
document.body.style.overflow = ''; // 恢复背景滚动
|
|
});
|
|
|
|
// 点击遮罩层关闭浮窗
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal) {
|
|
closeBtn.click();
|
|
}
|
|
});
|
|
|
|
// ESC 键关闭浮窗
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && modal.style.display === 'flex') {
|
|
closeBtn.click();
|
|
}
|
|
});
|
|
|
|
// 案例切换功能
|
|
document.querySelectorAll('.case-tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// 更新标签状态
|
|
document.querySelector('.case-tab.active').classList.remove('active');
|
|
this.classList.add('active');
|
|
|
|
// 更新内容显示
|
|
const type = this.textContent;
|
|
document.querySelectorAll('.case-item').forEach(item => {
|
|
if(item.dataset.type === type) {
|
|
item.style.display = 'block';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// 初始化显示政府案例
|
|
document.querySelectorAll('.case-item').forEach(item => {
|
|
if(item.dataset.type !== '政府案例') {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// 展示类型切换
|
|
const displayTabs = document.querySelectorAll('.display-tab');
|
|
const displayContents = document.querySelectorAll('.display-content > div');
|
|
|
|
displayTabs.forEach((tab, index) => {
|
|
tab.addEventListener('click', () => {
|
|
// 更新标签状态
|
|
document.querySelector('.display-tab.active').classList.remove('active');
|
|
tab.classList.add('active');
|
|
|
|
// 更新内容显示
|
|
document.querySelector('.display-content > div.active').classList.remove('active');
|
|
displayContents[index].classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 图片放大功能
|
|
const archImage = document.querySelector('.arch-image');
|
|
const imageModal = document.querySelector('.image-modal');
|
|
const modalImage = imageModal.querySelector('img');
|
|
const modalClose = imageModal.querySelector('.image-modal-close');
|
|
|
|
archImage.addEventListener('click', () => {
|
|
const imgSrc = archImage.querySelector('img').src;
|
|
modalImage.src = imgSrc;
|
|
imageModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
|
});
|
|
|
|
// 点击关闭按钮关闭
|
|
modalClose.addEventListener('click', () => {
|
|
imageModal.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
});
|
|
|
|
// 点击背景关闭
|
|
imageModal.addEventListener('click', (e) => {
|
|
if (e.target === imageModal) {
|
|
modalClose.click();
|
|
}
|
|
});
|
|
|
|
// ESC键关闭
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && imageModal.classList.contains('show')) {
|
|
modalClose.click();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |