修复header和footer的问题
This commit is contained in:
sichan
parent
33d36d4e2b
commit
5c7be7d1f7
@ -11,277 +11,232 @@
|
||||
<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="row mb-4">
|
||||
<div class="col-md-8 mx-auto">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="搜索数据产品...">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="bi bi-search"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid py-4 flex-grow-1">
|
||||
<div class="container">
|
||||
|
||||
<!-- 分类筛选 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<strong class="me-2">数据分级:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-danger me-2">一级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-warning me-2">二级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-info me-2">三级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-success">普通</a>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<strong class="me-2">行业分类:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">金融</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">医疗</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">制造</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">零售</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">教育</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">交通</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">能源</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">更多</a>
|
||||
</div>
|
||||
<div>
|
||||
<strong class="me-2">数据类型:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">结构化数据</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">非结构化数据</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时数据流</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">API接口</a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<strong class="me-2">更新频率:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每日</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每周</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">每月</a>
|
||||
</div>
|
||||
<!-- 搜索栏 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8 mx-auto">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="搜索数据产品...">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="bi bi-search"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据产品列表 -->
|
||||
<div class="row g-4">
|
||||
<!-- 数据产品卡片 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-primary mb-2">金融数据</span>
|
||||
<h5 class="card-title">企业信用评分数据包</h5>
|
||||
<p class="card-text text-muted">包含100万+企业的多维度信用评分数据，适用于风控建模</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-clock"></i> 更新频率: 每日
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥2000/月</span>
|
||||
<!-- 分类筛选 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<strong class="me-2">数据分级:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-danger me-2">一级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-warning me-2">二级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-info me-2">三级敏感</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-success">普通</a>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据产品卡片 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-success mb-2">医疗数据</span>
|
||||
<h5 class="card-title">医疗器械使用数据API</h5>
|
||||
<p class="card-text text-muted">覆盖全国3000+医院的医疗器械使用情况实时数据接口</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-clock"></i> 更新频率: 实时
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥5000/月</span>
|
||||
<div class="mb-3">
|
||||
<strong class="me-2">行业分类:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">金融</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">医疗</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">制造</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">零售</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">教育</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">交通</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">能源</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">更多</a>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据产品卡片 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-warning mb-2">制造业数据</span>
|
||||
<h5 class="card-title">工业设备运行状态数据</h5>
|
||||
<p class="card-text text-muted">涵盖主要工业设备的运行参数、维护记录等数据集</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-clock"></i> 更新频率: 每小时
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥3000/月</span>
|
||||
<div>
|
||||
<strong class="me-2">数据类型:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">结构化数据</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">非结构化数据</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时数据流</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">API接口</a>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增数据产品卡片 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="badge bg-danger">一级敏感</span>
|
||||
<span class="badge bg-info">医疗数据</span>
|
||||
</div>
|
||||
<h5 class="card-title">医疗影像诊断数据集</h5>
|
||||
<p class="card-text text-muted">包含50万+标注医疗影像数据，适用于AI模型训练</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted me-3">
|
||||
<i class="bi bi-clock"></i> 每日更新
|
||||
</small>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-database"></i> 15TB
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥8000/月</span>
|
||||
<div class="mt-3">
|
||||
<strong class="me-2">更新频率:</strong>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每日</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每周</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">每月</a>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="badge bg-warning">二级敏感</span>
|
||||
<span class="badge bg-primary">交通数据</span>
|
||||
</div>
|
||||
<h5 class="card-title">城市交通流量实时数据</h5>
|
||||
<p class="card-text text-muted">覆盖主要城市路段的实时交通流量、拥堵指数等数据</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted me-3">
|
||||
<i class="bi bi-clock"></i> 实时更新
|
||||
</small>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-database"></i> 500GB/天
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥6000/月</span>
|
||||
<!-- 数据产品列表 -->
|
||||
<div class="row g-4">
|
||||
<!-- 数据产品卡片 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-primary mb-2">金融数据</span>
|
||||
<h5 class="card-title">企业信用评分数据包</h5>
|
||||
<p class="card-text text-muted">包含100万+企业的多维度信用评分数据，适用于风控建模</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-clock"></i> 更新频率: 每日
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥2000/月</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据产品卡片 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-success mb-2">医疗数据</span>
|
||||
<h5 class="card-title">医疗器械使用数据API</h5>
|
||||
<p class="card-text text-muted">覆盖全国3000+医院的医疗器械使用情况实时数据接口</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-clock"></i> 更新频率: 实时
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥5000/月</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据产品卡片 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-warning mb-2">制造业数据</span>
|
||||
<h5 class="card-title">工业设备运行状态数据</h5>
|
||||
<p class="card-text text-muted">涵盖主要工业设备的运行参数、维护记录等数据集</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-clock"></i> 更新频率: 每小时
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥3000/月</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增数据产品卡片 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="badge bg-danger">一级敏感</span>
|
||||
<span class="badge bg-info">医疗数据</span>
|
||||
</div>
|
||||
<h5 class="card-title">医疗影像诊断数据集</h5>
|
||||
<p class="card-text text-muted">包含50万+标注医疗影像数据，适用于AI模型训练</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted me-3">
|
||||
<i class="bi bi-clock"></i> 每日更新
|
||||
</small>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-database"></i> 15TB
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥8000/月</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="badge bg-warning">二级敏感</span>
|
||||
<span class="badge bg-primary">交通数据</span>
|
||||
</div>
|
||||
<h5 class="card-title">城市交通流量实时数据</h5>
|
||||
<p class="card-text text-muted">覆盖主要城市路段的实时交通流量、拥堵指数等数据</p>
|
||||
<div class="mb-3">
|
||||
<small class="text-muted me-3">
|
||||
<i class="bi bi-clock"></i> 实时更新
|
||||
</small>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-database"></i> 500GB/天
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="text-primary fw-bold">
|
||||
<i class="bi bi-coin"></i>
|
||||
<span>￥6000/月</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-cart-plus"></i> 购买授权
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多数据产品卡片 -->
|
||||
<!-- ... -->
|
||||
</div>
|
||||
|
||||
<!-- 更多数据产品卡片 -->
|
||||
<!-- ... -->
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">上一页</a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">下一页</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- 分页 -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">上一页</a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">下一页</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</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,48 +246,62 @@
|
||||
|
||||
<script src="../../../vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// 添加文档下拉菜单交互
|
||||
const docIcon = document.querySelector('.doc-icon');
|
||||
const dropdownMenu = document.querySelector('.dropdown-menu');
|
||||
|
||||
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');
|
||||
|
||||
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');
|
||||
}, 2000);
|
||||
});
|
||||
// 加载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);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user