bc-model-viewer 1.7.15 → 1.7.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bc-model-viewer.min.js +1 -1
- package/examples/AnnotationTool.html +74 -0
- package/examples/AreaMeasureTool.html +19 -26
- package/examples/BasicModelLoad.html +66 -0
- package/examples/ChangeStyleDemo.html +3 -74
- package/examples/DistanceMeasureTool.html +19 -26
- package/examples/ExplosionDiagram.html +16 -21
- package/examples/FaceDistanceMeasureTool.html +19 -26
- package/examples/HUDLabelTool.html +19 -35
- package/examples/LineTool.html +76 -0
- package/examples/ModelClipperTool.html +15 -23
- package/examples/PencilTool.html +73 -0
- package/examples/PositionCameraTool.html +12 -21
- package/examples/ScenePageDemo.html +20 -49
- package/examples/SelectionZoomTool.html +12 -22
- package/examples/common-styles.css +173 -0
- package/examples/index.html +696 -36
- package/package.json +1 -1
- package/examples/ScenePageDemo.vue +0 -246
- package/examples/ScenePageDemoVue.html +0 -22
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>手绘线工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
14
|
+
<div class="demo">
|
|
15
|
+
<h2>✏️ 手绘线工具演示</h2>
|
|
16
|
+
<p>按住鼠标拖动绘制连续线条。支持吸附到模型表面，松开鼠标完成绘制。激活工具时会禁用相机控制，停用时恢复。点击已绘制的线条可以选中（高亮显示），按 Delete 键删除选中的线条。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="control-group">
|
|
23
|
+
<button onclick="tool.removeLast()" class="secondary">清除上一次</button>
|
|
24
|
+
<button onclick="tool.clear()" class="danger">清除所有</button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="control-group">
|
|
27
|
+
<button onclick="console.log(tool.getDrawings())">打印数据</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="control-group">
|
|
30
|
+
<p style="font-size: 12px; color: #888; margin-top: 10px;">
|
|
31
|
+
💡 使用提示：<br>
|
|
32
|
+
• 按住鼠标左键拖动绘制线条<br>
|
|
33
|
+
• 松开鼠标完成当前线条<br>
|
|
34
|
+
• 点击已绘制的线条可以选中（高亮显示为绿色）<br>
|
|
35
|
+
• 自动吸附到模型表面顶点和边线<br>
|
|
36
|
+
• 激活时相机控制会被禁用<br>
|
|
37
|
+
• 按 Delete 键删除选中的线条
|
|
38
|
+
</p>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<script type="module">
|
|
43
|
+
|
|
44
|
+
import { Viewer, FreehandTool } from '../../index.ts'
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
const container = document.getElementById('container')
|
|
48
|
+
|
|
49
|
+
// 实例化 Viewer 对象
|
|
50
|
+
const viewer = new Viewer(container, {
|
|
51
|
+
load: {
|
|
52
|
+
cache: {
|
|
53
|
+
enabled: false
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
// 加载测试模型
|
|
59
|
+
await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
|
|
60
|
+
// await viewer.loadZipAsync('../../assets/new.dgz')
|
|
61
|
+
|
|
62
|
+
const tool = new FreehandTool(viewer)
|
|
63
|
+
|
|
64
|
+
tool.activate()
|
|
65
|
+
|
|
66
|
+
window.tool = tool
|
|
67
|
+
window.viewer = viewer
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
</body>
|
|
71
|
+
|
|
72
|
+
</html>
|
|
73
|
+
|
|
@@ -1,33 +1,24 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>第一人称漫游演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
15
|
+
<h2>👤 第一人称漫游演示</h2>
|
|
16
|
+
<p>第一人称视角的相机漫游功能。支持WASD移动、鼠标视角控制，提供沉浸式的模型浏览体验。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
31
22
|
</div>
|
|
32
23
|
|
|
33
24
|
<script type="module">
|
|
@@ -4,37 +4,10 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>场景页面管理器演示 -
|
|
7
|
+
<title>场景页面管理器演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
8
9
|
<style>
|
|
9
|
-
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
font-family: Arial, sans-serif;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
#container {
|
|
16
|
-
width: 100vw;
|
|
17
|
-
height: 100vh;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.control-panel {
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: 20px;
|
|
23
|
-
left: 20px;
|
|
24
|
-
z-index: 100;
|
|
25
|
-
background-color: rgba(255, 255, 255, 0.9);
|
|
26
|
-
padding: 20px;
|
|
27
|
-
border-radius: 8px;
|
|
28
|
-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
29
|
-
max-width: 300px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
h2 {
|
|
33
|
-
margin-top: 0;
|
|
34
|
-
color: #333;
|
|
35
|
-
font-size: 18px;
|
|
36
|
-
}
|
|
37
|
-
|
|
10
|
+
/* ScenePageDemo 特殊样式 */
|
|
38
11
|
.scene-buttons {
|
|
39
12
|
display: flex;
|
|
40
13
|
flex-direction: column;
|
|
@@ -42,24 +15,11 @@
|
|
|
42
15
|
margin-bottom: 20px;
|
|
43
16
|
}
|
|
44
17
|
|
|
45
|
-
button {
|
|
46
|
-
padding: 8px 16px;
|
|
47
|
-
background-color: #4CAF50;
|
|
48
|
-
color: white;
|
|
49
|
-
border: none;
|
|
50
|
-
border-radius: 4px;
|
|
51
|
-
cursor: pointer;
|
|
52
|
-
transition: background-color 0.3s;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
button:hover {
|
|
56
|
-
background-color: #45a049;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
18
|
.current-scene {
|
|
60
19
|
margin-top: 15px;
|
|
61
20
|
font-weight: bold;
|
|
62
21
|
color: #2c3e50;
|
|
22
|
+
font-size: 14px;
|
|
63
23
|
}
|
|
64
24
|
|
|
65
25
|
.info {
|
|
@@ -68,6 +28,17 @@
|
|
|
68
28
|
margin-top: 15px;
|
|
69
29
|
}
|
|
70
30
|
|
|
31
|
+
#sceneInfo {
|
|
32
|
+
margin-top: 15px;
|
|
33
|
+
padding: 10px;
|
|
34
|
+
background-color: #f5f5f5;
|
|
35
|
+
border-radius: 6px;
|
|
36
|
+
max-height: 200px;
|
|
37
|
+
overflow-y: auto;
|
|
38
|
+
font-size: 12px;
|
|
39
|
+
line-height: 1.6;
|
|
40
|
+
}
|
|
41
|
+
|
|
71
42
|
.event-log {
|
|
72
43
|
margin-top: 15px;
|
|
73
44
|
padding: 10px;
|
|
@@ -109,9 +80,9 @@
|
|
|
109
80
|
|
|
110
81
|
<body>
|
|
111
82
|
<div id="container"></div>
|
|
112
|
-
|
|
83
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
113
84
|
<div class="control-panel">
|
|
114
|
-
<h2
|
|
85
|
+
<h2>🎭 场景页面管理器演示</h2>
|
|
115
86
|
<div class="scene-buttons" id="modelScenesContainer">
|
|
116
87
|
<!-- 模型中的场景按钮将在这里动态生成 -->
|
|
117
88
|
</div>
|
|
@@ -119,9 +90,9 @@
|
|
|
119
90
|
style="margin-top: 15px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; max-height: 200px; overflow-y: auto;">
|
|
120
91
|
场景信息将在这里显示
|
|
121
92
|
</div>
|
|
122
|
-
<div>
|
|
93
|
+
<div class="control-group">
|
|
123
94
|
<label>
|
|
124
|
-
<input type="checkbox" id="transition" checked>
|
|
95
|
+
<input type="checkbox" id="transition" checked style="margin-right: 8px;">
|
|
125
96
|
启用过渡动画
|
|
126
97
|
</label>
|
|
127
98
|
</div>
|
|
@@ -131,7 +102,7 @@
|
|
|
131
102
|
<div class="info">
|
|
132
103
|
点击按钮切换到不同预设场景，每个场景包含不同的相机位置、目标点和可能的图层可见性设置。
|
|
133
104
|
</div>
|
|
134
|
-
<h3 style="margin-top: 20px; font-size: 14px; color: #333;">事件日志</h3>
|
|
105
|
+
<h3 style="margin-top: 20px; font-size: 14px; color: #333; margin-bottom: 10px;">事件日志</h3>
|
|
135
106
|
<div class="event-log" id="eventLog">
|
|
136
107
|
<!-- 事件日志将在这里动态显示 -->
|
|
137
108
|
事件日志将在此显示...
|
|
@@ -1,34 +1,24 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>框选放大工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
15
|
+
<h2>🔍 框选放大工具演示</h2>
|
|
16
|
+
<p>使用框选工具来放大查看模型的特定区域。框选范围越小，放大倍数越大，适合查看细节。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
32
22
|
</div>
|
|
33
23
|
|
|
34
24
|
<script type="module">
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/** Bc-model-viewer 示例统一样式 */
|
|
2
|
+
|
|
3
|
+
/* ===== 基础样式 ===== */
|
|
4
|
+
* { box-sizing: border-box; }
|
|
5
|
+
body {
|
|
6
|
+
margin: 0; padding: 0; position: relative;
|
|
7
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
|
|
8
|
+
font-size: 14px; line-height: 1.5; color: #333; background: #000; overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
#container { width: 100vw; height: 100vh; }
|
|
11
|
+
|
|
12
|
+
/* ===== 控制面板样式 ===== */
|
|
13
|
+
.demo, .demo-controls, .control-panel {
|
|
14
|
+
position: absolute; top: 20px; left: 20px; z-index: 1000;
|
|
15
|
+
background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
|
|
16
|
+
border-radius: 12px; padding: 20px;
|
|
17
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
18
|
+
min-width: 280px; max-width: 400px; transition: all 0.3s ease;
|
|
19
|
+
}
|
|
20
|
+
.demo:hover, .demo-controls:hover, .control-panel:hover {
|
|
21
|
+
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ===== 标题样式 ===== */
|
|
25
|
+
.demo h2, .demo-controls h2, .control-panel h2 {
|
|
26
|
+
margin: 0 0 15px 0; font-size: 18px; font-weight: 600; color: #2c3e50;
|
|
27
|
+
padding-bottom: 10px; border-bottom: 2px solid #e0e0e0;
|
|
28
|
+
}
|
|
29
|
+
.demo h3, .demo-controls h3, .control-panel h3 {
|
|
30
|
+
margin: 15px 0 10px 0; font-size: 16px; font-weight: 600; color: #34495e;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* ===== 文本样式 ===== */
|
|
34
|
+
.demo p, .demo-controls p, .control-panel p {
|
|
35
|
+
margin: 0 0 15px 0; color: #666; font-size: 13px; line-height: 1.6;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ===== 按钮样式 ===== */
|
|
39
|
+
.demo button, .demo-controls button, .control-panel button {
|
|
40
|
+
padding: 8px 16px; margin: 4px 6px 4px 0; min-width: 100px;
|
|
41
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
42
|
+
color: white; border: none; border-radius: 6px; cursor: pointer;
|
|
43
|
+
font-size: 13px; font-weight: 500; transition: all 0.2s ease;
|
|
44
|
+
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
|
|
45
|
+
}
|
|
46
|
+
.demo button:hover, .demo-controls button:hover, .control-panel button:hover {
|
|
47
|
+
transform: translateY(-2px);
|
|
48
|
+
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
|
|
49
|
+
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
|
|
50
|
+
}
|
|
51
|
+
.demo button:active, .demo-controls button:active, .control-panel button:active {
|
|
52
|
+
transform: translateY(0); box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
|
|
53
|
+
}
|
|
54
|
+
.demo button:focus, .demo-controls button:focus, .control-panel button:focus {
|
|
55
|
+
outline: 2px solid rgba(102, 126, 234, 0.5); outline-offset: 2px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* 次要按钮样式 */
|
|
59
|
+
.demo button.secondary, .demo-controls button.secondary, .control-panel button.secondary {
|
|
60
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
61
|
+
box-shadow: 0 2px 4px rgba(245, 87, 108, 0.2);
|
|
62
|
+
}
|
|
63
|
+
.demo button.secondary:hover, .demo-controls button.secondary:hover, .control-panel button.secondary:hover {
|
|
64
|
+
box-shadow: 0 4px 8px rgba(245, 87, 108, 0.3);
|
|
65
|
+
background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* 危险按钮样式 */
|
|
69
|
+
.demo button.danger, .demo-controls button.danger, .control-panel button.danger {
|
|
70
|
+
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
71
|
+
box-shadow: 0 2px 4px rgba(250, 112, 154, 0.2);
|
|
72
|
+
}
|
|
73
|
+
.demo button.danger:hover, .demo-controls button.danger:hover, .control-panel button.danger:hover {
|
|
74
|
+
box-shadow: 0 4px 8px rgba(250, 112, 154, 0.3);
|
|
75
|
+
background: linear-gradient(135deg, #fee140 0%, #fa709a 100%);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ===== 控制组样式 ===== */
|
|
79
|
+
.control-group {
|
|
80
|
+
margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e8e8e8;
|
|
81
|
+
}
|
|
82
|
+
.control-group:last-child {
|
|
83
|
+
border-bottom: none; margin-bottom: 0; padding-bottom: 0;
|
|
84
|
+
}
|
|
85
|
+
.control-group label {
|
|
86
|
+
display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #555;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ===== 输入框样式 ===== */
|
|
90
|
+
.demo input[type="text"], .demo input[type="number"],
|
|
91
|
+
.demo-controls input[type="text"], .demo-controls input[type="number"],
|
|
92
|
+
.control-panel input[type="text"], .control-panel input[type="number"] {
|
|
93
|
+
width: 100%; padding: 8px 12px; margin-bottom: 10px;
|
|
94
|
+
border: 1px solid #ddd; border-radius: 6px; font-size: 13px; transition: all 0.2s ease;
|
|
95
|
+
}
|
|
96
|
+
.demo input[type="text"]:focus, .demo input[type="number"]:focus,
|
|
97
|
+
.demo-controls input[type="text"]:focus, .demo-controls input[type="number"]:focus,
|
|
98
|
+
.control-panel input[type="text"]:focus, .control-panel input[type="number"]:focus {
|
|
99
|
+
outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.demo input[type="color"], .demo-controls input[type="color"], .control-panel input[type="color"] {
|
|
103
|
+
width: 50px; height: 36px; border: 2px solid #ddd; border-radius: 6px;
|
|
104
|
+
cursor: pointer; margin-right: 8px; vertical-align: middle; transition: all 0.2s ease;
|
|
105
|
+
}
|
|
106
|
+
.demo input[type="color"]:hover, .demo-controls input[type="color"]:hover, .control-panel input[type="color"]:hover {
|
|
107
|
+
border-color: #667eea; transform: scale(1.05);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.demo input[type="range"], .demo-controls input[type="range"], .control-panel input[type="range"] {
|
|
111
|
+
width: 100%; margin: 10px 0; cursor: pointer;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* ===== 选择框样式 ===== */
|
|
115
|
+
.demo select, .demo-controls select, .control-panel select {
|
|
116
|
+
padding: 8px 12px; margin: 0 8px 0 0;
|
|
117
|
+
border: 1px solid #ddd; border-radius: 6px; font-size: 13px;
|
|
118
|
+
background: white; cursor: pointer; transition: all 0.2s ease;
|
|
119
|
+
}
|
|
120
|
+
.demo select:focus, .demo-controls select:focus, .control-panel select:focus {
|
|
121
|
+
outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* ===== 分隔线样式 ===== */
|
|
125
|
+
.separator { margin: 15px 0; border-top: 1px solid #e8e8e8; border-bottom: none; }
|
|
126
|
+
|
|
127
|
+
/* ===== 响应式设计 ===== */
|
|
128
|
+
@media (max-width: 768px) {
|
|
129
|
+
.demo, .demo-controls, .control-panel {
|
|
130
|
+
top: 10px; left: 10px; right: 10px; max-width: none; padding: 15px;
|
|
131
|
+
}
|
|
132
|
+
.demo h2, .demo-controls h2, .control-panel h2 { font-size: 16px; }
|
|
133
|
+
.demo button, .demo-controls button, .control-panel button { width: 100%; margin: 4px 0; }
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@media (max-width: 480px) {
|
|
137
|
+
.demo, .demo-controls, .control-panel { padding: 12px; }
|
|
138
|
+
.demo button, .demo-controls button, .control-panel button {
|
|
139
|
+
font-size: 12px; padding: 6px 12px;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* ===== 工具提示样式 ===== */
|
|
144
|
+
.tooltip { position: relative; display: inline-block; }
|
|
145
|
+
.tooltip .tooltiptext {
|
|
146
|
+
visibility: hidden; width: 120px; background-color: #555; color: #fff;
|
|
147
|
+
text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1;
|
|
148
|
+
bottom: 125%; left: 50%; margin-left: -60px; opacity: 0;
|
|
149
|
+
transition: opacity 0.3s; font-size: 12px;
|
|
150
|
+
}
|
|
151
|
+
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
|
|
152
|
+
|
|
153
|
+
/* ===== 加载状态样式 ===== */
|
|
154
|
+
.loading {
|
|
155
|
+
display: inline-block; width: 16px; height: 16px;
|
|
156
|
+
border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
|
|
157
|
+
border-top-color: white; animation: spin 0.8s linear infinite;
|
|
158
|
+
}
|
|
159
|
+
@keyframes spin { to { transform: rotate(360deg); } }
|
|
160
|
+
|
|
161
|
+
/* ===== 返回按钮样式 ===== */
|
|
162
|
+
.back-button {
|
|
163
|
+
position: absolute; top: 20px; right: 20px; z-index: 1001;
|
|
164
|
+
padding: 10px 20px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);
|
|
165
|
+
border: none; border-radius: 8px; color: #667eea; font-size: 14px; font-weight: 500;
|
|
166
|
+
cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
|
|
167
|
+
gap: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.2s ease;
|
|
168
|
+
}
|
|
169
|
+
.back-button:hover {
|
|
170
|
+
background: rgba(255, 255, 255, 1); transform: translateY(-2px);
|
|
171
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
172
|
+
}
|
|
173
|
+
.back-button::before { content: '←'; font-size: 16px; }
|