修复header和footer的问题
This commit is contained in:
sichan
parent
33d36d4e2b
commit
5c7be7d1f7
@ -11,55 +11,13 @@
|
|||||||
<link href="../../../assets/css/styles.css" rel="stylesheet">
|
<link href="../../../assets/css/styles.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body class="d-flex flex-column min-vh-100">
|
<body class="d-flex flex-column min-vh-100">
|
||||||
<!-- Header -->
|
<!-- 使用组件化的Header -->
|
||||||
<div class="header-wrap">
|
<div id="header"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 主要内容区域 -->
|
<!-- 主要内容区域 -->
|
||||||
<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="row mb-4">
|
||||||
<div class="col-md-8 mx-auto">
|
<div class="col-md-8 mx-auto">
|
||||||
@ -275,13 +233,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- 使用组件化的Footer -->
|
||||||
<div class="footer">
|
<div id="footer"></div>
|
||||||
<div class="width1600">
|
|
||||||
<p>© 2024 国信中健数字科技有限公司</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 复制提示 -->
|
<!-- 复制提示 -->
|
||||||
<div class="copy-tooltip">
|
<div class="copy-tooltip">
|
||||||
@ -291,41 +246,53 @@
|
|||||||
|
|
||||||
<script src="../../../vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
<script src="../../../vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
||||||
<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 docIcon = document.querySelector('.doc-icon');
|
||||||
const dropdownMenu = document.querySelector('.dropdown-menu');
|
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) => {
|
docIcon.addEventListener('click', (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
dropdownMenu.classList.toggle('show');
|
dropdownMenu.classList.toggle('show');
|
||||||
});
|
});
|
||||||
|
|
||||||
// 点击其他地方关闭下拉菜单
|
|
||||||
document.addEventListener('click', () => {
|
document.addEventListener('click', () => {
|
||||||
dropdownMenu.classList.remove('show');
|
dropdownMenu.classList.remove('show');
|
||||||
});
|
});
|
||||||
|
|
||||||
// 防止点击下拉菜单内部时关闭
|
|
||||||
dropdownMenu.addEventListener('click', (e) => {
|
dropdownMenu.addEventListener('click', (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 复制密码功能
|
if (copyButtons && tooltip) {
|
||||||
const copyButtons = document.querySelectorAll('.copy-btn');
|
|
||||||
const tooltip = document.querySelector('.copy-tooltip');
|
|
||||||
|
|
||||||
copyButtons.forEach(button => {
|
copyButtons.forEach(button => {
|
||||||
button.addEventListener('click', (e) => {
|
button.addEventListener('click', (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
const password = button.dataset.password;
|
const password = button.dataset.password;
|
||||||
|
|
||||||
// 复制密码到剪贴板
|
|
||||||
navigator.clipboard.writeText(password).then(() => {
|
navigator.clipboard.writeText(password).then(() => {
|
||||||
// 显示提示
|
|
||||||
tooltip.classList.remove('hide');
|
tooltip.classList.remove('hide');
|
||||||
tooltip.classList.add('show');
|
tooltip.classList.add('show');
|
||||||
|
|
||||||
// 2秒后隐藏提示
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tooltip.classList.remove('show');
|
tooltip.classList.remove('show');
|
||||||
tooltip.classList.add('hide');
|
tooltip.classList.add('hide');
|
||||||
@ -333,6 +300,8 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user