zhengte/zhengte.babylonjs-sdk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增相机限制

Browse Source
This commit is contained in:
zguiy
2026-05-20 16:40:47 +08:00
parent 8dc9371cc5
commit b5b70251e2
7 changed files with 177 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
index.html
View File

@ -221,6 +221,50 @@
cursor: pointer;
}
/* 标签页样式 */
.tabs-container {
margin-bottom: 15px;
}
.tabs-header {
display: flex;
gap: 8px;
margin-bottom: 15px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.tab-btn {
padding: 10px 20px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.6);
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 13px;
transition: all 0.3s;
flex: 1;
margin-bottom: -2px;
}
.tab-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.tab-btn.active {
background: rgba(76, 175, 80, 0.2);
color: #fff;
border-bottom-color: #4CAF50;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* 进度条样式 */
#progress-container {
position: absolute;
@ -289,83 +333,76 @@
<div id="click-info-content"></div>
</div>
<!-- 棚子尺寸 -->
<div class="config-category">
<div class="category-header" data-category="size">
<span class="category-title">棚子尺寸</span>
<span class="category-arrow">▼</span>
<!-- 标签页容器 -->
<div class="tabs-container">
<div class="tabs-header">
<button class="tab-btn active" data-tab="size-1013">10x13 尺寸</button>
<button class="tab-btn" data-tab="size-1010">10x10 尺寸</button>
</div>
<div class="category-content">
<div class="option-group">
<button class="option-btn" data-option="size-1">3*3</button>
<button class="option-btn" data-option="size-2">3x6</button>
<button class="option-btn" data-option="size-3">10x13EM星空篷</button>
<button class="option-btn" data-option="size-4">全铁3x6</button>
<button class="option-btn" data-option="size-1">10x12</button>
<button class="option-btn" data-option="size-2">SPF111S1010W</button>
<button class="option-btn" data-option="size-3">SPF111S1013W</button>
<button class="option-btn" data-option="size-4">10x20星空篷</button>
<!-- 10x13 尺寸配置 -->
<div class="tab-content active" id="tab-size-1013">
<!-- 棚子尺寸 -->
<div class="config-category">
<div class="category-header active" data-category="size-1013">
<span class="category-title">棚子尺寸</span>
<span class="category-arrow expanded">▼</span>
</div>
<div class="category-content expanded">
<div class="option-group">
<button class="option-btn" data-option="size-1">SPF111S1013W</button>
<button class="option-btn" data-option="size-2">SPF111S1013TA</button>
<button class="option-btn" data-option="size-3">SPF111S1013C</button>
</div>
</div>
</div>
<!-- 百叶 -->
<div class="config-category">
<div class="category-header active" data-category="louver-1013">
<span class="category-title">百叶</span>
<span class="category-arrow expanded">▼</span>
</div>
<div class="category-content expanded">
<div class="option-group">
<button class="option-btn" data-option="color-1">SPFPDS13FTW</button>
<button class="option-btn" data-option="color-2">SPFPDS13FTC</button>
<button class="option-btn" data-option="color-3">SPFPDS10FTW</button>
<button class="option-btn" data-option="color-4">SPFPDS10FTC</button>
</div>
</div>
</div>
</div>
</div>
<!-- 棚子类型 -->
<div class="config-category">
<div class="category-header" data-category="type">
<span class="category-title">棚子类型</span>
<span class="category-arrow">▼</span>
</div>
<div class="category-content">
<div class="option-group">
<button class="option-btn" data-option="type-1">平顶</button>
<button class="option-btn" data-option="type-2">尖顶</button>
<button class="option-btn" data-option="type-3">弧形</button>
<button class="option-btn" data-option="type-4">异形</button>
<!-- 10x10 尺寸配置 -->
<div class="tab-content" id="tab-size-1010">
<!-- 棚子尺寸 -->
<div class="config-category">
<div class="category-header active" data-category="size-1010">
<span class="category-title">棚子尺寸</span>
<span class="category-arrow expanded">▼</span>
</div>
<div class="category-content expanded">
<div class="option-group">
<button class="option-btn" data-option="size-4">SPF111S1010C</button>
<button class="option-btn" data-option="size-5">SPF111S1010TA</button>
<button class="option-btn" data-option="size-6">SPF111S1010W</button>
</div>
</div>
</div>
</div>
</div>
<!-- 百叶 (单选) -->
<div class="config-category">
<div class="category-header" data-category="louver">
<span class="category-title">百叶</span>
<span class="category-arrow">▼</span>
</div>
<div class="category-content">
<div class="option-group">
<button class="option-btn" data-option="louver-1">SPFPDS13FTW</button>
<button class="option-btn" data-option="louver-2">SPFPDS13FTC</button>
<button class="option-btn" data-option="louver-3">3m下拉帘</button>
<button class="option-btn" data-option="louver-4">SPFSW13FTW</button>
<button class="option-btn" data-option="louver-4">SPFSW10FTW</button>
<button class="option-btn" data-option="louver-4">SPFPDS10FTC</button>
<button class="option-btn" data-option="louver-4">SPFPDS10FTW</button>
<div>13</div>
<button class="option-btn" data-option="color-1">SPFPDS13FTW</button>
<button class="option-btn" data-option="color-2">SPFPDS13FTC</button>
<div>10</div>
<button class="option-btn" data-option="color-1">SPFPDS10FTW</button>
<button class="option-btn" data-option="color-2">SPFPDS10FTC</button>
</div>
</div>
</div>
<!-- 配色 -->
<div class="config-category">
<div class="category-header" data-category="color">
<span class="category-title">配色</span>
<span class="category-arrow">▼</span>
</div>
<div class="category-content">
<div class="option-group">
<div>13</div>
<button class="option-btn" data-option="color-1">SPF111S1013W</button>
<div>10</div>
<button class="option-btn" data-option="color-3">SPF111S1010TA</button>
<!-- 百叶 -->
<div class="config-category">
<div class="category-header active" data-category="louver-1010">
<span class="category-title">百叶</span>
<span class="category-arrow expanded">▼</span>
</div>
<div class="category-content expanded">
<div class="option-group">
<button class="option-btn" data-option="color-3">SPFPDS10FTW</button>
<button class="option-btn" data-option="color-4">SPFPDS10FTC</button>
</div>
</div>
</div>
</div>
</div>
@ -504,6 +541,21 @@
// ========== UI 交互逻辑 ==========
// 标签页切换
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', function () {
const tabId = this.dataset.tab;
// 移除所有标签页的激活状态
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
// 激活当前标签页
this.classList.add('active');
document.getElementById('tab-' + tabId).classList.add('active');
});
});
// 折叠面板切换
document.querySelectorAll('.category-header').forEach(header => {
header.addEventListener('click', function () {