Public/TrustDataSpace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复header和footer的问题

Browse Source
This commit is contained in:
sichan 2025-01-20 14:48:41 +08:00
parent 33d36d4e2b
commit 5c7be7d1f7
1 changed files with 255 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
pages/mods/mod4-ops/data-market.html
View File

@ -11,55 +11,13 @@
<link href="../../../assets/css/styles.css" rel="stylesheet">
</head>
<body class="d-flex flex-column min-vh-100">
<!-- Header -->
<div class="header-wrap">
<div class="header-inner width1600">
<a href="/" style="text-decoration:none;">
<div class="s-flex ai-ct">
<img src="../../../assets/images/logo-new-BAvcg2T4.png" alt="logo" style="height:60px;width:auto;margin-right:8px;">
<span style="font-size:25px;font-weight:bold;">可信数据空间</span>
</div>
</a>
<div class="doc-dropdown">
<div class="doc-icon">
<i class="fas fa-book"></i>
<span>文档资料</span>
</div>
<div class="dropdown-menu">
<div class="doc-item">
<a href="https://ona6vkv8mv.feishu.cn/docx/MTdAdHydmoQtqpxaDwDcwVDXnRf" target="_blank" class="doc-link">
可信数据空间管理员手册
</a>
<button class="copy-btn" data-password="1#838S83">
<i class="far fa-copy"></i>
复制密码
</button>
</div>
<div class="doc-item">
<a href="https://ona6vkv8mv.feishu.cn/docx/RSAgdKxcoolO0IxPGnMcKn2Bn2b" target="_blank" class="doc-link">
数据管理员使用手册
</a>
<button class="copy-btn" data-password="88135K&1">
<i class="far fa-copy"></i>
复制密码
</button>
</div>
<div class="doc-item">
<a href="https://ona6vkv8mv.feishu.cn/docx/Og9YdjCpMoECevxxH7KczFQNn2g" target="_blank" class="doc-link">
产品手册
</a>
<button class="copy-btn" data-password="H1#65257">
<i class="far fa-copy"></i>
复制密码
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 使用组件化的Header -->
<div id="header"></div>
<!-- 主要内容区域 -->
<div class="container my-5 flex-grow-1">
<div class="container-fluid py-4 flex-grow-1">
<div class="container">
<!-- 搜索栏 -->
<div class="row mb-4">
<div class="col-md-8 mx-auto">
@ -275,13 +233,10 @@
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="width1600">
<p>© 2024 国信中健数字科技有限公司</p>
</div>
</div>
<!-- 使用组件化的Footer -->
<div id="footer"></div>
<!-- 复制提示 -->
<div class="copy-tooltip">
@ -291,41 +246,53 @@
<script src="../../../vendor/bootstrap/bootstrap.bundle.min.js"></script>
<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();
});
}
// 复制密码功能
const copyButtons = document.querySelectorAll('.copy-btn');
const tooltip = document.querySelector('.copy-tooltip');
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');
// 2秒后隐藏提示
setTimeout(() => {
tooltip.classList.remove('show');
tooltip.classList.add('hide');
@ -333,6 +300,8 @@
});
});
});
}
}
</script>
</body>
</html>