This commit is contained in:
2026-05-22 13:33:13 +08:00
parent c504fca3de
commit 84c8752e0b
17 changed files with 361939 additions and 921 deletions

View File

@ -15,7 +15,7 @@
body {
font-family: Arial, sans-serif;
overflow: hidden;
background-color: rgb(255, 255, 255);
background-color: rgb(227 226 226);
}
#app {
@ -37,7 +37,7 @@
}
#config-panel {
width: 320px;
width: 400px;
background: rgba(30, 30, 45, 0.95);
backdrop-filter: blur(10px);
overflow-y: auto;
@ -265,6 +265,16 @@
display: block;
}
/* 系列分割线样式 */
.series-divider {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
text-align: center;
margin: 10px 0;
padding: 5px 0;
letter-spacing: 2px;
}
/* 进度条样式 */
#progress-container {
position: absolute;
@ -351,6 +361,8 @@
<span class="category-arrow expanded"></span>
</div>
<div class="category-content expanded">
<!-- 111 系列 -->
<div class="series-divider">----- 111 -----</div>
<div class="option-group">
<button class="option-btn" data-option="size-1">SPF111S1013W</button>
<button class="option-btn" data-option="size-2">SPF111S1013TA</button>
@ -358,20 +370,6 @@
</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>
</div>
</div>
</div>
</div>
<!-- 10x10 尺寸配置 -->
@ -383,6 +381,13 @@
<span class="category-arrow expanded"></span>
</div>
<div class="category-content expanded">
<!-- 80 系列 -->
<div class="series-divider">----- 80 -----</div>
<div class="option-group">
<button class="option-btn" data-option="size-4">SPF80S1010L</button>
</div>
<!-- 111 系列 -->
<div class="series-divider">----- 111 -----</div>
<div class="option-group">
<button class="option-btn" data-option="size-4">SPF111S1010C</button>
<button class="option-btn" data-option="size-5">SPF111S1010TA</button>
@ -390,20 +395,6 @@
</div>
</div>
</div>
<!-- 百叶 -->
<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>
<!-- 10x20 尺寸配置 -->
@ -415,25 +406,19 @@
<span class="category-arrow expanded"></span>
</div>
<div class="category-content expanded">
<!-- 80 系列 -->
<div class="series-divider">----- 80 -----</div>
<div class="option-group">
<button class="option-btn" data-option="size-4">SPF80S1020C</button>
</div>
<!-- 111 系列 -->
<div class="series-divider">----- 111 -----</div>
<div class="option-group">
<button class="option-btn" data-option="size-7">SPF111S1020C</button>
</div>
</div>
</div>
<!-- 百叶 -->
<div class="config-category">
<div class="category-header active" data-category="louver-1020">
<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-5">SPFPDS10FTW</button>
<button class="option-btn" data-option="color-6">SPFPDS10FTC</button>
</div>
</div>
</div>
</div>
<!-- 10x12 尺寸配置 -->
@ -445,22 +430,57 @@
<span class="category-arrow expanded"></span>
</div>
<div class="category-content expanded">
<!-- 88 系列 -->
<div class="series-divider">----- 88 -----</div>
<div class="option-group">
<button class="option-btn" data-option="size-10">SPF88S1012C</button>
</div>
</div>
</div>
</div>
</div>
<!-- 百叶 -->
<div class="config-category">
<div class="category-header active" data-category="louver-1012">
<span class="category-title">百叶</span>
<span class="category-arrow expanded"></span>
<!-- 百叶配件(独立区域) -->
<div class="louver-section" style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e0e0e0;">
<div class="config-title" style="font-size: 16px; margin-bottom: 15px;">百叶配件</div>
<!-- 10x13 百叶 -->
<div class="config-category">
<div class="category-header active" data-category="louver-1013">
<span class="category-title">13 百叶</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>
</div>
<div class="category-content expanded">
<div class="option-group">
<button class="option-btn" data-option="color-7">SPF80CS12FTC</button>
</div>
</div>
</div>
<!-- 10x10 百叶 -->
<div class="config-category">
<div class="category-header active" data-category="louver-1010">
<span class="category-title">10 百叶</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>
<!-- 10x12 百叶 -->
<div class="config-category">
<div class="category-header active" data-category="louver-1012">
<span class="category-title">12 百叶</span>
<span class="category-arrow expanded"></span>
</div>
<div class="category-content expanded">
<div class="option-group">
<button class="option-btn" data-option="color-7">SPF80CS12FTC</button>
</div>
</div>
</div>