feat ui设计稿

src/views/project/cpns/ProjectProgress.vue

@@ -37,8 +37,8 @@ function clampPercent(value: number): number {
     </div>
 
     <div class="project-progress__range">
-      <span class="text-secondary">开始时间：{{ props.startTime || '—' }}</span>
-      <span class="text-secondary">结束时间：{{ props.endTime || '—' }}</span>
+      <span>开始时间：{{ props.startTime || '—' }}</span>
+      <span>结束时间：{{ props.endTime || '—' }}</span>
     </div>
   </section>
 </template>
@@ -46,36 +46,43 @@ function clampPercent(value: number): number {
 <style lang="less" scoped>
 .project-progress {
   .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，条→文间距 8 设计px
+    padding-left: 9px;
+    font-size: 12px;
+    font-weight: 700;
+
+    &::before {
+      width: 3px;
+      height: 15px;
+    }
   }
 
-  // 设计稿：正文块相对标题再右缩进一级（设计 27 设计px × 0.77 ≈ 21px）
+  // 设计 13：正文与容器左缘对齐（只有标题被竖条顶出一级）
   &__head {
     .flex(row, space-between, center);
-    margin-top: @spacing-base;
-    padding-left: 21px;
+    margin-top: 20px;
   }
 
   &__label {
-    font-size: @font-size-sm;
+    font-size: 12px;
   }
 
+  // 设计 13：「65%」20 设计px × 0.77 ≈ 15px / 700
   &__percent {
-    font-size: @font-size-title;
-    font-weight: 600;
+    font-size: 15px;
+    font-weight: 700;
     color: @project-accent;
   }
 
   &__track {
     position: relative;
     height: 5px;
-    margin: @spacing-base 0 0 21px;
+    margin: 12px 0 0;
     border-radius: @radius-round;
     background: @project-track;
   }
@@ -87,11 +94,12 @@ function clampPercent(value: number): number {
     transition: width 0.3s;
   }
 
+  // 设计 13：末端白底蓝环圆点 ≈15 设计px × 0.77
   &__knob {
     position: absolute;
     top: 50%;
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
     border: 2px solid @project-accent;
     border-radius: @radius-round;
     background: @white;
@@ -101,8 +109,10 @@ function clampPercent(value: number): number {
 
   &__range {
     .flex(row, space-between, center);
-    margin-top: @spacing-lg;
-    font-size: @font-size-sm;
+    margin-top: 10px;
+    font-size: 11px;
+    // 设计 13：起止时间 (156,163,175)
+    color: @text-color-disabled;
   }
 }
 </style>