<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息查询 - 仪器评价门户平台</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #165DFF;
--primary-light: #E8F3FF;
--secondary: #36CBCB;
--dark: #0D3C61;
--light: #F0F7FC;
--gray: #86909C;
--gray-light: #F2F3F5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
body {
background-color: var(--light);
color: #333;
line-height: 1.6;
}
/* 头部导航 */
.header {
background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
color: white;
padding: 1rem 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
font-size: 1.8rem;
font-weight: 700;
gap: 0.8rem;
}
.logo i {
color: var(--secondary);
font-size: 1.5rem;
}
.nav-links {
display: flex;
list-style: none;
gap: 1.5rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
}
.nav-links a.active {
color: var(--secondary);
}
.user-actions {
display: flex;
align-items: center;
gap: 1.5rem;
}
.btn {
background-color: var(--primary);
color: white;
border: none;
padding: 0.6rem 1.5rem;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
}
/* 主要内容区域 */
.main-content {
max-width: 1400px;
margin: 2rem auto;
padding: 0 2rem;
display: flex;
gap: 2rem;
}
/* 左侧分类树 */
.category-tree {
width: 280px;
background: white;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
padding: 1.5rem;
}
.category-tree h2 {
color: var(--dark);
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--gray-light);
}
.tree-list {
list-style: none;
}
.tree-item {
margin-bottom: 0.5rem;
}
.tree-item > .tree-link {
display: flex;
align-items: center;
padding: 0.8rem 1rem;
color: var(--dark);
text-decoration: none;
border-radius: 6px;
transition: all 0.3s;
}
.tree-item > .tree-link:hover,
.tree-item.active > .tree-link {
background-color: var(--primary-light);
color: var(--primary);
}
.tree-item > .tree-link i {
margin-right: 0.8rem;
width: 20px;
text-align: center;
}
.tree-item > .tree-link .tree-arrow {
margin-left: auto;
transition: transform 0.3s;
}
.tree-item.active > .tree-link .tree-arrow {
transform: rotate(90deg);
}
.sub-tree {
list-style: none;
padding-left: 1.5rem;
margin-top: 0.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
}
.tree-item.active > .sub-tree {
max-height: 500px;
}
.sub-tree .tree-link {
display: flex;
align-items: center;
padding: 0.6rem 1rem;
color: var(--gray);
text-decoration: none;
border-radius: 6px;
transition: all 0.3s;
}
.sub-tree .tree-link:hover,
.sub-tree .tree-link.active {
color: var(--primary);
background-color: rgba(22, 93, 255, 0.1);
}
.sub-tree .tree-link i {
margin-right: 0.8rem;
width: 20px;
text-align: center;
font-size: 0.8rem;
}
/* 右侧内容区域 */
.content-area {
flex: 1;
background: white;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
padding: 1.5rem;
}
.content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.content-header h2 {
color: var(--dark);
display: flex;
align-items: center;
gap: 0.5rem;
}
/* 搜索区域 */
.search-box {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
background: var(--gray-light);
padding: 1rem;
border-radius: 8px;
}
.search-input {
flex: 1;
padding: 0.8rem 1rem;
border: 1px solid var(--gray-light);
border-radius: 6px;
font-size: 1rem;
}
.btn-search {
background-color: var(--primary);
color: white;
border: none;
padding: 0 1.5rem;
border-radius: 6px;
cursor: pointer;
}
/* 列表样式 */
.data-list {
list-style: none;
}
.data-item {
padding: 1rem;
border-bottom: 1px solid var(--gray-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.data-item:last-child {
border-bottom: none;
}
.data-title {
font-weight: 500;
color: var(--dark);
}
.data-meta {
display: flex;
gap: 1.5rem;
}
.data-meta span {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
color: var(--gray);
}
.data-meta i {
color: var(--primary);
}
.btn-detail {
background-color: var(--primary);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
}
/* 表格样式 */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
text-align: left;
padding: 0.8rem 1rem;
background-color: var(--primary-light);
color: var(--dark);
font-weight: 600;
}
.data-table td {
padding: 1rem;
border-bottom: 1px solid var(--gray-light);
vertical-align: middle;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover {
background-color: var(--gray-light);
}
/* 页脚 */
.footer {
background: var(--dark);
color: white;
padding: 3rem 0;
width: 100%;
margin-top: 2rem;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.footer-logo {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.footer-logo i {
color: var(--secondary);
}
.footer-description {
color: #B2E8FF;
line-height: 1.8;
margin-bottom: 1.5rem;
}
.footer-links h4 {
margin-bottom: 1.5rem;
font-size: 1.2rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-links h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: var(--secondary);
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: #B2E8FF;
text-decoration: none;
transition: all 0.3s;
display: inline-block;
}
.footer-links a:hover {
color: white;
padding-left: 5px;
}
.copyright {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(178, 232, 255, 0.1);
color: #B2E8FF;
font-size: 0.9rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
.category-tree {
width: 100%;
}
.footer-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<header class="header">
<div class="nav-container">
<div class="logo">
<i class="fas fa-microscope"></i>
<span>仪器评价门户平台</span>
</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">最新通知</a></li>
<li><a href="#">在线办理</a></li>
<li><a href="#" class="active">信息查询</a></li>
<li><a href="#">在线咨询</a></li>
</ul>
<div class="user-actions">
<button class="btn">
<i class="fas fa-robot"></i> AI助手
</button>
<button class="btn">
<i class="fas fa-sign-in-alt"></i> 立即登录
</button>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 左侧分类树 -->
<div class="category-tree">
<h2>信息分类</h2>
<ul class="tree-list">
<li class="tree-item active">
<a href="#" class="tree-link">
<i class="fas fa-clipboard-check"></i>
<span>已完成评价</span>
<i class="fas fa-chevron-right tree-arrow"></i>
</a>
<ul class="sub-tree">
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 2023年评价</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 2022年评价</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 历史评价</a></li>
</ul>
</li>
<li class="tree-item">
<a href="#" class="tree-link">
<i class="fas fa-chart-bar"></i>
<span>项目统计</span>
<i class="fas fa-chevron-right tree-arrow"></i>
</a>
<ul class="sub-tree">
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 年度统计</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 分类统计</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 趋势分析</a></li>
</ul>
</li>
<li class="tree-item">
<a href="#" class="tree-link">
<i class="fas fa-industry"></i>
<span>仪器厂商</span>
<i class="fas fa-chevron-right tree-arrow"></i>
</a>
<ul class="sub-tree">
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 国内厂商</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 国际厂商</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 厂商评价</a></li>
</ul>
</li>
<li class="tree-item">
<a href="#" class="tree-link">
<i class="fas fa-book"></i>
<span>评价能力库</span>
<i class="fas fa-chevron-right tree-arrow"></i>
</a>
<ul class="sub-tree">
<li><a href="#" class="tree-link active"><i class="fas fa-circle"></i> 标准库</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 评价规则</a></li>
<li><a href="#" class="tree-link"><i class="fas fa-circle"></i> 评价指标</a></li>
</ul>
</li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="content-area">
<div class="content-header">
<h2><i class="fas fa-book"></i> 标准库</h2>
<div class="view-all">共 128 条记录</div>
</div>
<!-- 搜索区域 -->
<div class="search-box">
<input type="text" class="search-input" placeholder="输入标准名称、编号或关键词...">
<button class="btn-search"><i class="fas fa-search"></i> 搜索</button>
</div>
<!-- 列表区域 - 表格形式 -->
<table class="data-table">
<thead>
<tr>
<th>标准名称</th>
<th>标准编号</th>
<th>适用仪器</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>光谱分析仪器通用技术条件</td>
<td>GB/T 32267-2015</td>
<td>光谱分析仪</td>
<td><button class="btn-detail">查看详情</button></td>
</tr>
<tr>
<td>实验室离心机性能测试方法</td>
<td>GB/T 30099-2013</td>
<td>离心机</td>
<td><button class="btn-detail">查看详情</button></td>
</tr>
<tr>
<td>电子天平检定规程</td>
<td>JJG 1036-2008</td>
<td>电子天平</td>
<td><button class="btn-detail">查看详情</button></td>
</tr>
<tr>
<td>pH计检定规程</td>
<td>JJG 119-2018</td>
<td>pH计</td>
<td><button class="btn-detail">查看详情</button></td>
</tr>
<tr>
<td>紫外可见分光光度计检定规程</td>
<td>JJG 178-2007</td>
<td>分光光度计</td>
<td><button class="btn-detail">查看详情</button></td>
</tr>
</tbody>
</table>
<!-- 分页控件 -->
<div style="margin-top: 2rem; text-align: center;">
<button class="btn" style="margin-right: 1rem;">上一页</button>
<span style="margin: 0 1rem;">1/16</span>
<button class="btn">下一页</button>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-container">
<div class="footer-content">
<div class="footer-section">
<div class="footer-logo">
<i class="fas fa-microscope"></i>
<span>仪器评价门户平台</span>
</div>
<p class="footer-description">
专业提供科学仪器综合评价服务，助力科研机构和企业提升仪器使用效率和质量。
</p>
</div>
<div class="footer-links">
<h4>快速链接</h4>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">评价流程</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="footer-links">
<h4>服务支持</h4>
<ul>
<li><a href="#">仪器申请</a></li>
<li><a href="#">评价标准</a></li>
<li><a href="#">专家团队</a></li>
<li><a href="#">下载中心</a></li>
</ul>
</div>
<div class="footer-links">
<h4>联系方式</h4>
<ul>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li><a href="tel:400-888-8888">400-888-8888</a></li>
<li>北京市海淀区中关村南大街5号</li>
</ul>
</div>
</div>
<div class="copyright">
© 2023 仪器评价门户平台. 保留所有权利.
</div>
</div>
</footer>
<script>
// 分类树交互功能
const treeItems = document.querySelectorAll('.tree-item > .tree-link');
treeItems.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
const parentItem = this.parentElement;
// 切换当前项的展开状态
parentItem.classList.toggle('active');
// 关闭其他展开的项
document.querySelectorAll('.tree-item').forEach(item => {
if (item !== parentItem) {
item.classList.remove('active');
}
});
});
});
// 子分类点击
const subTreeLinks = document.querySelectorAll('.sub-tree .tree-link');
subTreeLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
subTreeLinks.forEach(l => l.classList.remove('active'));
this.classList.add('active');
// 这里可以加载对应的内容
console.log('加载分类数据:', this.textContent.trim());
});
});
// 搜索功能
const searchBtn = document.querySelector('.btn-search');
searchBtn.addEventListener('click', function() {
const keyword = document.querySelector('.search-input').value;
alert('搜索: ' + keyword);
// 实际应用中这里应该是AJAX请求
});
// 详情按钮
const detailBtns = document.querySelectorAll('.btn-detail');
detailBtns.forEach(btn => {
btn.addEventListener('click', function() {
alert('查看详情功能即将开放！');
});
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html