Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>敏智中药饮片虚拟实训系统</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* 全局样式 - 经过优化和润色 */ | |
| :root { | |
| /* --- 色彩体系优化 --- */ | |
| --primary-color: #1a5e3a; /* 主色：沉稳墨绿，保留精华 */ | |
| --primary-dark-color: #12452b; /* 深主色 */ | |
| --secondary-color: #f0f7f3; /* 辅助色：更柔和的浅青色，用于背景 */ | |
| --accent-color: #b8966b; /* 点缀色：质感古铜金，替代原米棕色，提升高级感 */ | |
| --accent-color-hover: #a0845e; /* 点缀色悬停 */ | |
| --text-color-dark: #2c3e50; /* 深色文字 */ | |
| --text-color-light: #5a6a7a; /* 浅色文字 */ | |
| --bg-light: #fbfdfb; /* 基础背景色：近乎白色但带有极淡的绿色调 */ | |
| --bg-white: #ffffff; | |
| /* --- 阴影与边框优化 --- */ | |
| --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05); | |
| --shadow-medium: 0 8px 25px rgba(44, 62, 80, 0.08); | |
| --shadow-hover: 0 15px 35px rgba(44, 62, 80, 0.12); | |
| --border-light: 1px solid #e9eeeC; | |
| --border-radius-medium: 12px; | |
| --border-radius-large: 50px; /* 全圆角按钮，更现代 */ | |
| } | |
| body { | |
| margin: 0; | |
| font-family: 'Noto Sans SC', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| /* 背景增加微妙的渐变，提升层次感 */ | |
| background: linear-gradient(180deg, var(--secondary-color) 0%, var(--bg-light) 25%); | |
| color: var(--text-color-dark); | |
| overflow-x: hidden; | |
| line-height: 1.7; | |
| } | |
| /* 顶部导航栏 */ | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 50px; | |
| background-color: rgba(255, 255, 255, 0.95); | |
| box-shadow: var(--shadow-light); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 1000; | |
| box-sizing: border-box; | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */ | |
| } | |
| .navbar .logo { | |
| font-size: 26px; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| letter-spacing: 0.8px; | |
| } | |
| .navbar .nav-links { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| } | |
| .navbar .nav-links li { | |
| margin-left: 35px; | |
| } | |
| .navbar .nav-links a { | |
| text-decoration: none; | |
| color: var(--text-color-light); | |
| font-size: 17px; | |
| transition: color 0.3s ease, transform 0.2s ease; | |
| position: relative; | |
| padding-bottom: 5px; | |
| } | |
| .navbar .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: var(--primary-color); | |
| transition: width 0.3s ease; | |
| } | |
| .navbar .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .navbar .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| /* 英雄区域 */ | |
| .hero-section { | |
| position: relative; | |
| width: 100%; | |
| height: 600px; /* 略微增加高度 */ | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| color: #fff; | |
| text-align: center; | |
| margin-top: 70px; | |
| } | |
| .carousel-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| /* 给轮播图加上一层蒙版，使文字更清晰 */ | |
| .carousel-container::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.2)); | |
| z-index: 2; | |
| } | |
| .carousel-slide { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-size: cover; | |
| background-position: center; | |
| opacity: 0; | |
| transition: opacity 1.5s ease-in-out, transform 8s ease-in-out; | |
| transform: scale(1.05); /* 初始放大一点，用于制作缓慢缩放效果 */ | |
| } | |
| .carousel-slide.active { | |
| opacity: 1; | |
| transform: scale(1); /* 激活时恢复正常大小，产生缓慢推近的视觉效果 */ | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 3; | |
| background-color: rgba(10, 20, 15, 0.5); /* 带有绿色调的半透明背景 */ | |
| padding: 40px 60px; | |
| border-radius: var(--border-radius-medium); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .hero-content h1 { | |
| font-size: 52px; /* 字体加大 */ | |
| margin-bottom: 20px; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); | |
| } | |
| .hero-content p { | |
| font-size: 20px; | |
| line-height: 1.6; | |
| margin-bottom: 35px; | |
| text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .hero-content .btn-primary { | |
| display: inline-block; | |
| background-color: var(--accent-color); | |
| color: var(--bg-white); | |
| padding: 18px 45px; | |
| border-radius: var(--border-radius-large); | |
| text-decoration: none; | |
| font-size: 20px; | |
| font-weight: 600; | |
| transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); | |
| border: none; | |
| } | |
| .hero-content .btn-primary:hover { | |
| background-color: var(--accent-color-hover); | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 25px rgba(0, 0, 0, 0.45); | |
| } | |
| /* 核心功能区 - 优化布局以容纳三个卡片 */ | |
| .features-section { | |
| display: flex; | |
| justify-content: center; | |
| align-items: stretch; /* 让卡片等高 */ | |
| gap: 40px; | |
| padding: 100px 50px; | |
| background-color: transparent; /* 使用body的渐变背景 */ | |
| flex-wrap: wrap; | |
| } | |
| .feature-card { | |
| background-color: var(--bg-white); | |
| border-radius: var(--border-radius-medium); | |
| box-shadow: var(--shadow-medium); | |
| padding: 40px; | |
| text-align: center; | |
| width: 380px; /* 调整宽度以适应三个卡片 */ | |
| transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; | |
| border: 1px solid transparent; /* 初始边框透明 */ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-12px); | |
| box-shadow: var(--shadow-hover); | |
| border-color: var(--primary-color); /* 悬停时边框高亮 */ | |
| } | |
| .feature-card .icon { | |
| font-size: 65px; | |
| color: var(--primary-color); | |
| margin-bottom: 25px; | |
| } | |
| .feature-card h3 { | |
| font-size: 28px; /* 调整字号以适应卡片大小 */ | |
| color: var(--text-color-dark); | |
| margin-bottom: 20px; | |
| font-weight: 600; | |
| } | |
| .feature-card p { | |
| font-size: 17px; | |
| line-height: 1.8; /* 增加行高，提升可读性 */ | |
| color: var(--text-color-light); | |
| margin-bottom: 30px; | |
| flex-grow: 1; | |
| } | |
| .feature-card .btn-secondary { | |
| display: inline-block; | |
| background-color: var(--secondary-color); | |
| color: var(--primary-color); | |
| padding: 12px 30px; | |
| border-radius: var(--border-radius-large); | |
| text-decoration: none; | |
| font-size: 17px; | |
| font-weight: 500; | |
| transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; | |
| border: 1px solid var(--primary-color); | |
| } | |
| .feature-card .btn-secondary:hover { | |
| background-color: var(--primary-color); | |
| color: #fff; | |
| transform: translateY(-2px); | |
| } | |
| /* 底部信息区 */ | |
| .footer { | |
| background-color: #2c3e50; | |
| color: #bdc3c7; | |
| text-align: center; | |
| padding: 40px 20px; | |
| font-size: 15px; | |
| border-top: 5px solid var(--primary-color); | |
| } | |
| .footer p { | |
| margin: 8px 0; | |
| letter-spacing: 0.5px; | |
| } | |
| /* 响应式设计 */ | |
| @media (max-width: 1350px) { /* 调整断点以更好地处理三个卡片 */ | |
| .features-section { | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 50px; | |
| } | |
| .feature-card { | |
| width: 70%; | |
| max-width: 450px; /* 设定最大宽度 */ | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .navbar { padding: 15px 25px; } | |
| .navbar .nav-links { display: none; } /* 在移动端隐藏导航链接 */ | |
| .hero-content h1 { font-size: 38px; } | |
| .hero-content p { font-size: 18px; } | |
| .hero-content { padding: 30px; } | |
| .features-section { padding: 80px 20px; } | |
| .feature-card { width: 90%; } | |
| .feature-card h3 { font-size: 26px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <a href="#" class="logo">敏智中药饮片虚拟实训系统</a> | |
| <!-- 您可以根据需要添加导航链接 --> | |
| <!-- <ul class="nav-links"> | |
| <li><a href="#features">核心功能</a></li> | |
| <li><a href="#about">关于我们</a></li> | |
| <li><a href="#">联系我们</a></li> | |
| </ul> --> | |
| </nav> | |
| <header class="hero-section"> | |
| <div class="carousel-container"> | |
| <div class="carousel-slide active" style="background-image: url('https://images.unsplash.com/photo-1594293863428-93214a1a524e?q=80&w=1920');"></div> | |
| <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1560963953-2a3330612623?q=80&w=1920');"></div> | |
| <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1623595123548-7a5e015d023b?q=80&w=1920');"></div> | |
| </div> | |
| <div class="hero-content"> | |
| <h1>欢迎来到 敏智中药饮片虚拟实训系统</h1> | |
| <p>沉浸式3D交互融合AI智慧引导，开创中药饮片鉴别学习新范式。</p> | |
| <a href="training.html" class="btn-primary">立即进入实训</a> | |
| </div> | |
| </header> | |
| <section id="features" class="features-section"> | |
| <!-- 第一个功能卡片：3D沉浸式学习 --> | |
| <div class="feature-card"> | |
| <div class="icon">🔬</div> | |
| <h3>3D沉浸式学习</h3> | |
| <p>全方位自由旋转、缩放和拖动高精度中药饮片模型，洞察微观纹理与性状特征，真正掌握鉴别核心要点。</p> | |
| <a href="training.html" class="btn-secondary">探索3D药材</a> | |
| </div> | |
| <!-- 第二个功能卡片：AI中药师问答 (已修改) --> | |
| <div class="feature-card"> | |
| <div class="icon">💡</div> | |
| <h3>AI中药师问答</h3> | |
| <p>与AI中药师深度对话，无论是知识问答、性味归经查询，还是查阅最新版《中国药典》，都能获精准解答。</p> | |
| <a href="aiteacher.html" class="btn-secondary">对话AI中药师</a> | |
| </div> | |
| <!-- 第三个功能卡片：智能化实训考核 (新增) --> | |
| <div class="feature-card"> | |
| <div class="icon">🎯</div> | |
| <h3>智能化实训考核</h3> | |
| <p>通过大模型智能生成的动态题库进行自我检测，更有“中药连连看”等趣味游戏化考核，在挑战中巩固知识。</p> | |
| <a href="assessment.html" class="btn-secondary">开始智能考核</a> | |
| </div> | |
| </section> | |
| <footer class="footer"> | |
| <p>© 2025 敏智中药饮片虚拟实训系统. 保留所有权利。</p> | |
| <p>研发团队：广安门医院 / 中国科学院大学</p> | |
| </footer> | |
| <script> | |
| // JavaScript for Carousel (轮播图) | |
| const slides = document.querySelectorAll('.carousel-slide'); | |
| let currentSlide = 0; | |
| function showSlide(index) { | |
| slides.forEach((slide, i) => { | |
| slide.classList.remove('active'); | |
| if (i === index) { | |
| slide.classList.add('active'); | |
| } | |
| }); | |
| } | |
| function nextSlide() { | |
| // 为下一次切换准备动画 | |
| const nextIndex = (currentSlide + 1) % slides.length; | |
| slides[nextIndex].style.transition = 'opacity 1.5s ease-in-out, transform 8s ease-in-out'; | |
| slides[currentSlide].style.transition = 'opacity 1.5s ease-in-out'; | |
| currentSlide = nextIndex; | |
| showSlide(currentSlide); | |
| } | |
| // 初始加载 | |
| showSlide(currentSlide); | |
| // 设置定时器 | |
| setInterval(nextSlide, 7000); // 延长切换时间以匹配动画 | |
| </script> | |
| </body> | |
| </html> |