feet:customer21

src/app/pages/designer/project-detail/project-detail.html

@@ -23,12 +23,48 @@
       </app-vertical-nav>
     </div>
 
-    <!-- 进度展示区域 - 移动到右侧 -->
+    <!-- 四个环节圆圈导航 -->
     <div class="header-center">
-      <div class="progress-display">
-        <span class="progress-status">{{ getProjectStatusText() }}</span>
-        <span class="progress-stage">{{ getCurrentStageText() }}</span>
-        <span class="progress-percentage">({{ getOverallProgress() }}%)</span>
+      <div class="stage-navigation">
+        <div class="stage-nav-item" 
+             [class.completed]="getSectionStatus('order') === 'completed'" 
+             [class.active]="getSectionStatus('order') === 'active'"
+             (click)="toggleSection('order')">
+          <div class="stage-nav-circle">
+            <span class="stage-nav-number">1</span>
+          </div>
+          <div class="stage-nav-label">订单创建</div>
+        </div>
+        <div class="stage-nav-connector" [class.completed]="getSectionStatus('requirements') === 'completed' || getSectionStatus('requirements') === 'active'"></div>
+        <div class="stage-nav-item" 
+             [class.completed]="getSectionStatus('requirements') === 'completed'" 
+             [class.active]="getSectionStatus('requirements') === 'active'"
+             (click)="toggleSection('requirements')">
+          <div class="stage-nav-circle">
+            <span class="stage-nav-number">2</span>
+          </div>
+          <div class="stage-nav-label">确认需求</div>
+        </div>
+        <div class="stage-nav-connector" [class.completed]="getSectionStatus('delivery') === 'completed' || getSectionStatus('delivery') === 'active'"></div>
+        <div class="stage-nav-item" 
+             [class.completed]="getSectionStatus('delivery') === 'completed'" 
+             [class.active]="getSectionStatus('delivery') === 'active'"
+             (click)="toggleSection('delivery')">
+          <div class="stage-nav-circle">
+            <span class="stage-nav-number">3</span>
+          </div>
+          <div class="stage-nav-label">交付执行</div>
+        </div>
+        <div class="stage-nav-connector" [class.completed]="getSectionStatus('aftercare') === 'completed' || getSectionStatus('aftercare') === 'active'"></div>
+        <div class="stage-nav-item" 
+             [class.completed]="getSectionStatus('aftercare') === 'completed'" 
+             [class.active]="getSectionStatus('aftercare') === 'active'"
+             (click)="toggleSection('aftercare')">
+          <div class="stage-nav-circle">
+            <span class="stage-nav-number">4</span>
+          </div>
+          <div class="stage-nav-label">售后</div>
+        </div>
       </div>
     </div>
     
@@ -371,6 +407,8 @@
 
           <!-- 右侧三分之二 - 制作流程进度 -->
           <div class="right-column">
+              <!-- 移除顶部四个圆圈，直接展示阶段内容 -->
+              
               <!-- 串式流程：10个阶段横向排列（保持） -->
               <div class="stage-progress-container">
                 @for (stage of getVisibleStages(); track stage) {

src/app/pages/designer/project-detail/project-detail.scss

@@ -1,6 +1,204 @@
 @use '../../../shared/styles/_ios-theme.scss' as *;
 @import './components/vertical-nav/vertical-nav-styles';
 
+/* 顶部导航栏四个环节圆圈样式 */
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  .stage-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px; // 减小间距以适配更紧凑的布局
+
+    .stage-nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      .stage-nav-circle {
+        width: 24px; // 减小圆圈大小
+        height: 24px; // 减小圆圈大小
+        border-radius: 50%;
+        background: #e5e5ea;
+        border: 2px solid #d1d1d6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 3px; // 减小底部间距
+        transition: all 0.3s ease;
+
+        .stage-nav-number {
+          font-size: 10px; // 减小字体大小
+          font-weight: 600;
+          color: #8e8e93;
+        }
+      }
+
+      .stage-nav-label {
+        font-size: 9px; // 减小字体大小
+        font-weight: 500;
+        color: #3c3c43;
+        text-align: center;
+        white-space: nowrap;
+      }
+
+      // 已完成状态
+      &.completed {
+        .stage-nav-circle {
+          background: #34c759;
+          border-color: #34c759;
+
+          .stage-nav-number {
+            color: white;
+          }
+        }
+
+        .stage-nav-label {
+          color: #34c759;
+          font-weight: 600;
+        }
+      }
+
+      // 当前活跃状态
+      &.active {
+        .stage-nav-circle {
+          background: #007aff;
+          border-color: #007aff;
+          box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
+
+          .stage-nav-number {
+            color: white;
+          }
+        }
+
+        .stage-nav-label {
+          color: #007aff;
+          font-weight: 600;
+        }
+      }
+
+      &:hover {
+        .stage-nav-circle {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .stage-nav-connector {
+      width: 20px; // 减小连接线宽度
+      height: 2px;
+      background: #d1d1d6;
+      margin: 0 3px; // 减小左右间距
+      margin-bottom: 12px; // 减小底部间距
+      transition: all 0.3s ease;
+
+      &.completed {
+        background: #34c759;
+      }
+    }
+  }
+}
+
+/* 横向圆形阶段进度条样式 */
+.horizontal-stage-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 24px 0;
+  padding: 20px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .stage-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+    .stage-circle {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: #e5e5ea;
+      border: 3px solid #d1d1d6;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 8px;
+      transition: all 0.3s ease;
+
+      .stage-number {
+        font-size: 18px;
+        font-weight: 600;
+        color: #8e8e93;
+      }
+    }
+
+    .stage-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: #3c3c43;
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    // 已完成状态
+    &.completed {
+      .stage-circle {
+        background: #34c759;
+        border-color: #34c759;
+
+        .stage-number {
+          color: white;
+        }
+      }
+
+      .stage-label {
+        color: #34c759;
+        font-weight: 600;
+      }
+    }
+
+    // 当前活跃状态
+    &.active {
+      .stage-circle {
+        background: #007aff;
+        border-color: #007aff;
+        box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
+
+        .stage-number {
+          color: white;
+        }
+      }
+
+      .stage-label {
+        color: #007aff;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .stage-connector {
+    width: 80px;
+    height: 3px;
+    background: #d1d1d6;
+    margin: 0 16px;
+    margin-bottom: 32px;
+    transition: all 0.3s ease;
+
+    &.completed {
+      background: #34c759;
+    }
+  }
+}
+
 /* 项目详情容器 */
 .project-detail-container {
   padding: 2%; // 使用百分比单位
@@ -1067,7 +1265,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: $ios-spacing-xl; // 增加底部间距
+  margin-bottom: $ios-spacing-md; // 缩小与内容的距离
   background-color: white;
   padding: $ios-spacing-lg;
   border-radius: $ios-radius-lg;
@@ -1246,23 +1444,25 @@
       // 原导航容器样式已移动到header-nav区域，此处保留空白以避免样式冲突
       
       .action-btn {
-        padding: 10px 16px;
+        padding: 4px 8px; // 进一步减小内边距
         border: none;
-        border-radius: 8px;
-        font-size: 14px;
+        border-radius: 4px; // 进一步减小圆角
+        font-size: 11px; // 进一步减小字体大小
         font-weight: 500;
         cursor: pointer;
         transition: all 0.2s ease-in-out;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        gap: 6px;
-        min-height: 40px;
+        gap: 3px; // 进一步减小间距
+        min-height: 28px; // 进一步减小最小高度
         white-space: nowrap;
         text-decoration: none;
         
         svg {
           flex-shrink: 0;
+          width: 14px; // 减小图标大小
+          height: 14px; // 减小图标大小
         }
         
         &:focus {
@@ -1883,7 +2083,7 @@
 
 /* 水平导航栏容器 */
 .horizontal-nav-container {
-  margin-bottom: $ios-spacing-lg;
+  margin-bottom: $ios-spacing-md; // 缩小与主体内容的间距
   background-color: white;
   border-radius: $ios-radius-lg;
   padding: $ios-spacing-md;

src/app/shared/components/consultation-order-panel/consultation-order-panel.component.scss

@@ -33,7 +33,8 @@ $ios-spacing-xl: 32px;
   border-radius: $ios-radius-lg;
   box-shadow: $ios-shadow-md;
   height: 100%;
-  max-height: 600px;
+  min-height: 800px;
+  max-height: none;
   display: flex;
   flex-direction: column;
   font-family: $ios-font-family;