设计一个面向科研人员的“科研知识门户”Web 页面，主题为“原子能科学研究”，页面风格现代、专业，配色以蓝白为主，简洁清晰。页面支持响应式设计（PC + 移动端），整体布局清晰。请基于以下结构与内容进行页面生成，并使用原子能研究的真实示例填充数据。 页面结构设计： 顶部导航栏（Top Navbar） LOGO：“中国原子能科学研究院” 导航项：科研首页、知识检索、成果分析、科研数据、大模型服务、我的空间 登录区域：用户头像 + 欢迎语 轮播区域（焦点图+理念介绍 Banner Carousel） ✅ 新增模块 位于页面顶部横幅位置 三张自动轮播大图，每张图展示一条平台理念或焦点资讯 示例内容： 图1：「聚焦核能未来」——赋能原子能科技创新的数据智能平台 图2：「135TB科研数据集中管理」——统一、可信、安全的数据底座 图3：「国产大模型+科研场景融合」——打造智能科研助手新范式 每张图包含：背景图（高科技蓝调风格）、简短宣传语、引导按钮（了解更多） 知识推荐区域（智能推荐） 内容卡片展示相关文献与成果 示例文献：“钍基熔盐堆关键技术综述”、“钚-239裂变横截面实验分析”等 展示：标题、作者、单位、关键词、摘要、引用按钮 科研数据浏览区（分类数据） 展示类型：原子能论文、专利、项目数据、实验数据、评论分析等 示例： “一种低压氚提取装置的设计专利” “乏燃料中锶-90的分布实验数据” “高通量反应堆数据管理策略” 大模型智能问答区（AI问答） 提问输入框 + 对话窗口展示 示例提问：“中子俘获反应在快堆中的作用是什么？” 答案由大模型生成，并引用相关论文内容（显示出处） 科研动态（资讯/态势跟踪） 最新科研资讯轮播区域 示例新闻： “我国首座快堆实验堆进入调试阶段” “原子能院发布2025年度研究计划” 底部信息区（Footer） 单位信息、联系方式、系统备案号、数据声明等 风格说明： 页面风格参考国家科技平台、学术门户，强调专业性与技术感 使用浅蓝+白为主色调，图标、按钮简洁圆润 保持排版留白，支持图谱组件与智能问答模块嵌入 - Initial Deployment
ff26b24
verified
| <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: '#0c4a6e', | |
| secondary: '#0284c7', | |
| accent: '#0891b2', | |
| light: '#e0f2fe', | |
| dark: '#082f49' | |
| } | |
| } | |
| } | |
| } | |
| </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(180deg, #f0f9ff 0%, #ffffff 100%); | |
| } | |
| .carousel { | |
| transition: transform 0.5s ease-in-out; | |
| } | |
| .slide { | |
| transition: opacity 0.5s ease-in-out; | |
| } | |
| .knowledge-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(2, 132, 199, 0.15); | |
| } | |
| .chat-entry { | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .news-scroll { | |
| animation: scroll 20s linear infinite; | |
| } | |
| @keyframes scroll { | |
| 0% { transform: translateY(0); } | |
| 100% { transform: translateY(-50%); } | |
| } | |
| .pulse { | |
| animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 50% { opacity: 0.5; } | |
| } | |
| .logo-gradient { | |
| background: linear-gradient(45deg, #082f49, #0891b2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .atom-icon { | |
| position: relative; | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .atom-core { | |
| position: absolute; | |
| width: 12px; | |
| height: 12px; | |
| background: #0284c7; | |
| border-radius: 50%; | |
| top: 10px; | |
| left: 10px; | |
| } | |
| .electron { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| background: #0ea5e9; | |
| border-radius: 50%; | |
| animation: orbit 5s linear infinite; | |
| } | |
| .electron-1 { | |
| top: 3px; | |
| left: 3px; | |
| animation-delay: 0s; | |
| } | |
| .electron-2 { | |
| top: 3px; | |
| left: 23px; | |
| animation-delay: -1.25s; | |
| } | |
| .electron-3 { | |
| top: 23px; | |
| left: 3px; | |
| animation-delay: -2.5s; | |
| } | |
| .electron-4 { | |
| top: 23px; | |
| left: 23px; | |
| animation-delay: -3.75s; | |
| } | |
| @keyframes orbit { | |
| 0% { | |
| transform: rotate(0deg) translateX(10px) rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg) translateX(10px) rotate(-360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- 顶部导航栏 --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="atom-icon"> | |
| <div class="atom-core"></div> | |
| <div class="electron electron-1"></div> | |
| <div class="electron electron-2"></div> | |
| <div class="electron electron-3"></div> | |
| <div class="electron electron-4"></div> | |
| </div> | |
| <h1 class="text-xl font-bold logo-gradient">中国原子能科学研究院</h1> | |
| </div> | |
| <!-- 桌面端导航 --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-primary font-medium hover:text-secondary transition">科研首页</a> | |
| <a href="#" class="text-gray-600 hover:text-primary transition">知识检索</a> | |
| <a href="#" class="text-gray-600 hover:text-primary transition">成果分析</a> | |
| <a href="#" class="text-gray-600 hover:text-primary transition">科研数据</a> | |
| <a href="#" class="text-gray-600 hover:text-primary transition">大模型服务</a> | |
| <a href="#" class="text-gray-600 hover:text-primary transition">我的空间</a> | |
| </nav> | |
| <!-- 登录区域 --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden sm:flex items-center space-x-2"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| <span class="text-sm text-gray-600">欢迎，张研究员</span> | |
| </div> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="flex-grow"> | |
| <!-- 轮播区域 --> | |
| <section class="relative overflow-hidden h-[450px] md:h-[500px]"> | |
| <div class="carousel absolute inset-0 flex transition-transform duration-500"> | |
| <!-- 轮播图1 --> | |
| <div class="slide min-w-full flex-shrink-0 relative"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-accent/70"></div> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJuZXV0cm9uIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI25ldXRyb24pIi8+PC9zdmc+')]"></div> | |
| <div class="container mx-auto h-full flex flex-col justify-center px-6 relative z-10 text-white"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4 animate-fadeIn">聚焦核能未来</h2> | |
| <p class="text-xl md:text-2xl max-w-2xl mb-8">赋能原子能科技创新的数据智能平台</p> | |
| <button class="bg-white text-primary hover:bg-light hover:text-primary-dark px-6 py-3 rounded-full font-bold shadow-lg w-fit transition"> | |
| 了解更多 <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 轮播图2 --> | |
| <div class="slide min-w-full flex-shrink-0 relative"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-dark/80 to-secondary/80"></div> | |
| <div class="absolute inset-0 opacity-30 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJkYXRhLXBhdHRlcm4iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMyIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZGF0YS1wYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div> | |
| <div class="container mx-auto h-full flex flex-col justify-center px-6 relative z-10 text-white"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">135TB科研数据集中管理</h2> | |
| <p class="text-xl md:text-2xl max-w-2xl mb-8">统一、可信、安全的数据底座</p> | |
| <button class="bg-white text-primary hover:bg-light hover:text-primary-dark px-6 py-3 rounded-full font-bold shadow-lg w-fit transition"> | |
| 浏览数据 <i class="fas fa-database ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 轮播图3 --> | |
| <div class="slide min-w-full flex-shrink-0 relative"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-accent/80 to-primary/80"></div> | |
| <div class="absolute inset-0 opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJhaS1wYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPjxwYXRoIGQ9Ik04LDBMIDAsMTAgMjAsMzAgMzAsMjAgMTAsMCBaIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIi8+PHBhdGggZD0iTTAsMjAgTDIwLDAgNDAsMjAgMjAsNDAgWiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA3KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNhaS1wYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div> | |
| <div class="container mx-auto h-full flex flex-col justify-center px-6 relative z-10 text-white"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">国产大模型+科研场景融合</h2> | |
| <p class="text-xl md:text-2xl max-w-2xl mb-8">打造智能科研助手新范式</p> | |
| <button class="bg-white text-primary hover:bg-light hover:text-primary-dark px-6 py-3 rounded-full font-bold shadow-lg w-fit transition"> | |
| 体验AI助手 <i class="fas fa-robot ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 轮播指示器 --> | |
| <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10"> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-60 indicator-btn" data-index="0"></button> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-60 indicator-btn" data-index="1"></button> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-60 indicator-btn" data-index="2"></button> | |
| </div> | |
| <!-- 左右切换按钮 --> | |
| <button class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white text-2xl z-10 carousel-prev"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white text-2xl z-10 carousel-next"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </section> | |
| <!-- 知识推荐区域 --> | |
| <section class="py-16 bg-light/30"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-primary">推荐文献与成果</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- 文献卡片1 --> | |
| <div class="knowledge-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6 pb-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold text-primary mb-2">钍基熔盐堆关键技术综述</h3> | |
| <span class="bg-accent/10 text-accent text-xs px-2 py-1 rounded-md">热点文献</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">张明远, 李建国, 王立新 | 中国原子能科学研究院</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">第四代核反应堆</span> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">熔盐堆技术</span> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">核燃料循环</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">本文系统总结了钍基熔盐堆在燃料循环、材料耐腐蚀性、系统安全设计等方面的最新研究成果，分析了未来商业化应用面临的技术挑战和发展路径...</p> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-secondary font-medium flex items-center"> | |
| <i class="fas fa-bookmark mr-2"></i> 收藏文献 | |
| </button> | |
| <button class="px-4 py-2 bg-secondary hover:bg-primary text-white rounded-full text-sm transition"> | |
| 引用 <i class="fas fa-quote-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 文献卡片2 --> | |
| <div class="knowledge-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6 pb-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold text-primary mb-2">钚-239裂变横截面实验分析</h3> | |
| <span class="bg-secondary/10 text-secondary text-xs px-2 py-1 rounded-md">最新成果</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">陈志伟, 刘晓波, 杨振华 | 核物理研究所</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">裂变截面</span> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">中子物理</span> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">核数据测量</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">基于中国先进研究堆(CARR)的高通量中子束流，研究团队对钚-239在0.1-20MeV能区的裂变截面进行了精确测量，实验数据填补了国内相关核数据库的空白...</p> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-secondary font-medium flex items-center"> | |
| <i class="fas fa-bookmark mr-2"></i> 收藏文献 | |
| </button> | |
| <button class="px-4 py-2 bg-secondary hover:bg-primary text-white rounded-full text-sm transition"> | |
| 引用 <i class="fas fa-quote-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 文献卡片3 --> | |
| <div class="knowledge-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6 pb-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold text-primary mb-2">快堆乏燃料后处理技术进展</h3> | |
| <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-md">高引用文献</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">赵建华, 孙宏宇, 周伟 | 核燃料循环研究所</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">乏燃料处理</span> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">快中子反应堆</span> | |
| <span class="bg-light text-primary text-xs px-2 py-1 rounded">PUREX流程</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">本文综述了快堆乏燃料后处理领域的技术进展，重点分析了高燃耗燃料溶解、锕系元素分离、高放废液处理等关键技术的发展现状，提出了适合中国快堆燃料循环的技术路线...</p> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-secondary font-medium flex items-center"> | |
| <i class="fas fa-bookmark mr-2"></i> 收藏文献 | |
| </button> | |
| <button class="px-4 py-2 bg-secondary hover:bg-primary text-white rounded-full text-sm transition"> | |
| 引用 <i class="fas fa-quote-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 科研数据浏览区 --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-primary">科研数据资源</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- 数据类别1 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 flex items-start"> | |
| <div class="mr-4 text-secondary"> | |
| <i class="fas fa-file-alt text-3xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-primary mb-2">原子能论文</h3> | |
| <p class="text-gray-600 mb-4">收录核心期刊论文、会议论文及技术报告</p> | |
| <div class="bg-light rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">一种低压氚提取装置的设计专利</span> | |
| <span class="text-xs text-gray-500">2023-07</span> | |
| </div> | |
| <p class="text-sm text-gray-600">新型氚提取装置设计，适用于聚变堆燃料循环系统</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 数据类别2 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 flex items-start"> | |
| <div class="mr-4 text-secondary"> | |
| <i class="fas fa-flask text-3xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-primary mb-2">实验数据</h3> | |
| <p class="text-gray-600 mb-4">反应堆运行数据、材料实验数据、辐射测量数据</p> | |
| <div class="bg-light rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">乏燃料中锶-90的分布实验数据</span> | |
| <span class="text-xs text-gray-500">2023-09</span> | |
| </div> | |
| <p class="text-sm text-gray-600">不同冷却时间下乏燃料中放射性核素分布数据集</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 数据类别3 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 flex items-start"> | |
| <div class="mr-4 text-secondary"> | |
| <i class="fas fa-project-diagram text-3xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-primary mb-2">项目数据</h3> | |
| <p class="text-gray-600 mb-4">国家级科研项目、国际合作项目、企业委托项目</p> | |
| <div class="bg-light rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">高通量反应堆数据管理策略</span> | |
| <span class="text-xs text-gray-500">2023-11</span> | |
| </div> | |
| <p class="text-sm text-gray-600">面向新型研究堆的全生命周期数据管理解决方案</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 数据类别4 --> | |
| <div class="bg-white rounded-xl shadow-md p-6 flex items-start"> | |
| <div class="mr-4 text-secondary"> | |
| <i class="fas fa-chart-bar text-3xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-primary mb-2">分析评论</h3> | |
| <p class="text-gray-600 mb-4">技术评论、行业分析、政策解读</p> | |
| <div class="bg-light rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">小型模块化反应堆经济性分析报告</span> | |
| <span class="text-xs text-gray-500">2023-10</span> | |
| </div> | |
| <p class="text-sm text-gray-600">SMR在不同应用场景下的经济性建模与比较分析</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 大模型智能问答区 --> | |
| <section class="py-16 bg-gradient-to-br from-light to-blue-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-primary">原子能大模型智能助手</h2> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <!-- 问答历史区域 --> | |
| <div class="h-96 overflow-y-auto p-6 space-y-4" id="chat-container"> | |
| <div class="chat-entry"> | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-700">科研助手</p> | |
| <div class="bg-light rounded-lg p-4 mt-2"> | |
| <p>您好！我是原子能科研助手，专注于核科学与技术领域。您可以向我咨询反应堆物理、辐射防护、核燃料循环、核技术应用等方面的问题。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-entry"> | |
| <div class="flex items-start justify-end"> | |
| <div class="ml-3"> | |
| <div class="flex items-center"> | |
| <p class="font-medium text-gray-700 mr-2">张研究员</p> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| </div> | |
| <div class="bg-primary/10 rounded-lg p-4 mt-2"> | |
| <p>中子俘获反应在快堆中的作用是什么？</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-entry"> | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-700">科研助手</p> | |
| <div class="bg-light rounded-lg p-4 mt-2"> | |
| <p class="mb-3">在快堆中，中子俘获反应主要有以下作用：</p> | |
| <ul class="list-disc pl-5 space-y-2 mb-3"> | |
| <li><strong>增殖核燃料</strong>：通过U-238中子俘获产生Pu-239，实现燃料增殖</li> | |
| <li><strong>控制反应性</strong>：某些材料（如B-10）的中子俘获用于反应性控制</li> | |
| <li><strong>嬗变长寿命核素</strong>：通过俘获中子将长寿命裂变产物转变为短寿命或稳定核素</li> | |
| <li><strong>结构材料活化</strong>：堆内材料的中子俘获产生放射性核素，影响辐射防护</li> | |
| </ul> | |
| <div class="bg-accent/5 border-l-4 border-accent pl-4 py-2 text-sm"> | |
| <p class="font-medium">参考文献：</p> | |
| <p>李宏刚等. "快堆中子物理特性研究"《核科学与工程》, 2022, 42(3): 421-428.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 输入区域 --> | |
| <div class="border-t p-4 bg-white"> | |
| <div class="flex"> | |
| <input type="text" id="question-input" placeholder="输入原子能相关问题..." class="flex-grow border rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-secondary"> | |
| <button id="ask-button" class="bg-secondary hover:bg-primary text-white px-6 py-3 rounded-r-lg font-medium transition flex items-center"> | |
| 提问 <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <button class="text-xs bg-light hover:bg-secondary/10 text-primary px-3 py-1 rounded-full transition">燃料循环技术</button> | |
| <button class="text-xs bg-light hover:bg-secondary/10 text-primary px-3 py-1 rounded-full transition">反应堆安全分析</button> | |
| <button class="text-xs bg-light hover:bg-secondary/10 text-primary px-3 py-1 rounded-full transition">辐射防护标准</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 科研动态 --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-primary">最新科研动态</h2> | |
| <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- 动态卡片1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-accent relative"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJkeW5hbWljIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjxwYXRoIGQ9Ik0wLDBMMzAsMCAzMCwzMCAwLDMwIFoiIGZpbGw9InJnYmEoMCwxMjYsMTg0LDAuMDUpIi8+PHBhdGggZD0iTTEwLDEwIEwyMCwxMCAyMCwyMCAxMCwyMCBaIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZHluYW1pYykiLz48L3N2Zz4=')]"></div> | |
| <div class="absolute bottom-4 left-4 text-white"> | |
| <span class="text-sm bg-white/20 backdrop-blur-sm px-2 py-1 rounded">项目进展</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-2">我国首座快堆实验堆进入调试阶段</h3> | |
| <p class="text-gray-600 mb-4">中国实验快堆二期工程顺利完成主体建设，进入系统调试阶段，标志着我国第四代核能技术取得重要突破...</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>2023-11-15</span> | |
| <a href="#" class="text-secondary font-medium">阅读更多</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 动态卡片2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-secondary to-accent relative"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwbGFuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA3KSIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjUwIiB5MT0iMCIgeDI9IjAiIHkyPSI1MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIiBzdHJva2Utd2lkdGg9IjIiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGxhbikiLz48L3N2Zz4=')]"></div> | |
| <div class="absolute bottom-4 left-4 text-white"> | |
| <span class="text-sm bg-white/20 backdrop-blur-sm px-2 py-1 rounded">发展规划</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-2">原子能院发布2025年度研究计划</h3> | |
| <p class="text-gray-600 mb-4">研究院公布2025年重点研究方向，包括先进燃料循环、小型模块化反应堆、核聚变工程材料等六大领域...</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>2023-11-08</span> | |
| <a href="#" class="text-secondary font-medium">阅读更多</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 动态卡片3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-accent to-primary relative"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJjb2xhYiIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj48Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSIxNSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIiBzdHJva2Utd2lkdGgPSIyIiBmaWxsPSJub25lIi8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iNSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIGN4PSIzNSIgY3k9IjM1IiByPSI1IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wNykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNjb2xhYikiLz48L3N2Zz4=')]"></div> | |
| <div class="absolute bottom-4 left-4 text-white"> | |
| <span class="text-sm bg-white/20 backdrop-blur-sm px-2 py-1 rounded">国际合作</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-2">中俄签署先进核能技术合作协议</h3> | |
| <p class="text-gray-600 mb-4">两国将在快堆燃料闭式循环、核聚变工程材料研发、核设施退役技术等领域开展深度合作...</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>2023-10-27</span> | |
| <a href="#" class="text-secondary font-medium">阅读更多</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- 底部信息区 --> | |
| <footer class="bg-primary text-white pt-12 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">中国原子能科学研究院</h3> | |
| <p class="text-light mb-4">致力于核能科学研究与技术创新的国家级综合研究机构</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-light hover:text-white transition"><i class="fab fa-weixin"></i></a> | |
| <a href="#" class="text-light hover:text-white transition"><i class="fab fa-weibo"></i></a> | |
| <a href="#" class="text-light hover:text-white transition"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">快速链接</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-light hover:text-white transition">科研项目库</a></li> | |
| <li><a href="#" class="text-light hover:text-white transition">数据中心</a></li> | |
| <li><a href="#" class="text-light hover:text-white transition">开放实验室</a></li> | |
| <li><a href="#" class="text-light hover:text-white transition">学术期刊</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">相关资源</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-light hover:text-white transition">核工业标准</a></li> | |
| <li><a href="#" class="text-light hover:text-white transition">安全法规</a></li> | |
| <li><a href="#" class="text-light hover:text-white transition">国际合作</a></li> | |
| <li><a href="#" class="text-light hover:text-white transition">教育培训</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">联系我们</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-light"></i> | |
| <span>北京市房山区新镇三强路1号院</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3 text-light"></i> | |
| <span>010-6935 7000</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-light"></i> | |
| <span>contact@ciae.ac.cn</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-light/20 text-center text-light text-sm"> | |
| <p class="mb-2">© 2023 中国原子能科学研究院 版权所有 | 京ICP备05039896号-12 | 京公网安备 110402000348号</p> | |
| <p>本平台数据仅供科研使用，未经授权不得用于商业用途</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 轮播图功能 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const carousel = document.querySelector('.carousel'); | |
| const slides = document.querySelectorAll('.slide'); | |
| const indicators = document.querySelectorAll('.indicator-btn'); | |
| const prevBtn = document.querySelector('.carousel-prev'); | |
| const nextBtn = document.querySelector('.carousel-next'); | |
| let currentIndex = 0; | |
| const slideCount = slides.length; | |
| // 更新轮播位置 | |
| function updateCarousel() { | |
| carousel.style.transform = `translateX(-${currentIndex * 100}%)`; | |
| // 更新指示器 | |
| indicators.forEach((indicator, index) => { | |
| if(index === currentIndex) { | |
| indicator.classList.remove('opacity-60'); | |
| indicator.classList.add('opacity-100'); | |
| } else { | |
| indicator.classList.add('opacity-60'); | |
| indicator.classList.remove('opacity-100'); | |
| } | |
| }); | |
| } | |
| // 切换到下一张 | |
| function nextSlide() { | |
| currentIndex = (currentIndex + 1) % slideCount; | |
| updateCarousel(); | |
| } | |
| // 切换到上一张 | |
| function prevSlide() { | |
| currentIndex = (currentIndex - 1 + slideCount) % slideCount; | |
| updateCarousel(); | |
| } | |
| // 自动轮播 | |
| let autoSlide = setInterval(nextSlide, 5000); | |
| // 鼠标悬停时暂停自动轮播 | |
| carousel.parentElement.addEventListener('mouseenter', () => { | |
| clearInterval(autoSlide); | |
| }); | |
| // 鼠标离开时恢复自动轮播 | |
| carousel.parentElement.addEventListener('mouseleave', () => { | |
| autoSlide = setInterval(nextSlide, 5000); | |
| }); | |
| // 绑定事件 | |
| nextBtn.addEventListener('click', nextSlide); | |
| prevBtn.addEventListener('click', prevSlide); | |
| indicators.forEach(indicator => { | |
| indicator.addEventListener('click', () => { | |
| currentIndex = parseInt(indicator.getAttribute('data-index')); | |
| updateCarousel(); | |
| }); | |
| }); | |
| // 初始化指示器 | |
| updateCarousel(); | |
| // 问答功能 | |
| const askButton = document.getElementById('ask-button'); | |
| const questionInput = document.getElementById('question-input'); | |
| const chatContainer = document.getElementById('chat-container'); | |
| askButton.addEventListener('click', function() { | |
| const question = questionInput.value.trim(); | |
| if(question) { | |
| // 添加用户问题 | |
| const userEntry = document.createElement('div'); | |
| userEntry.className = 'chat-entry'; | |
| userEntry.innerHTML = ` | |
| <div class="flex items-start justify-end"> | |
| <div class="ml-3"> | |
| <div class="flex items-center"> | |
| <p class="font-medium text-gray-700 mr-2">张研究员</p> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| </div> | |
| <div class="bg-primary/10 rounded-lg p-4 mt-2"> | |
| <p>${question}</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(userEntry); | |
| // 清空输入框 | |
| questionInput.value = ''; | |
| // 添加加载提示 | |
| const loadingEntry = document.createElement('div'); | |
| loadingEntry.className = 'chat-entry mt-4'; | |
| loadingEntry.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-700">科研助手</p> | |
| <div class="bg-light rounded-lg p-4 mt-2"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-secondary pulse"></div> | |
| <div class="w-3 h-3 rounded-full bg-secondary pulse" style="animation-delay: 0.2s"></div> | |
| <div class="w-3 h-3 rounded-full bg-secondary pulse" style="animation-delay: 0.4s"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(loadingEntry); | |
| // 滚动到底部 | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // 模拟AI响应（实际应用中会调用API） | |
| setTimeout(() => { | |
| // 移除加载提示 | |
| chatContainer.removeChild(loadingEntry); | |
| // 添加AI响应 | |
| const aiEntry = document.createElement('div'); | |
| aiEntry.className = 'chat-entry'; | |
| aiEntry.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-700">科研助手</p> | |
| <div class="bg-light rounded-lg p-4 mt-2"> | |
| <p>您的问题 "<strong>${question}</strong>" 涉及原子能领域的专业知识。我正在查阅相关文献数据库，稍后会为您提供详细的解答。</p> | |
| <div class="bg-secondary/5 rounded-lg p-3 mt-3 text-sm"> | |
| <p class="font-medium">提示：</p> | |
| <p>您可以尝试更具体的问题，例如添加专业术语或指定研究方向，以获得更精准的回答。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(aiEntry); | |
| // 滚动到底部 | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1500); | |
| } | |
| }); | |
| // 支持回车键提问 | |
| questionInput.addEventListener('keypress', function(e) { | |
| if(e.key === 'Enter') { | |
| askButton.click(); | |
| } | |
| }); | |
| }); | |
| </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/atom1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |