feat ui设计稿

src/views/project/cpns/ProjectMilestones.vue

@@ -50,7 +50,7 @@ function linkDone(index: number): boolean {
         </span>
         <span class="project-milestones__name">{{ node.name }}</span>
         <!-- 设计稿：已完成节点显示完成时间，其余显示状态文案 -->
-        <span class="project-milestones__sub text-secondary">{{ node.time || node.status }}</span>
+        <span class="project-milestones__sub">{{ node.time || node.status }}</span>
       </li>
     </ol>
 
@@ -61,25 +61,32 @@ function linkDone(index: number): boolean {
 </template>
 
 <style lang="less" scoped>
-// 节点列宽 = 设计稿相邻节点中心距（237 设计px × 0.77 ≈ 182px）
-@milestone-node-width: 182px;
-@milestone-dot-size: 32px;
+// 节点列宽 = 设计稿相邻节点中心距（356 设计px × 0.77 ≈ 274px）
+@milestone-node-width: 274px;
+@milestone-dot-size: 18px;
 
 .project-milestones {
   .flex(column, flex-start, stretch);
-  padding: @spacing-lg;
-  border-radius: @radius-lg;
-  background: @white;
-  box-shadow: @shadow-base;
+  // 设计 13：里程碑区块直接落在白底页面上，无卡片
+  padding: 0;
 
   &__title {
     .section-title();
+    // 设计 13：竖条 4×20 设计px、文字 15 设计px/700
+    padding-left: 9px;
+    font-size: 12px;
+    font-weight: 700;
+
+    &::before {
+      width: 3px;
+      height: 15px;
+    }
   }
 
-  // 设计稿：轨迹从卡片左侧正文位起、**固定节距**左对齐（不铺满整宽）
+  // 设计稿：轨迹从容器左缘起、**固定节距**左对齐（不铺满整宽）
   &__track {
     .flex(row, flex-start, flex-start);
-    margin-top: @spacing-lg;
+    margin-top: 16px;
     padding-bottom: @spacing-xs;
     overflow-x: auto;
     .scrollbar();
@@ -99,7 +106,7 @@ function linkDone(index: number): boolean {
       left: calc(50% + @milestone-dot-size / 2);
       width: calc(100% - @milestone-dot-size);
       height: 2px;
-      background: @milestone-idle;
+      background: @milestone-line;
     }
 
     &.is-link-done:not(:last-child)::after {
@@ -113,12 +120,15 @@ function linkDone(index: number): boolean {
     z-index: 1;
     width: @milestone-dot-size;
     height: @milestone-dot-size;
-    border: 2px solid @milestone-idle;
+    border: 3px solid @milestone-idle;
     border-radius: @radius-round;
     background: @white;
     box-sizing: border-box;
 
+    // 设计 13：已完成圆点略小（20 设计px）、实心绿
     .is-done & {
+      width: 16px;
+      height: 16px;
       border-color: @milestone-done;
       background: @milestone-done;
     }
@@ -130,39 +140,40 @@ function linkDone(index: number): boolean {
   }
 
   &__check {
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
   }
 
   &__name {
     margin-top: @spacing-sm;
     max-width: 100%;
-    font-size: @font-size-base;
-    font-weight: 600;
+    font-size: 12px;
+    font-weight: 400;
     text-align: center;
-    color: @text-color-secondary;
+    color: @text-color;
     .multi-ellipsis(2);
 
     .is-done & {
-      color: @milestone-done;
+      color: @success-color;
     }
 
     .is-active & {
       color: @project-accent;
+      font-weight: 600;
     }
   }
 
   &__sub {
     margin-top: @spacing-xs;
     max-width: 100%;
-    font-size: @font-size-sm;
+    font-size: 11px;
     text-align: center;
+    color: @text-color-disabled;
     .multi-ellipsis(2);
   }
 
   &__empty {
     margin-top: @spacing-base;
-    padding-left: 21px;
     font-size: @font-size-base;
   }
 }