| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>智研汇 · 科技知识平台</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#2563eb', |
| secondary: '#4b5563', |
| accent: '#1d4ed8', |
| light: '#f8fafc', |
| dark: '#1e293b' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans SC', sans-serif; |
| background: linear-gradient(to bottom, #f0f9ff, #ffffff); |
| min-height: 100vh; |
| } |
| |
| .search-shadow { |
| box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.2); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .trend-tag { |
| transition: all 0.2s ease; |
| } |
| |
| .trend-tag:hover { |
| background-color: #2563eb; |
| color: white; |
| } |
| |
| .floating-btn { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); |
| } |
| 70% { |
| box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); |
| } |
| } |
| |
| .suggestions-dropdown { |
| max-height: 300px; |
| overflow-y: auto; |
| } |
| |
| .chart-container { |
| background: linear-gradient(to top, #e0f2fe, #f0f9ff); |
| } |
| </style> |
| </head> |
| <body class="text-gray-800"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <h1 class="text-xl md:text-2xl font-bold text-primary">智研汇 · 科技知识平台</h1> |
| <nav class="hidden md:flex ml-10 space-x-7"> |
| <a href="#" class="font-medium hover:text-primary transition">首页</a> |
| <a href="#" class="font-medium hover:text-primary transition">探索</a> |
| <a href="#" class="font-medium hover:text-primary transition">趋势</a> |
| <a href="#" class="font-medium hover:text-primary transition">专家</a> |
| <a href="#" class="font-medium hover:text-primary transition">项目</a> |
| <a href="#" class="font-medium text-primary">AI问答</a> |
| </nav> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="md:hidden text-gray-600"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <div class="relative"> |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-semibold cursor-pointer"> |
| <i class="fas fa-user"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="max-w-4xl mx-auto text-center mb-16 mt-10"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-800">探索科技前沿，汇聚知识智慧</h2> |
| <p class="text-gray-600 mb-10 max-w-2xl mx-auto">连接全球科技资源，加速科研创新与知识转化</p> |
| |
| |
| <div class="relative"> |
| <div class="flex items-center bg-white rounded-full px-4 py-3 search-shadow"> |
| <input type="text" placeholder="Try: 碳纳米管改性方法有哪些？" class="w-full py-3 px-4 text-gray-700 focus:outline-none rounded-full"> |
| <button class="bg-primary text-white rounded-full p-3 hover:bg-accent transition"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| <div class="absolute right-16 top-3"> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-microphone"></i> |
| </button> |
| </div> |
| |
| |
| <div class="absolute left-0 mt-2 w-full bg-white rounded-xl shadow-lg z-10 hidden suggestions-dropdown"> |
| <div class="py-2"> |
| <div class="px-4 py-2 text-left text-sm text-gray-500">热门搜索</div> |
| <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer flex items-center"> |
| <i class="fas fa-fire text-red-500 mr-2"></i> |
| <span>高性能钙钛矿太阳能材料</span> |
| </div> |
| <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer flex items-center"> |
| <i class="fas fa-fire text-red-500 mr-2"></i> |
| <span>激光熔覆工艺的参数优化</span> |
| </div> |
| <div class="px-4 py-3 hover:bg-gray-50 cursor-pointer flex items-center"> |
| <i class="fas fa-fire text-red-500 mr-2"></i> |
| <span>AI在药物筛选中的应用</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16"> |
| |
| <div class="bg-white rounded-xl p-6 shadow-md card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3"> |
| <i class="fas fa-brain"></i> |
| </div> |
| <h3 class="text-xl font-semibold">猜你想问</h3> |
| </div> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-question-circle text-blue-400 mt-1 mr-2"></i> |
| <span class="hover:text-primary cursor-pointer transition">稀土磁性材料有哪些主流研究方向？</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-question-circle text-blue-400 mt-1 mr-2"></i> |
| <span class="hover:text-primary cursor-pointer transition">高温合金的抗氧化策略？</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-question-circle text-blue-400 mt-1 mr-2"></i> |
| <span class="hover:text-primary cursor-pointer transition">量子计算在材料模拟中的应用现状？</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-question-circle text-blue-400 mt-1 mr-2"></i> |
| <span class="hover:text-primary cursor-pointer transition">柔性电子材料的最新研究进展？</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl p-6 shadow-md card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3"> |
| <i class="fas fa-book"></i> |
| </div> |
| <h3 class="text-xl font-semibold">找技术成果</h3> |
| </div> |
| <div class="grid grid-cols-2 gap-3 mt-6"> |
| <button class="bg-blue-50 hover:bg-blue-100 text-primary font-medium py-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-file-alt mr-2"></i>论文 |
| </button> |
| <button class="bg-blue-50 hover:bg-blue-100 text-primary font-medium py-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-scroll mr-2"></i>专利 |
| </button> |
| <button class="bg-blue-50 hover:bg-blue-100 text-primary font-medium py-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-project-diagram mr-2"></i>项目报告 |
| </button> |
| <button class="bg-blue-50 hover:bg-blue-100 text-primary font-medium py-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-flask mr-2"></i>实验数据 |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl p-6 shadow-md card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600 mr-3"> |
| <i class="fas fa-user-graduate"></i> |
| </div> |
| <h3 class="text-xl font-semibold">找专家</h3> |
| </div> |
| <div class="space-y-4 mt-6"> |
| <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer"> |
| <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center text-blue-800 font-bold mr-3">王</div> |
| <div> |
| <h4 class="font-medium">王强 · 材料科学</h4> |
| <p class="text-sm text-gray-600">清华大学</p> |
| </div> |
| </div> |
| <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer"> |
| <div class="w-12 h-12 rounded-full bg-purple-200 flex items-center justify-center text-purple-800 font-bold mr-3">李</div> |
| <div> |
| <h4 class="font-medium">李雪 · 生物医学</h4> |
| <p class="text-sm text-gray-600">上海交通大学</p> |
| </div> |
| </div> |
| <div class="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer"> |
| <div class="w-12 h-12 rounded-full bg-green-200 flex items-center justify-center text-green-800 font-bold mr-3">张</div> |
| <div> |
| <h4 class="font-medium">张明 · 人工智能</h4> |
| <p class="text-sm text-gray-600">浙江大学</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white rounded-xl shadow-md mb-16 overflow-hidden"> |
| <div class="p-6 border-b"> |
| <h3 class="text-xl font-semibold">碳材料研究热度趋势</h3> |
| </div> |
| <div class="chart-container p-4 md:p-8"> |
| |
| <div class="relative h-64"> |
| |
| <div class="absolute bottom-0 left-0 w-full h-4/5"> |
| |
| <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-between"> |
| <div class="border-t border-gray-200"></div> |
| <div class="border-t border-gray-200"></div> |
| <div class="border-t border-gray-200"></div> |
| <div class="border-t border-gray-200"></div> |
| <div class="border-t border-gray-200"></div> |
| </div> |
| |
| |
| <div class="absolute bottom-0 left-0 w-full flex justify-between text-sm text-gray-500 px-2"> |
| <span>2019</span> |
| <span>2020</span> |
| <span>2021</span> |
| <span>2022</span> |
| <span>2023</span> |
| </div> |
| |
| |
| <div class="absolute bottom-0 left-0 w-full h-full"> |
| |
| <div class="absolute" style="bottom: 10%; left: 5%; width: 90%; height: 80%"> |
| <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="w-full h-full"> |
| <path d="M0,90 C20,70 40,30 60,50 C80,70 100,20 100,10" stroke="#3b82f6" stroke-width="2" fill="none" /> |
| </svg> |
| <div class="absolute -top-6 -right-2 text-xs text-blue-600">石墨烯</div> |
| </div> |
| |
| |
| <div class="absolute" style="bottom: 20%; left: 5%; width: 90%; height: 80%"> |
| <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="w-full h-full"> |
| <path d="M0,80 C20,40 40,60 60,30 C80,0 100,40 100,20" stroke="#10b981" stroke-width="2" fill="none" /> |
| </svg> |
| <div class="absolute -top-6 right-1/4 text-xs text-green-500">碳纳米管</div> |
| </div> |
| |
| |
| <div class="absolute" style="bottom: 30%; left: 5%; width: 90%; height: 80%"> |
| <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="w-full h-full"> |
| <path d="M0,60 C20,50 40,70 60,40 C80,10 100,30 100,20" stroke="#8b5cf6" stroke-width="2" fill="none" /> |
| </svg> |
| <div class="absolute -top-6 right-1/2 text-xs text-purple-500">碳纤维</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-gray-50 flex flex-wrap gap-2"> |
| <span class="trend-tag px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">石墨烯</span> |
| <span class="trend-tag px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">碳纳米管</span> |
| <span class="trend-tag px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">碳纤维</span> |
| <span class="trend-tag px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">富勒烯</span> |
| <span class="trend-tag px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">碳量子点</span> |
| <span class="trend-tag px-3 py-1 bg-gray-200 rounded-full text-sm cursor-pointer">石墨炔</span> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <div class="fixed bottom-6 right-6"> |
| <button class="floating-btn bg-primary text-white rounded-full p-4 shadow-lg hover:bg-accent transition flex items-center"> |
| <i class="fas fa-robot text-xl mr-2"></i> |
| <span class="hidden md:inline-block">智能问答助手 · 问我任何科技问题</span> |
| <span class="md:hidden">AI助手</span> |
| </button> |
| </div> |
|
|
| |
| <footer class="bg-gray-50 border-t py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between"> |
| <div class="mb-6 md:mb-0"> |
| <h3 class="text-lg font-semibold text-primary mb-3">智研汇 · 科技知识平台</h3> |
| <p class="text-gray-600 max-w-md">连接全球科技资源，加速科研创新与知识转化</p> |
| </div> |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
| <div> |
| <h4 class="font-semibold mb-3">资源</h4> |
| <ul class="space-y-2 text-gray-600"> |
| <li><a href="#" class="hover:text-primary">研究论文</a></li> |
| <li><a href="#" class="hover:text-primary">技术专利</a></li> |
| <li><a href="#" class="hover:text-primary">科研项目</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-3">服务</h4> |
| <ul class="space-y-2 text-gray-600"> |
| <li><a href="#" class="hover:text-primary">专家咨询</a></li> |
| <li><a href="#" class="hover:text-primary">技术评估</a></li> |
| <li><a href="#" class="hover:text-primary">知识图谱</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-3">关于我们</h4> |
| <ul class="space-y-2 text-gray-600"> |
| <li><a href="#" class="hover:text-primary">平台介绍</a></li> |
| <li><a href="#" class="hover:text-primary">加入我们</a></li> |
| <li><a href="#" class="hover:text-primary">联系我们</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="border-t mt-8 pt-6 text-center text-gray-500 text-sm"> |
| © 2023 智研汇科技知识平台. 保留所有权利. |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const searchInput = document.querySelector('input'); |
| const suggestionsDropdown = document.querySelector('.suggestions-dropdown'); |
| |
| searchInput.addEventListener('focus', () => { |
| suggestionsDropdown.classList.remove('hidden'); |
| }); |
| |
| searchInput.addEventListener('blur', () => { |
| setTimeout(() => { |
| suggestionsDropdown.classList.add('hidden'); |
| }, 200); |
| }); |
| |
| |
| const mobileMenuButton = document.querySelector('button.md\\:hidden'); |
| mobileMenuButton.addEventListener('click', () => { |
| alert('移动端菜单功能需要实现'); |
| }); |
| |
| |
| const trendTags = document.querySelectorAll('.trend-tag'); |
| trendTags.forEach(tag => { |
| tag.addEventListener('click', () => { |
| alert('趋势标签 "' + tag.textContent + '" 被选中'); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/search1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
