取消了header和footer组件
This commit is contained in:
sichan
parent
5c7be7d1f7
commit
1eb2ab796f
131
index.html
131
index.html
@ -8,8 +8,52 @@
|
||||
<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>
|
||||
<!-- 替换组件化的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/GX-Logo.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="banner-wrap">
|
||||
<div class="s-flex ai-ct" style="height:100%">
|
||||
@ -270,8 +314,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用组件化的Footer -->
|
||||
<div id="footer"></div>
|
||||
<!-- 替换组件化的Footer -->
|
||||
<div class="footer">
|
||||
<div class="width1600">
|
||||
<p>© 2024 国信中健数字科技有限公司</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
@ -291,61 +339,44 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 加载Header和Footer组件
|
||||
fetch('/components/header/header.html')
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
document.getElementById('header').innerHTML = html;
|
||||
// 重新初始化header相关的事件监听
|
||||
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');
|
||||
});
|
||||
|
||||
fetch('/components/footer/footer.html')
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
document.getElementById('footer').innerHTML = html;
|
||||
document.addEventListener('click', () => {
|
||||
dropdownMenu.classList.remove('show');
|
||||
});
|
||||
|
||||
// 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');
|
||||
dropdownMenu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
if (docIcon && dropdownMenu) {
|
||||
docIcon.addEventListener('click', (e) => {
|
||||
if (copyButtons && tooltip) {
|
||||
copyButtons.forEach(button => {
|
||||
button.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;
|
||||
const password = button.dataset.password;
|
||||
|
||||
navigator.clipboard.writeText(password).then(() => {
|
||||
tooltip.classList.remove('hide');
|
||||
tooltip.classList.add('show');
|
||||
|
||||
navigator.clipboard.writeText(password).then(() => {
|
||||
tooltip.classList.remove('hide');
|
||||
tooltip.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
tooltip.classList.remove('show');
|
||||
tooltip.classList.add('hide');
|
||||
}, 2000);
|
||||
});
|
||||
setTimeout(() => {
|
||||
tooltip.classList.remove('show');
|
||||
tooltip.classList.add('hide');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 准备所有技术内容
|
||||
|
||||
@ -11,8 +11,52 @@
|
||||
<link href="../../../assets/css/styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<!-- 使用组件化的Header -->
|
||||
<div id="header"></div>
|
||||
<!-- 替换组件化的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/GX-Logo.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-fluid py-4 flex-grow-1">
|
||||
@ -235,8 +279,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用组件化的Footer -->
|
||||
<div id="footer"></div>
|
||||
<!-- 替换组件化的Footer -->
|
||||
<div class="footer">
|
||||
<div class="width1600">
|
||||
<p>© 2024 国信中健数字科技有限公司</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复制提示 -->
|
||||
<div class="copy-tooltip">
|
||||
@ -246,61 +294,44 @@
|
||||
|
||||
<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();
|
||||
// 直接添加事件监听代码
|
||||
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');
|
||||
});
|
||||
|
||||
fetch('/components/footer/footer.html')
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
document.getElementById('footer').innerHTML = html;
|
||||
document.addEventListener('click', () => {
|
||||
dropdownMenu.classList.remove('show');
|
||||
});
|
||||
|
||||
// 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');
|
||||
dropdownMenu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
if (docIcon && dropdownMenu) {
|
||||
docIcon.addEventListener('click', (e) => {
|
||||
if (copyButtons && tooltip) {
|
||||
copyButtons.forEach(button => {
|
||||
button.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;
|
||||
const password = button.dataset.password;
|
||||
|
||||
navigator.clipboard.writeText(password).then(() => {
|
||||
tooltip.classList.remove('hide');
|
||||
tooltip.classList.add('show');
|
||||
|
||||
navigator.clipboard.writeText(password).then(() => {
|
||||
tooltip.classList.remove('hide');
|
||||
tooltip.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
tooltip.classList.remove('show');
|
||||
tooltip.classList.add('hide');
|
||||
}, 2000);
|
||||
});
|
||||
setTimeout(() => {
|
||||
tooltip.classList.remove('show');
|
||||
tooltip.classList.add('hide');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user