Bladeren bron

style(designer): 调整颜色面板样式,改进视觉一致性

- 增加色板项和主色块的尺寸及间距
- 统一字体大小和圆角半径
- 移除重复的字体大小定义
徐福静0235668 17 uur geleden
bovenliggende
commit
45d3a9b40b
1 gewijzigde bestanden met toevoegingen van 13 en 11 verwijderingen
  1. 13 11
      src/app/pages/designer/project-detail/project-detail.html

+ 13 - 11
src/app/pages/designer/project-detail/project-detail.html

@@ -658,8 +658,10 @@
                             </div>
                           </div>
                           <div class="pane right" style="flex:1;">
-                            <div class="pane-header" style="font-weight:600;margin-bottom:8px;">CAD图纸</div>
+                            <div class="pane-header" style="font-weight:600;margin-bottom:8px;">色彩分析报告</div>
                             <div class="pane-body scroller" style="max-height:240px;overflow:auto;border:1px solid #eee;border-radius:8px;padding:8px;">
+                              <!-- 保持CAD列表展示不变,仅将右侧标题改为色彩分析报告 -->
+                              <div class="subsection-title" style="font-weight:600;margin-bottom:8px;">CAD图纸</div>
                               @if (cadFiles.length > 0) {
                                 <div class="files-grid" style="display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:8px;">
                                   @for (file of cadFiles; track file.id) {
@@ -703,22 +705,22 @@
                                       </div>
                                     </div>
                                     <div class="palette">
-                                      <div class="section-title" style="font-weight:600;margin-bottom:6px;">色板</div>
-                                      <div class="palette-row" style="display:flex;gap:8px;flex-wrap:wrap;">
+                                      <div class="section-title" style="font-weight:600;margin-bottom:6px;font-size:12px;">色板</div>
+                                      <div class="palette-row" style="display:flex;gap:6px;flex-wrap:wrap;">
                                         @for (c of colorAnalysisResult.colors; track c.hex) {
-                                          <div class="palette-item" style="display:flex;align-items:center;gap:6px;padding:6px;border:1px solid #eee;border-radius:6px;">
-                                            <div class="swatch" [style.backgroundColor]="c.hex" style="width:20px;height:20px;border-radius:4px;border:1px solid #ddd;"></div>
-                                            <div class="hex" style="font-size:12px;color:#333;">{{ c.hex }}</div>
-                                            <div class="pct" style="font-size:12px;color:#666;">{{ c.percentage }}%</div>
+                                          <div class="palette-item" style="display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #eee;border-radius:4px;">
+                                            <div class="swatch" [style.backgroundColor]="c.hex" style="width:16px;height:16px;border-radius:3px;border:1px solid #ddd;"></div>
+                                            <div class="hex" style="font-size:10px;color:#333;">{{ c.hex }}</div>
+                                            <div class="pct" style="font-size:10px;color:#666;">{{ c.percentage }}%</div>
                                           </div>
                                         }
                                       </div>
                                     </div>
                                     <div class="dominant-color">
-                                      <div class="section-title" style="font-weight:600;margin-bottom:6px;">主色</div>
-                                      <div class="dominant-row" style="display:flex;align-items:center;gap:8px;">
-                                        <div class="swatch" [style.backgroundColor]="dominantColorHex || '#ccc'" style="width:28px;height:28px;border-radius:6px;border:1px solid #ddd;"></div>
-                                        <span class="hex" style="font-size:12px;color:#333;">
+                                      <div class="section-title" style="font-weight:600;margin-bottom:6px;font-size:12px;">主色</div>
+                                      <div class="dominant-row" style="display:flex;align-items:center;gap:6px;">
+                                        <div class="swatch" [style.backgroundColor]="dominantColorHex || '#ccc'" style="width:24px;height:24px;border-radius:4px;border:1px solid #ddd;"></div>
+                                        <span class="hex" style="font-size:11px;color:#333;">
                                           {{ dominantColorHex || (colorAnalysisResult.colors.length > 0 ? colorAnalysisResult.colors[0].hex : '未知') }}
                                         </span>
                                       </div>