<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f0f7fc;
color: #333;
line-height: 1.6;
}
/* 头部导航 */
.header {
background: linear-gradient(135deg, #1a5c9c 0%, #0d3c61 100%);
color: white;
padding: 0.8rem 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.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;
}
.logo i {
margin-right: 10px;
color: #4fc3f7;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 5px;
}
.nav-links a:hover, .nav-links a.active {
background-color: rgba(255,255,255,0.15);
}
.user-actions {
display: flex;
align-items: center;
}
.search-box {
display: flex;
background: rgba(255,255,255,0.2);
border-radius: 30px;
padding: 0.4rem 1rem;
margin-right: 1.5rem;
}
.search-box input {
background: transparent;
border: none;
color: white;
outline: none;
width: 180px;
}
.search-box input::placeholder {
color: rgba(255,255,255,0.7);
}
.btn {
background-color: #26c6da;
color: white;
border: none;
padding: 0.5rem 1.2rem;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #00acc1;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* 主要内容区域 */
.main-content {
max-width: 1400px;
margin: 2rem auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
}
/* 侧边栏 */
.sidebar {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
padding: 1.5rem;
height: fit-content;
}
.sidebar-section {
margin-bottom: 2rem;
}
.sidebar h3 {
color: #1a5c9c;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e0f7fa;
font-size: 1.2rem;
}
.sidebar-links {
list-style: none;
}
.sidebar-links li {
margin-bottom: 0.8rem;
}
.sidebar-links a {
display: flex;
align-items: center;
color: #333;
text-decoration: none;
padding: 0.6rem;
border-radius: 5px;
transition: all 0.3s;
}
.sidebar-links a:hover {
background-color: #e0f7fa;
}
.sidebar-links i {
margin-right: 10px;
color: #26c6da;
width: 20px;
text-align: center;
}
/* 状态卡片 */
.status-cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem 0 2rem;
}
.status-card {
background: white;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
padding: 1.2rem;
flex: 1;
min-width: 150px;
text-align: center;
transition: all 0.3s;
border-top: 4px solid #4fc3f7;
}
.status-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.status-card h4 {
color: #1a5c9c;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.status-card .count {
font-size: 2rem;
font-weight: 700;
color: #0d3c61;
}
.status-card.urgent {
border-top-color: #ff6b6b;
}
.status-card.completed {
border-top-color: #4cd97b;
}
.status-card.latest {
border-top-color: #ffd166;
}
/* 功能区 */
.dashboard {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
padding: 1.5rem;
transition: all 0.3s;
}
.card:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid #e8f4f8;
}
.card-header h3 {
color: #1a5c9c;
}
.card-header a {
color: #26c6da;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
}
.card-content ul {
list-style: none;
}
.card-content li {
padding: 0.8rem 0;
border-bottom: 1px solid #f0f7fc;
display: flex;
align-items: center;
}
.card-content li:last-child {
border-bottom: none;
}
.card-content .badge {
display: inline-block;
background-color: #e0f7fa;
color: #26c6da;
border-radius: 30px;
padding: 0.2rem 0.8rem;
font-size: 0.8rem;
margin-right: 0.8rem;
}
.card-content .urgent-badge {
background-color: #ffebee;
color: #ff6b6b;
}
.news-list li {
padding: 1rem 0;
}
.news-list .date {
color: #78909c;
font-size: 0.85rem;
margin-top: 0.3rem;
display: block;
}
.grid-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.grid-btn {
background: #e0f7fa;
color: #00838f;
border: none;
border-radius: 8px;
padding: 1.5rem 0.5rem;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.grid-btn i {
font-size: 2rem;
margin-bottom: 0.8rem;
color: #1a5c9c;
}
.grid-btn:hover {
background: #b2ebf2;
transform: translateY(-3px);
}
/* 横幅公告 */
.banner {
background: linear-gradient(to right, #1a5c9c, #26c6da);
color: white;
padding: 2rem;
border-radius: 10px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 5px 15px rgba(26, 92, 156, 0.3);
}
.banner h2 {
margin-bottom: 1rem;
font-size: 2rem;
}
.banner p {
max-width: 800px;
margin: 0 auto 1.5rem;
font-size: 1.1rem;
}
/* 页脚 */
.footer {
background: #0d3c61;
color: white;
padding: 3rem 2rem 1.5rem;
margin-top: 3rem;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2rem;
}
.footer-logo {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1rem;
}
.footer-description {
color: #b2ebf2;
margin-bottom: 1.5rem;
line-height: 1.8;
}
.footer-links h4 {
margin-bottom: 1.5rem;
font-size: 1.2rem;
position: relative;
}
.footer-links h4::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: #26c6da;
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: #b2ebf2;
text-decoration: none;
transition: all 0.3s;
}
.footer-links a:hover {
color: white;
margin-left: 5px;
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(178, 235, 242, 0.2);
color: #b2ebf2;
font-size: 0.9rem;
}
/* 响应式调整 */
@media (max-width: 1000px) {
.main-content {
grid-template-columns: 1fr;
}
.dashboard {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.status-cards {
flex-direction: column;
}
.grid-buttons {
grid-template-columns: repeat(2, 1fr);
}
.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="#" class="active">首页</a></li>
<li><a href="#">最新通知</a></li>
<li><a href="#">在线办理</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">服务与支持</a></li>
<li><a href="#">知识库</a></li>
</ul>
<div class="user-actions">
<div class="search-box">
<input type="text" placeholder="搜索服务或内容...">
<i class="fas fa-search"></i>
</div>
<button class="btn">
<i class="fas fa-user"></i> 用户登录
</button>
</div>
</div>
</header>
<div class="main-content">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="sidebar-section">
<h3><i class="fas fa-user-circle"></i> 用户中心</h3>
<ul class="sidebar-links">
<li><a href="#"><i class="fas fa-tasks"></i> 个人任务列表</a></li>
<li><a href="#"><i class="fas fa-file-alt"></i> 我的申请记录</a></li>
<li><a href="#"><i class="fas fa-project-diagram"></i> 我参与的项目</a></li>
<li><a href="#"><i class="fas fa-file-download"></i> 我的下载文档</a></li>
<li><a href="#"><i class="fas fa-cog"></i> 账户设置</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3><i class="fas fa-bolt"></i> 快速入口</h3>
<ul class="sidebar-links">
<li><a href="#"><i class="fas fa-plus-circle"></i> 项目立项申请</a></li>
<li><a href="#"><i class="fas fa-file-contract"></i> 协议在线签订</a></li>
<li><a href="#"><i class="fas fa-vial"></i> 测试数据录入</a></li>
<li><a href="#"><i class="fas fa-chart-bar"></i> 评价结果生成</a></li>
<li><a href="#"><i class="fas fa-book"></i> 评价报告生成</a></li>
<li><a href="#"><i class="fas fa-headset"></i> 专家支持申请</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3><i class="fas fa-book"></i> 知识库</h3>
<ul class="sidebar-links">
<li><a href="#"><i class="fas fa-balance-scale"></i> 评价标准规范</a></li>
<li><a href="#"><i class="fas fa-cogs"></i> 设备操作指南</a></li>
<li><a href="#"><i class="fas fa-file-pdf"></i> 白皮书下载</a></li>
<li><a href="#"><i class="fas fa-database"></i> 历史项目数据</a></li>
<li><a href="#"><i class="fas fa-graduation-cap"></i> 培训资料库</a></li>
</ul>
</div>
</aside>
<!-- 主内容区域 -->
<main>
<!-- 横幅公告 -->
<section class="banner">
<h2>科学仪器评价综合服务平台</h2>
<p>汇集国家级标准数据、提供一站式仪器评测服务，助力科研创新与成果转化</p>
<button class="btn" style="background-color: white; color: #1a5c9c;">
查看项目示例 <i class="fas fa-arrow-right"></i>
</button>
</section>
<!-- 状态卡片 -->
<div class="status-cards">
<div class="status-card">
<h4>待办任务</h4>
<div class="count">8</div>
</div>
<div class="status-card urgent">
<h4>紧急任务</h4>
<div class="count">3</div>
</div>
<div class="status-card completed">
<h4>已完成项目</h4>
<div class="count">24</div>
</div>
<div class="status-card latest">
<h4>新通知</h4>
<div class="count">5</div>
</div>
</div>
<!-- 功能区域 -->
<div class="dashboard">
<!-- 项目公告 -->
<div class="card">
<div class="card-header">
<h3><i class="fas fa-bullhorn"></i> 项目公告</h3>
<a href="#">查看更多 <i class="fas fa-chevron-right"></i></a>
</div>
<div class="card-content">
<ul class="news-list">
<li>
<strong>2023年第四期仪器评测项目征集通知</strong>
<span class="date">2023-10-15</span>
</li>
<li>
<strong>光谱分析仪器评测标准升级公告</strong>
<span class="date">2023-10-10</span>
</li>
<li>
<strong>实验室设备评价结果集中公示</strong>
<span class="date">2023-10-05</span>
</li>
<li>
<strong>2023年度评测专家库名单公布</strong>
<span class="date">2023-09-28</span>
</li>
</ul>
</div>
</div>
<!-- 待办任务 -->
<div class="card">
<div class="card-header">
<h3><i class="fas fa-tasks"></i> 我的待办任务</h3>
<a href="#">全部任务 <i class="fas fa-chevron-right"></i></a>
</div>
<div class="card-content">
<ul>
<li>
<span class="badge urgent-badge">紧急</span>
提交XYZ光谱仪测试数据
</li>
<li>
<span class="badge">协议</span>
签订ABC设备评价协议
</li>
<li>
<span class="badge">审批</span>
审核项目2023-108设计方案
</li>
<li>
<span class="badge">测试</span>
完成PQR设备验证测试
</li>
</ul>
</div>
</div>
<!-- 项目统计 -->
<div class="card">
<div class="card-header">
<h3><i class="fas fa-chart-line"></i> 项目统计</h3>
<a href="#">详细数据 <i class="fas fa-chevron-right"></i></a>
</div>
<div class="card-content">
<p>当前进行中项目：<strong>16个</strong></p>
<p>本月新增项目：<strong>8个</strong></p>
<p>完成率：<strong>85%</strong></p>
<p>专家参与数：<strong>42位</strong></p>
</div>
</div>
<!-- 在线办理 -->
<div class="card">
<div class="card-header">
<h3><i class="fas fa-laptop"></i> 在线办理</h3>
</div>
<div class="card-content">
<div class="grid-buttons">
<div class="grid-btn">
<i class="fas fa-file-import"></i>
<div>项目立项</div>
</div>
<div class="grid-btn">
<i class="fas fa-user-friends"></i>
<div>专家组分配</div>
</div>
<div class="grid-btn">
<i class="fas fa-file-contract"></i>
<div>协议签订</div>
</div>
<div class="grid-btn">
<i class="fas fa-vial"></i>
<div>测试数据录入</div>
</div>
<div class="grid-btn">
<i class="fas fa-chart-pie"></i>
<div>评价结果生成</div>
</div>
<div class="grid-btn">
<i class="fas fa-certificate"></i>
<div>报告证书生成</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-content">
<div class="footer-about">
<div class="footer-logo">
<i class="fas fa-microscope"></i> 仪器评价门户平台
</div>
<p class="footer-description">
提供科学仪器评价综合服务，集项目发布、申请、测试、报告生成于一体，
支持政府部门、研究机构、仪器厂商及第三方使用方开展仪器设备评价工作。
</p>
<button class="btn">联系我们</button>
</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>
<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>
<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>
<li><a href="#">评价白皮书</a></li>
</ul>
</div>
</div>
<div class="copyright">
© 2023 仪器评价门户平台 版权所有 | 国家科学仪器评价中心技术支持
</div>
</footer>
<script>
// 简单的状态更新效果
document.addEventListener('DOMContentLoaded', function() {
const statusCards = document.querySelectorAll('.status-card');
statusCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
// 切换导航活跃状态
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
navLinks.forEach(item => item.classList.remove('active'));
this.classList.add('active');
});
});
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html