<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>专才智库 - 专家信息展示系统</title> <style> /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', sans-serif; } body { background-color: #f5f7fa; color: #333; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 头部样式 */ header { background: linear-gradient(135deg, #1e3c72, #2a5298); color: white; padding: 20px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .logo { font-size: 24px; font-weight: bold; } /* 搜索区域样式 */ .search-section { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); margin: 30px 0; } .search-box { display: flex; margin-bottom: 20px; } .search-box input { flex: 1; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 16px; } .search-box button { padding: 12px 25px; background-color: #2a5298; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 16px; } .filters { display: flex; flex-wrap: wrap; gap: 15px; } .filter-item { display: flex; align-items: center; } .filter-item label { margin-right: 10px; font-weight: bold; } .filter-item select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; } /* 专家列表样式 */ .experts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-bottom: 40px; } .expert-card { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .expert-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .expert-avatar { width: 100%; height: 200px; object-fit: cover; } .expert-info { padding: 20px; } .expert-name { font-size: 20px; margin-bottom: 5px; color: #2a5298; } .expert-title { color: #666; margin-bottom: 10px; font-size: 14px; } .expert-field { display: inline-block; background-color: #eef2ff; color: #2a5298; padding: 3px 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px; } .expert-research { font-size: 14px; color: #555; line-height: 1.5; } /* 分页样式 */ .pagination { display: flex; justify-content: center; margin: 40px 0; } .pagination button { padding: 8px 15px; margin: 0 5px; background-color: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; } .pagination button.active { background-color: #2a5298; color: white; border-color: #2a5298; } .pagination button:hover:not(.active) { background-color: #f0f0f0; } /* 详细页样式 */ .expert-detail { background-color: white; border-radius: 8px; padding: 30px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05); margin: 30px 0; } .detail-header { display: flex; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; } .detail-avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-right: 30px; } .detail-basic-info h1 { font-size: 28px; margin-bottom: 10px; color: #2a5298; } .detail-title { font-size: 18px; color: #666; margin-bottom: 15px; } .detail-contact { display: flex; flex-wrap: wrap; gap: 15px; } .contact-item { display: flex; align-items: center; font-size: 14px; color: #555; } .contact-item i { margin-right: 5px; color: #2a5298; } .section-title { font-size: 22px; margin: 25px 0 15px; padding-bottom: 10px; border-bottom: 2px solid #eef2ff; color: #2a5298; } .research-area { margin-bottom: 20px; } .research-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .research-tag { background-color: #eef2ff; color: #2a5298; padding: 5px 12px; border-radius: 20px; font-size: 14px; } .achievement-list { list-style-type: none; } .achievement-item { padding: 15px; border-left: 3px solid #2a5298; background-color: #f9faff; margin-bottom: 10px; border-radius: 0 4px 4px 0; } .achievement-year { font-weight: bold; color: #2a5298; margin-bottom: 5px; } .team-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .team-member { text-align: center; padding: 15px; background-color: #f9faff; border-radius: 8px; } .member-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; } .back-button { display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #2a5298; color: white; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; } .back-button:hover { background-color: #1e3c72; } /* 响应式设计 */ @media (max-width: 768px) { .detail-header { flex-direction: column; text-align: center; } .detail-avatar { margin-right: 0; margin-bottom: 20px; } .search-box { flex-direction: column; } .search-box input { border-radius: 4px; margin-bottom: 10px; } .search-box button { border-radius: 4px; } .experts-list { grid-template-columns: 1fr; } } </style> </head> <body> <!-- 头部 --> <header> <div class="container"> <div class="logo">专才智库</div> </div> </header> <!-- 主内容区域 --> <div class="container"> <!-- 首页内容 --> <div id="home-page"> <!-- 搜索区域 --> <section class="search-section"> <div class="search-box"> <input type="text" id="search-input" placeholder="输入专家姓名、研究方向或关键词..."> <button id="search-button">搜索</button> </div> <div class="filters"> <div class="filter-item"> <label for="field-filter">研究领域:</label> <select id="field-filter"> <option value="">全部领域</option> <option value="人工智能">人工智能</option> <option value="生物医学">生物医学</option> <option value="材料科学">材料科学</option> <option value="环境工程">环境工程</option> <option value="信息技术">信息技术</option> </select> </div> <div class="filter-item"> <label for="institution-filter">所属机构:</label> <select id="institution-filter"> <option value="">全部机构</option> <option value="清华大学">清华大学</option> <option value="北京大学">北京大学</option> <option value="中国科学院">中国科学院</option> <option value="浙江大学">浙江大学</option> <option value="上海交通大学">上海交通大学</option> </select> </div> </div> </section> <!-- 专家列表 --> <section id="experts-container"> <div class="experts-list" id="experts-list"> <!-- 专家卡片将通过JavaScript动态生成 --> </div> </section> <!-- 分页控件 --> <div class="pagination" id="pagination"> <!-- 分页按钮将通过JavaScript动态生成 --> </div> </div> <!-- 详细页内容(初始隐藏) --> <div id="detail-page" style="display: none;"> <div class="expert-detail" id="expert-detail"> <!-- 专家详细信息将通过JavaScript动态生成 --> </div> <a href="#" class="back-button" id="back-button">返回专家列表</a> </div> </div> <script> // 模拟专家数据 const expertsData = [ { id: 1, name: "张明华", title: "教授、博士生导师", avatar: "https://randomuser.me/api/portraits/men/32.jpg", field: "人工智能", institution: "清华大学", email: "zhangmh@tsinghua.edu.cn", phone: "010-6278xxxx", research: "主要从事机器学习、计算机视觉和自然语言处理研究。", researchAreas: ["深度学习", "计算机视觉", "自然语言处理", "强化学习"], achievements: [ { year: "2022", content: "在CVPR发表论文《基于Transformer的多模态学习模型》" }, { year: "2021", content: "获得国家自然科学基金重点项目资助" }, { year: "2020", content: "出版专著《深度学习理论与实践》" }, { year: "2019", content: "指导学生获得国际人工智能大赛一等奖" } ], team: [ { name: "李思睿", role: "博士后", avatar: "https://randomuser.me/api/portraits/women/44.jpg" }, { name: "王浩然", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/men/22.jpg" }, { name: "赵雨欣", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/women/33.jpg" }, { name: "刘志强", role: "硕士研究生", avatar: "https://randomuser.me/api/portraits/men/45.jpg" } ] }, { id: 2, name: "李晓芸", title: "研究员、学科带头人", avatar: "https://randomuser.me/api/portraits/women/68.jpg", field: "生物医学", institution: "中国科学院", email: "lixy@cas.cn", phone: "010-8261xxxx", research: "专注于肿瘤免疫治疗和基因编辑技术的研究与应用。", researchAreas: ["肿瘤免疫", "基因编辑", "细胞治疗", "生物信息学"], achievements: [ { year: "2022", content: "在Nature Medicine发表肿瘤免疫治疗突破性研究成果" }, { year: "2021", content: "研发的新型CAR-T技术获得临床试验批准" }, { year: "2020", content: "获得国家科技进步二等奖" }, { year: "2019", content: "建立肿瘤精准免疫治疗平台" } ], team: [ { name: "陈志远", role: "副研究员", avatar: "https://randomuser.me/api/portraits/men/67.jpg" }, { name: "张雅婷", role: "助理研究员", avatar: "https://randomuser.me/api/portraits/women/25.jpg" }, { name: "周文博", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/men/56.jpg" } ] }, // 更多专家数据... { id: 3, name: "王建国", title: "教授、实验室主任", avatar: "https://randomuser.me/api/portraits/men/75.jpg", field: "材料科学", institution: "浙江大学", email: "wangjg@zju.edu.cn", phone: "0571-8795xxxx", research: "主要从事新型功能材料的设计、制备与应用研究。", researchAreas: ["纳米材料", "能源材料", "功能高分子", "材料计算"], achievements: [ { year: "2022", content: "开发出高效锂离子电池新型电极材料" }, { year: "2021", content: "在Advanced Materials发表封面论文" }, { year: "2020", content: "获得浙江省自然科学一等奖" }, { year: "2019", content: "与企业合作实现新材料产业化" } ], team: [ { name: "孙晓梅", role: "副教授", avatar: "https://randomuser.me/api/portraits/women/51.jpg" }, { name: "郑浩然", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/men/33.jpg" }, { name: "吴婷婷", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/women/62.jpg" }, { name: "钱伟", role: "硕士研究生", avatar: "https://randomuser.me/api/portraits/men/28.jpg" } ] }, { id: 4, name: "刘芳", title: "教授、系主任", avatar: "https://randomuser.me/api/portraits/women/26.jpg", field: "环境工程", institution: "北京大学", email: "liuf@pku.edu.cn", phone: "010-6275xxxx", research: "致力于水污染控制与资源化技术的研究与工程应用。", researchAreas: ["水污染控制", "环境微生物", "资源回收", "环境材料"], achievements: [ { year: "2022", content: "开发新型高效废水处理技术并在多个城市应用" }, { year: "2021", content: "在Environmental Science & Technology发表重要研究成果" }, { year: "2020", content: "主持国家重大水专项课题" }, { year: "2019", content: "获得环境保护科学技术一等奖" } ], team: [ { name: "黄志强", role: "副教授", avatar: "https://randomuser.me/api/portraits/men/41.jpg" }, { name: "徐静", role: "博士后", avatar: "https://randomuser.me/api/portraits/women/37.jpg" }, { name: "马超", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/men/29.jpg" } ] }, { id: 5, name: "陈志强", title: "教授、院长", avatar: "https://randomuser.me/api/portraits/men/81.jpg", field: "信息技术", institution: "上海交通大学", email: "chenzq@sjtu.edu.cn", phone: "021-3420xxxx", research: "专注于网络安全、大数据分析和区块链技术研究。", researchAreas: ["网络安全", "大数据", "区块链", "云计算"], achievements: [ { year: "2022", content: "提出新型区块链共识算法,提升交易效率" }, { year: "2021", content: "主持国家重点研发计划项目" }, { year: "2020", content: "在IEEE S&P发表网络安全重要论文" }, { year: "2019", content: "开发的企业级安全系统获得广泛应用" } ], team: [ { name: "杨丽华", role: "副教授", avatar: "https://randomuser.me/api/portraits/women/45.jpg" }, { name: "高伟", role: "讲师", avatar: "https://randomuser.me/api/portraits/men/38.jpg" }, { name: "林小雪", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/women/29.jpg" }, { name: "赵大伟", role: "博士研究生", avatar: "https://randomuser.me/api/portraits/men/31.jpg" } ] } ]; // 分页设置 const itemsPerPage = 6; let currentPage = 1; let filteredExperts = [...expertsData]; // DOM元素 const homePage = document.getElementById('home-page'); const detailPage = document.getElementById('detail-page'); const expertsList = document.getElementById('experts-list'); const pagination = document.getElementById('pagination'); const expertDetail = document.getElementById('expert-detail'); const backButton = document.getElementById('back-button'); const searchInput = document.getElementById('search-input'); const searchButton = document.getElementById('search-button'); const fieldFilter = document.getElementById('field-filter'); const institutionFilter = document.getElementById('institution-filter'); // 初始化页面 function initPage() { renderExperts(); setupPagination(); setupEventListeners(); } // 渲染专家列表 function renderExperts() { expertsList.innerHTML = ''; const startIndex = (currentPage - 1) * itemsPerPage; const endIndex = startIndex + itemsPerPage; const expertsToShow = filteredExperts.slice(startIndex, endIndex); if (expertsToShow.length === 0) { expertsList.innerHTML = '<p style="text-align: center; width: 100%; padding: 40px; color: #666;">未找到符合条件的专家</p>'; return; } expertsToShow.forEach(expert => { const expertCard = document.createElement('div'); expertCard.className = 'expert-card'; expertCard.setAttribute('data-id', expert.id); expertCard.innerHTML = ` <img src="${expert.avatar}" alt="${expert.name}" class="expert-avatar"> <div class="expert-info"> <h3 class="expert-name">${expert.name}</h3> <p class="expert-title">${expert.title} | ${expert.institution}</p> <span class="expert-field">${expert.field}</span> <p class="expert-research">${expert.research}</p> </div> `; expertsList.appendChild(expertCard); }); } // 设置分页 function setupPagination() { const totalPages = Math.ceil(filteredExperts.length / itemsPerPage); pagination.innerHTML = ''; // 上一页按钮 const prevButton = document.createElement('button'); prevButton.textContent = '上一页'; prevButton.disabled = currentPage === 1; prevButton.addEventListener('click', () => { if (currentPage > 1) { currentPage--; renderExperts(); setupPagination(); } }); pagination.appendChild(prevButton); // 页码按钮 for (let i = 1; i <= totalPages; i++) { const pageButton = document.createElement('button'); pageButton.textContent = i; if (i === currentPage) { pageButton.classList.add('active'); } pageButton.addEventListener('click', () => { currentPage = i; renderExperts(); setupPagination(); }); pagination.appendChild(pageButton); } // 下一页按钮 const nextButton = document.createElement('button'); nextButton.textContent = '下一页'; nextButton.disabled = currentPage === totalPages; nextButton.addEventListener('click', () => { if (currentPage < totalPages) { currentPage++; renderExperts(); setupPagination(); } }); pagination.appendChild(nextButton); } // 显示专家详情 function showExpertDetail(expertId) { const expert = expertsData.find(e => e.id === parseInt(expertId)); if (!expert) return; expertDetail.innerHTML = ` <div class="detail-header"> <img src="${expert.avatar}" alt="${expert.name}" class="detail-avatar"> <div class="detail-basic-info"> <h1>${expert.name}</h1> <p class="detail-title">${expert.title} | ${expert.institution}</p> <div class="detail-contact"> <div class="contact-item"><i>📧</i> ${expert.email}</div> <div class="contact-item"><i>📞</i> ${expert.phone}</div> <div class="contact-item"><i>🔬</i> ${expert.field}</div> </div> </div> </div> <h2 class="section-title">研究方向</h2> <div class="research-area"> <p>${expert.research}</p> <div class="research-tags"> ${expert.researchAreas.map(area => `<span class="research-tag">${area}</span>`).join('')} </div> </div> <h2 class="section-title">研究成果</h2> <ul class="achievement-list"> ${expert.achievements.map(achievement => ` <li class="achievement-item"> <div class="achievement-year">${achievement.year}</div> <div>${achievement.content}</div> </li> `).join('')} </ul> <h2 class="section-title">研究团队</h2> <div class="team-members"> ${expert.team.map(member => ` <div class="team-member"> <img src="${member.avatar}" alt="${member.name}" class="member-avatar"> <h3>${member.name}</h3> <p>${member.role}</p> </div> `).join('')} </div> `; homePage.style.display = 'none'; detailPage.style.display = 'block'; } // 返回专家列表 function backToList() { detailPage.style.display = 'none'; homePage.style.display = 'block'; } // 筛选专家 function filterExperts() { const searchTerm = searchInput.value.toLowerCase(); const fieldValue = fieldFilter.value; const institutionValue = institutionFilter.value; filteredExperts = expertsData.filter(expert => { const matchesSearch = !searchTerm || expert.name.toLowerCase().includes(searchTerm) || expert.research.toLowerCase().includes(searchTerm) || expert.researchAreas.some(area => area.toLowerCase().includes(searchTerm)); const matchesField = !fieldValue || expert.field === fieldValue; const matchesInstitution = !institutionValue || expert.institution === institutionValue; return matchesSearch && matchesField && matchesInstitution; }); currentPage = 1; renderExperts(); setupPagination(); } // 设置事件监听器 function setupEventListeners() { // 专家卡片点击事件 expertsList.addEventListener('click', (e) => { const card = e.target.closest('.expert-card'); if (card) { const expertId = card.getAttribute('data-id'); showExpertDetail(expertId); } }); // 返回按钮点击事件 backButton.addEventListener('click', (e) => { e.preventDefault(); backToList(); }); // 搜索按钮点击事件 searchButton.addEventListener('click', filterExperts); // 筛选条件变更事件 fieldFilter.addEventListener('change', filterExperts); institutionFilter.addEventListener('change', filterExperts); // 搜索框回车事件 searchInput.addEventListener('keyup', (e) => { if (e.key === 'Enter') { filterExperts(); } }); } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', initPage); </script> </body> </html>
