1
This commit is contained in:
126
index.html
126
index.html
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user