Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>中药饮片AI三维鉴别实训系统</title> | |
| <style> | |
| /* 基础样式 */ | |
| :root { | |
| --primary-color: #4a90e2; | |
| --light-bg: #f0f2f5; | |
| --panel-bg: #ffffff; | |
| --text-color: #333333; | |
| --border-color: #e9ecef; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| margin: 0; | |
| background-color: var(--light-bg); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* 顶部栏 */ | |
| .top-bar { | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 12px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| z-index: 100; | |
| flex-shrink: 0; | |
| } | |
| /* --- CSS 修改 1: 为标题和返回按钮创建一个容器 --- */ | |
| .top-bar .title-section { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; /* 标题和返回按钮之间的间距 */ | |
| } | |
| .top-bar h1 { | |
| margin: 0; | |
| font-size: 1.4em; | |
| font-weight: 600; | |
| } | |
| /* --- CSS 修改 2: 添加返回首页按钮的样式 --- */ | |
| .back-to-home { | |
| background-color: transparent; | |
| border: 1px solid rgba(255, 255, 255, 0.7); | |
| color: white; | |
| padding: 8px 16px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 14px; | |
| text-decoration: none; /* 移除a标签的下划线 */ | |
| display: inline-block; | |
| } | |
| .back-to-home:hover { | |
| background-color: white; | |
| color: var(--primary-color); | |
| } | |
| .mode-switcher button { | |
| background-color: transparent; | |
| border: 1px solid white; | |
| color: white; | |
| padding: 8px 16px; | |
| margin-left: 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 14px; | |
| } | |
| .mode-switcher button.active, .mode-switcher button:hover { | |
| background-color: white; | |
| color: var(--primary-color); | |
| } | |
| /* 主内容区 */ | |
| .main-content { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| min-height: 0; | |
| } | |
| /* 侧边栏 */ | |
| #sidebar { | |
| width: 220px; | |
| background-color: var(--panel-bg); | |
| padding: 16px; | |
| box-shadow: 2px 0 5px rgba(0,0,0,0.1); | |
| overflow-y: auto; | |
| flex-shrink: 0; | |
| } | |
| #sidebar h2 { | |
| margin: 0 0 16px 0; | |
| font-size: 1.1em; | |
| color: var(--text-color); | |
| } | |
| #herb-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #herb-list li { | |
| padding: 10px 12px; | |
| cursor: pointer; | |
| border-radius: 6px; | |
| margin-bottom: 6px; | |
| transition: all 0.2s; | |
| font-size: 14px; | |
| } | |
| #herb-list li:hover { | |
| background-color: #eaf2fb; | |
| } | |
| #herb-list li.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| font-weight: 500; | |
| } | |
| /* 3D 视窗容器 */ | |
| #viewer-container { | |
| flex: 1; | |
| position: relative; | |
| min-width: 0; | |
| } | |
| #c { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* 右侧信息面板 */ | |
| #info-panel { | |
| width: 350px; | |
| background-color: var(--panel-bg); | |
| box-shadow: -2px 0 5px rgba(0,0,0,0.1); | |
| flex-shrink: 0; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| #learn-panel { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* 图片区域 */ | |
| .herb-image-section { | |
| flex-shrink: 0; | |
| padding: 20px 20px 0 20px; | |
| background-color: #fafbfc; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .herb-image-container { | |
| width: 100%; | |
| height: 200px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: white; | |
| border-radius: 8px; | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| margin-bottom: 15px; | |
| } | |
| #herb-image { | |
| max-width: 100%; | |
| max-height: 100%; | |
| width: auto; | |
| height: auto; | |
| object-fit: contain; | |
| border-radius: 6px; | |
| } | |
| /* 信息内容区域 */ | |
| .info-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| } | |
| .info-section h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 1.3em; | |
| color: var(--primary-color); | |
| border-bottom: 2px solid var(--primary-color); | |
| padding-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .info-item { | |
| margin-bottom: 18px; | |
| } | |
| .info-item h4 { | |
| margin: 0 0 8px 0; | |
| font-size: 14px; | |
| color: #555; | |
| font-weight: 600; | |
| } | |
| .info-item p { | |
| margin: 0; | |
| line-height: 1.6; | |
| font-size: 13px; | |
| color: #666; | |
| } | |
| /* 加载覆盖层 */ | |
| #loading-overlay { | |
| position: absolute; top: 0; left: 0; width: 100%; height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| display: flex; justify-content: center; align-items: center; | |
| z-index: 20; transition: opacity 0.5s; | |
| pointer-events: none; opacity: 0; | |
| } | |
| #loading-overlay.visible { opacity: 1; pointer-events: auto; } | |
| .loading-box { | |
| text-align: center; color: white; background-color: rgba(40, 40, 40, 0.9); | |
| padding: 30px 40px; border-radius: 10px; | |
| } | |
| .loading-title { font-size: 1.2em; margin-bottom: 15px; } | |
| .progress-bar-container { | |
| width: 250px; height: 8px; background-color: #555; | |
| border-radius: 4px; overflow: hidden; margin: 0 auto; | |
| } | |
| #progress-bar { | |
| width: 0%; height: 100%; background-color: var(--primary-color); | |
| border-radius: 4px; transition: width 0.2s ease-in-out; | |
| } | |
| #progress-text { margin-top: 15px; font-size: 1em; font-family: monospace; } | |
| /* 缩放控制按钮 */ | |
| .zoom-controls { | |
| position: absolute; bottom: 20px; right: 20px; z-index: 10; | |
| display: flex; flex-direction: column; | |
| } | |
| .zoom-controls button { | |
| width: 40px; height: 40px; font-size: 18px; font-weight: bold; | |
| border: none; border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); | |
| color: white; cursor: pointer; margin-top: 8px; transition: all 0.3s; | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .zoom-controls button:hover { background-color: rgba(0, 0, 0, 0.8); transform: scale(1.1); } | |
| /* 特征点弹窗 */ | |
| #feature-popup { | |
| position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.85); | |
| color: white; padding: 20px; border-radius: 8px; max-width: 300px; | |
| z-index: 100; border: 1px solid rgba(255,255,255,0.2); | |
| font-size: 14px; line-height: 1.5; transition: all 0.3s; | |
| transform: scale(0.95); | |
| } | |
| #feature-popup.hidden { opacity: 0; pointer-events: none; transform: scale(0.9); } | |
| #feature-popup-content strong { color: #ffcc00; display: block; margin-bottom: 8px; } | |
| #feature-popup-close { | |
| display: block; width: 100%; margin-top: 15px; padding: 8px 12px; | |
| cursor: pointer; border: none; background: #555; | |
| color: white; border-radius: 5px; transition: background-color 0.3s; | |
| } | |
| #feature-popup-close:hover { background: #666; } | |
| /* 在 training.html 的 <style> 标签内添加AI导师按钮的样式 */ | |
| .mode-switcher .mode-link { | |
| background-color: transparent; | |
| border: 1px solid white; | |
| color: white; | |
| padding: 8px 16px; | |
| margin-left: 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 14px; | |
| text-decoration: none; /* 移除下划线 */ | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 保持字体一致 */ | |
| } | |
| .mode-switcher .mode-link:hover { | |
| background-color: white; | |
| color: var(--primary-color); | |
| } | |
| /* 自定义滚动条样式 */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #999; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="top-bar"> | |
| <!-- HTML 修改: 将标题和返回按钮包裹在一个div中，方便布局 --> | |
| <div class="title-section"> | |
| <h1>中药饮片AI三维鉴别实训系统</h1> | |
| </div> | |
| <div class="mode-switcher"> | |
| <!-- HTML 修改: 将返回按钮移动到这里，放在最右侧 --> | |
| <a href="index.html" class="back-to-home">返回首页</a> | |
| <button id="btn-learn-mode" class="active">三维沉浸式学习</button> | |
| <!--<button id="btn-qa-mode">AI导师教学</button>--> | |
| <!-- 修改为链接 --> | |
| <a href="aiteacher.html" class="mode-link">AI导师教学</a> | |
| <button id="btn-exam-mode">AI主考测验</button> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div id="sidebar"> | |
| <h2>饮片目录</h2> | |
| <ul id="herb-list"></ul> | |
| </div> | |
| <div id="viewer-container"> | |
| <canvas id="c"></canvas> | |
| <div id="loading-overlay"> | |
| <div class="loading-box"> | |
| <div class="loading-title">正在加载模型...</div> | |
| <div class="progress-bar-container"> | |
| <div id="progress-bar"></div> | |
| </div> | |
| <div id="progress-text">0%</div> | |
| </div> | |
| </div> | |
| <div class="zoom-controls"> | |
| <button id="zoom-in-btn">+</button> | |
| <button id="zoom-out-btn">-</button> | |
| </div> | |
| <div id="feature-popup" class="hidden"> | |
| <div id="feature-popup-content"></div> | |
| <button id="feature-popup-close">关闭</button> | |
| </div> | |
| </div> | |
| <div id="info-panel"> | |
| <div id="learn-panel"> | |
| <div class="herb-image-section"> | |
| <div class="herb-image-container"> | |
| <img id="herb-image" src="" alt="中药饮片图片"> | |
| </div> | |
| </div> | |
| <div class="info-content"> | |
| <div class="info-section"> | |
| <h3 id="herb-name"></h3> | |
| <div class="info-item"> | |
| <h4>【来源】</h4> | |
| <p id="herb-source"></p> | |
| </div> | |
| <div class="info-item"> | |
| <h4>【性味归经】</h4> | |
| <p id="herb-taste"></p> | |
| </div> | |
| <div class="info-item"> | |
| <h4>【功效】</h4> | |
| <p id="herb-effect"></p> | |
| </div> | |
| <div class="info-item"> | |
| <h4>【性状鉴别要点】</h4> | |
| <p id="herb-identification"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| <script type="module" src="main.js"></script> | |
| </body> | |
| </html> |