File size: 5,492 Bytes
d752e7c de5b9ac d752e7c de5b9ac 1729884 de5b9ac 1729884 de5b9ac 1729884 de5b9ac 1729884 de5b9ac 1729884 de5b9ac d752e7c de5b9ac 1729884 de5b9ac d752e7c de5b9ac d752e7c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中药饮片AI三维鉴别实训系统</title>
<style>
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
background-color: #f0f2f5;
display: flex;
height: 100vh;
overflow: hidden;
}
/* 主容器 */
.app-container {
display: flex;
width: 100%;
height: 100%;
}
/* 侧边栏 */
#sidebar {
width: 240px;
background-color: #fff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
overflow-y: auto;
z-index: 10;
}
#sidebar h2 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #4a90e2;
padding-bottom: 10px;
}
#herb-list {
list-style: none;
padding: 0;
margin: 0;
}
#herb-list li {
padding: 12px 15px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 8px;
transition: background-color 0.3s, color 0.3s;
}
#herb-list li:hover {
background-color: #e6f7ff;
}
#herb-list li.active {
background-color: #4a90e2;
color: white;
font-weight: bold;
}
/* 3D 视窗容器 */
#viewer-container {
flex-grow: 1;
position: relative; /* 必须是 relative，才能定位内部的绝对元素 */
}
#c {
display: block;
width: 100%;
height: 100%;
}
/* 加载覆盖层 */
#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: 10px;
background-color: #555;
border-radius: 5px;
overflow: hidden;
margin: 0 auto;
}
#progress-bar {
width: 0%;
height: 100%;
background-color: #4a90e2;
border-radius: 5px;
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: 24px;
line-height: 40px; /* 垂直居中 "+" 和 "-" */
font-weight: bold;
border: none;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}
.zoom-controls button:hover {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="app-container">
<!-- 左侧导航栏 -->
<div id="sidebar">
<h2>饮片目录</h2>
<ul id="herb-list">
<!-- 饮片列表将由 JS 动态生成 -->
</ul>
</div>
<!-- 中间 3D 视窗 -->
<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>
</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> |