From bb897ccc94f1e03f8e0d3aab684ca0129e2844fb Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Fri, 9 Oct 2026 10:32:49 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=90=88=E5=90=8C=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/project.ts                           | 28 ++++-----
 src/components/FileList.vue                  | 24 +++++++-
 src/styles/variables.less                    |  1 +
 src/views/project/after-sales.vue            | 38 +++++++------
 src/views/project/cpns/ProjectAfterSales.vue | 60 ++++++++++++++++++--
 src/views/project/cpns/ProjectFiles.vue      | 46 +++++++++++----
 src/views/project/cpns/ProjectFinance.vue    | 42 ++++++++++----
 src/views/project/cpns/ProjectInfoCard.vue   | 10 +++-
 src/views/project/cpns/ProjectMilestones.vue |  4 +-
 src/views/project/cpns/ProjectProgress.vue   |  7 ++-
 src/views/project/cpns/ProjectTeam.vue       | 11 ++--
 src/views/project/detail.vue                 | 10 +++-
 12 files changed, 211 insertions(+), 70 deletions(-)

diff --git a/src/api/project.ts b/src/api/project.ts
index 1f760fd..52eeb4a 100644
--- a/src/api/project.ts
+++ b/src/api/project.ts
@@ -12,18 +12,18 @@ import { request, serializeQuery } from '@/utils/request'
 import { formatDate } from '@/utils/format'
 
 // ─────────────────────────────────────────────────────────────────────────────
-//   GET /web/requirementPool/list  →  ProjectRequirementUserController#list
-//                                    → ProjectRequirementServiceImpl#queryUserPageList
-//     { requirementPage: { total, rows: RdProjectVo[] }, requirementStatistics: null }
-//     key           → like projectName OR projectNo OR requirementDesc
-//     pageNum/pageSize  → PageQuery
+//   GET /web/requirementPool/list  →  控制器 ProjectRequirementUserController#list
+//                                    → 服务层 ProjectRequirementServiceImpl#queryUserPageList
+//     返回 { requirementPage: { total, rows: RdProjectVo[] }, requirementStatistics: null }
+//     key           → 模糊匹配 projectName / projectNo / requirementDesc
+//     pageNum/pageSize  → 分页参数 PageQuery
 // ─────────────────────────────────────────────────────────────────────────────
 
 // ─────────────────────────────────────────────────────────────────────────────
 //   GET /web/requirementPool/getFilterConditions
-//     → ProjectRequirementUserController#getFilterConditions
-//     → ProjectRequirementServiceImpl#getFilterConditions
-//       businessTypeCounts: [{ businessTypeId, businessTypeLabel, count }] }
+//     → 控制器 ProjectRequirementUserController#getFilterConditions
+//     → 服务层 ProjectRequirementServiceImpl#getFilterConditions
+//       业务类型统计 businessTypeCounts: [{ businessTypeId, businessTypeLabel, count }]
 // ─────────────────────────────────────────────────────────────────────────────
 
 function pad(value: number): string {
@@ -87,12 +87,12 @@ export function getCompletedProjects(): Promise<RdProjectVo[]> {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-//   GET /web/requirementPool/get/progress/{id}     → ProjectRequirementProgressVo
-//   GET /web/requirementPool/get/files/{id}        → ProjectRequirementFilesVo
-//   GET /web/requirementPool/get/finance/{id}      → ProjectRequirementFinanceVo
-//   GET /web/requirementPool/get/afterSales/{id}   → ProjectRequirementAfterSalesVo
-//     → ProjectRequirementUserController#getProgress / #getFiles / #getFinance / #getAfterSales
-//     → ProjectRequirementServiceImpl#queryProgress / queryFiles / queryFinance / queryAfterSales
+//   GET /web/requirementPool/get/progress/{id}     → 进度详情 ProjectRequirementProgressVo
+//   GET /web/requirementPool/get/files/{id}        → 文件资料 ProjectRequirementFilesVo
+//   GET /web/requirementPool/get/finance/{id}      → 财务信息 ProjectRequirementFinanceVo
+//   GET /web/requirementPool/get/afterSales/{id}   → 售后信息 ProjectRequirementAfterSalesVo
+//     → 控制器 ProjectRequirementUserController#getProgress / #getFiles / #getFinance / #getAfterSales
+//     → 服务层 ProjectRequirementServiceImpl#queryProgress / queryFiles / queryFinance / queryAfterSales
 //
 // ─────────────────────────────────────────────────────────────────────────────
 
diff --git a/src/components/FileList.vue b/src/components/FileList.vue
index e05d793..5ba75e7 100644
--- a/src/components/FileList.vue
+++ b/src/components/FileList.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { FileInfo } from '@/types/api'
+import { fileLabelOf, fileToneOf } from '@/utils/fileMeta'
 import { formatFileSize } from '@/utils/format'
 
 interface Props {
   files: FileInfo[]
   showActions?: boolean
+  /** 左侧文件类型徽标（设计稿 #28 附件行有，#29/#27 同款） */
+  showBadge?: boolean
 }
 
-withDefaults(defineProps<Props>(), { showActions: true })
+withDefaults(defineProps<Props>(), { showActions: true, showBadge: false })
 
 const emit = defineEmits<{
   preview: [file: FileInfo]
@@ -19,6 +22,13 @@ const emit = defineEmits<{
 <template>
   <ul v-if="files.length > 0" class="file-list">
     <li v-for="(file, index) in files" :key="`${file.name}-${index}`" class="file-list__item">
+      <span
+        v-if="showBadge"
+        class="file-list__badge"
+        :style="{ color: fileToneOf(file), backgroundColor: `${fileToneOf(file)}1a` }"
+      >
+        {{ fileLabelOf(file) }}
+      </span>
       <div class="file-list__info">
         <span class="file-list__name" :title="file.name">{{ file.name }}</span>
         <span class="file-list__meta text-secondary">
@@ -54,6 +64,18 @@ const emit = defineEmits<{
     background: @demand-upload-bg;
   }
 
+  // 设计稿 #29/#27/#28 附件行：徽标 33.5×33.5。
+  &__badge {
+    .flex(row, center, center);
+    flex-shrink: 0;
+    width: 33.5px;
+    height: 33.5px;
+    border-radius: @radius-sm;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+  }
+
   &__info {
     .flex(column, flex-start);
     gap: 2px;
diff --git a/src/styles/variables.less b/src/styles/variables.less
index e7ef081..326099b 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -139,6 +139,7 @@
 @finance-meta-color: #6b7280;
 @finance-row-bg: #f7f8fa;
 @finance-paid: #16a34a;
+@finance-paid-bg: #e7f7ec;
 @finance-pending: #f59e0b;
 @finance-pending-amount: #f59e0b;
 @finance-idle: #b3bfc4;
diff --git a/src/views/project/after-sales.vue b/src/views/project/after-sales.vue
index fdb7952..162a931 100644
--- a/src/views/project/after-sales.vue
+++ b/src/views/project/after-sales.vue
@@ -306,11 +306,12 @@ onMounted(() => {
 <style lang="less" scoped>
 .after-sales {
   .flex(column, flex-start, stretch);
-  padding-bottom: 104px;
+  padding-bottom: 40px;
   background: @white;
 
+  // 设计稿 el40 面包屑 y=116，header 底 72 → padding-top 44px。
   &__breadcrumb {
-    padding-top: 41px;
+    padding-top: 44px;
     font-size: 24px;
     font-weight: 500;
     line-height: 27px;
@@ -330,12 +331,14 @@ onMounted(() => {
     color: @project-ink;
   }
 
+  // 设计稿 #26：副标题文字 x=728~1185，中心 ≈ 957 ≈ 内容区中心 960（居中）。
   &__subtitle {
     margin-top: 8px;
     font-size: 13px;
     font-weight: 400;
     line-height: 17px;
     color: @project-label;
+    text-align: center;
   }
 
   &__card {
@@ -394,6 +397,11 @@ onMounted(() => {
   &__field-head {
     .flex(row, flex-start, center);
     gap: 14px;
+
+    // 「附件上传」与 hint、按钮同行居左，不参与 __label 的居中对齐。
+    .after-sales__label {
+      text-align: left;
+    }
   }
 
   &__field-hint {
@@ -424,12 +432,13 @@ onMounted(() => {
     }
   }
 
+  // 设计稿 #26：字段标签水平居中（「售后类型*」x=931~988，中心 ≈ 输入框中心 960）。
   &__label {
     font-size: 13px;
     font-weight: 500;
     line-height: 17px;
     color: @project-ink;
-    text-align: left;
+    text-align: center;
   }
 
   &__required {
@@ -509,19 +518,14 @@ onMounted(() => {
     display: none;
   }
 
+  // 设计稿#26：协议行 y=779~790、按钮同排，均在卡片3之后的正常流里
+  // （无吸底、无上边框分隔线）。撑满内容区宽度。
   &__footer {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
     .flex(row, space-between, center);
     gap: @spacing-base;
-    height: 80px;
+    margin-top: 20px;
+    height: 38px;
     box-sizing: border-box;
-    padding: 0 121px 0 170px;
-    border-top: 1px solid @project-divider;
-    background: @white;
   }
 
   &__footer-tip {
@@ -550,13 +554,15 @@ onMounted(() => {
     gap: 8px;
     flex-shrink: 0;
 
+    // 设计稿 #26：「申请售后」按钮盒 x=1775~1847（w=72）、y=772~798（h=26），
+    // 右边界 1847距内容区右 1850 = 3px。三个按钮同款规格、间距 8px。
     :deep(.app-button) {
-      height: 38px;
-      padding: 0 18px;
-      border-radius: 8px;
+      height: 26px;
+      padding: 0 12px;
+      border-radius: 6px;
       font-size: 13px;
       font-weight: 500;
-      line-height: 18px;
+      line-height: 26px;
     }
 
     :deep(.app-button--default) {
diff --git a/src/views/project/cpns/ProjectAfterSales.vue b/src/views/project/cpns/ProjectAfterSales.vue
index 5de16cf..6db3e00 100644
--- a/src/views/project/cpns/ProjectAfterSales.vue
+++ b/src/views/project/cpns/ProjectAfterSales.vue
@@ -88,12 +88,19 @@ function onDeleteFile(): void {
 
       <div class="project-after-sales__field">
         <div class="project-after-sales__field-head">
-          <span class="project-after-sales__label">附件上传</span>
-          <span class="project-after-sales__field-hint">支持图片/文档/压缩包，大小不超过1G</span>
+          <div class="project-after-sales__field-head-left">
+            <span class="project-after-sales__label">附件上传</span>
+            <span class="project-after-sales__field-hint">支持图片/文档/压缩包，大小不超过1G</span>
+          </div>
+          <!--设计稿 #28 只读态仍画了「上传文档」按钮，用 disabled 表达不可上传 -->
+          <button class="project-after-sales__upload" type="button" disabled>
+            上传文档
+          </button>
         </div>
         <FileList
           v-if="afterSales.attachments.length > 0"
           :files="afterSales.attachments"
+          show-badge
           @preview="previewFile"
           @download="downloadFile"
           @delete="onDeleteFile"
@@ -204,9 +211,34 @@ function onDeleteFile(): void {
     gap: 20px;
   }
 
+  // 设计稿 #28：标签行「附件上传」左对齐 + hint，「上传文档」右对齐 x=1768~1837。
   &__field-head {
+    .flex(row, space-between, center);
+    gap: 14px;
+  }
+
+  &__field-head-left {
     .flex(row, flex-start, center);
     gap: 14px;                     // 149 − (70+65) = 14
+    min-width: 0;
+  }
+
+  // 设计稿：按钮 x=1768~1837（w=69），右边界距行右 1849.5 = 12.5px。
+  &__upload {
+    flex-shrink: 0;
+    height: 24px;
+    padding: 0 10.5px;
+    border: none;
+    border-radius: 6px;
+    background: @project-field-bg;
+    color: @project-cell;
+    font-size: 12px;
+    line-height: 24px;
+    box-sizing: border-box;
+    cursor: not-allowed;
+    opacity: 1;
+    // 按钮右 1837，行右 1849.5。
+    margin-right: 12.5px;
   }
 
   &__field-hint {
@@ -295,19 +327,33 @@ function onDeleteFile(): void {
     }
   }
 
+  // .file-list 默认 column + flex-start 会让item 按内容宽度收缩并居中，
+  // 设计稿 #28附件行是满宽（x=70~1849.5），这里改stretch。
   :deep(.file-list) {
+    .flex(column, flex-start, stretch);
     gap: 10px;
   }
 
+  // 设计稿 #28 附件行与 #29「项目文件」行同款：h=55、padding 0 18.5 / 0 22.5。
   :deep(.file-list__item) {
     height: 55px;
     box-sizing: border-box;
-    padding: 0 5.7px 0 16px;
+    gap: 14px;
+    padding: 0 18.5px 0 22.5px;
     border: none;
     border-radius: 8px;
     background: @finance-row-bg;
   }
 
+  // flex:1 让info 紧贴徽标（否则 space-between 会把它推到中间）。
+  // FileList.__info 只传了两个参数给 .flex()，第三个 align 默认 center
+  // → 文件名被水平居中；这里显式改回 flex-start（左对齐，对齐设计稿 x=140）。
+  :deep(.file-list__info) {
+    .flex(column, flex-start, flex-start);
+    flex: 1;
+    min-width: 0;
+  }
+
   :deep(.file-list__name) {
     font-size: 13px;
     line-height: 17px;
@@ -319,11 +365,17 @@ function onDeleteFile(): void {
     color: @project-muted;
   }
 
+  // 设计稿 #28：「预览」↔「下载」间距 47，「下载」↔「删除」间距 22。
   :deep(.file-list__actions) {
-    gap: 14px;
+    gap: 22px;
+  }
+
+  :deep(.file-list__btn:first-child) {
+    margin-right: 15.5px;
   }
 
   :deep(.file-list__btn) {
+    padding: 0;
     font-size: 12px;
     line-height: 16px;
     color: @project-label;
diff --git a/src/views/project/cpns/ProjectFiles.vue b/src/views/project/cpns/ProjectFiles.vue
index fa3f10f..691b6a7 100644
--- a/src/views/project/cpns/ProjectFiles.vue
+++ b/src/views/project/cpns/ProjectFiles.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { FileInfo } from '@/types/api'
+import { fileLabelOf, fileToneOf } from '@/utils/fileMeta'
 import { formatFileSize } from '@/utils/format'
 
 interface Props {
@@ -13,6 +14,12 @@ const emit = defineEmits<{
   preview: [index: number]
   download: [index: number]
 }>()
+
+function fileMeta(file: FileInfo): string {
+  const size = file.size ? formatFileSize(file.size) : ''
+  const time = file.uploadTime ? `上传于 ${file.uploadTime}` : ''
+  return [size, time].filter(Boolean).join(' · ')
+}
 </script>
 
 <template>
@@ -27,10 +34,16 @@ const emit = defineEmits<{
         :key="`${file.name}-${index}`"
         class="project-files__item"
       >
+        <span
+          class="project-files__badge"
+          :style="{ color: fileToneOf(file), backgroundColor: `${fileToneOf(file)}1a` }"
+        >
+          {{ fileLabelOf(file) }}
+        </span>
         <div class="project-files__info">
           <span class="project-files__name" :title="file.name">{{ file.name }}</span>
           <span class="project-files__meta">
-            {{ formatFileSize(file.size) }} · {{ file.uploadTime }}
+            {{ fileMeta(file) }}
           </span>
         </div>
         <div class="project-files__actions">
@@ -40,12 +53,6 @@ const emit = defineEmits<{
           <button class="project-files__btn" @click="emit('download', index)">
             下载
           </button>
-          <button
-            class="project-files__btn project-files__btn--danger"
-            @click="emit('delete', index)"
-          >
-            删除
-          </button>
         </div>
       </li>
       <li v-if="files.length === 0" class="project-files__empty text-secondary">
@@ -74,21 +81,38 @@ const emit = defineEmits<{
   &__list {
     .flex(column, flex-start, stretch);
     gap: 10px;
-    margin-top: 24px;
+    // tabs 盒底 305 → 设计稿首行顶 342，间距 37px。
+    margin-top: 37px;
   }
 
+  // 设计稿 el(项目文件 tab)：行盒 y=342 h=55，徽标 33.5×33.5 x=84，文件名 x=132。
   &__item {
     .flex(row, space-between, center);
     gap: @spacing-base;
     height: 55px;
     box-sizing: border-box;
-    padding: 0 5.6px 0 17px;
+    // 行左 70 → 徽标左 84 = 14px；徽标右 117.5 → 文件名左 132 = 14.5px。
+    // 行右 1849.5 → 「下载」字形右 1837，padding 13.5px。
+    padding: 0 13.5px 0 14px;
     border-radius: 8px;
     background: @finance-row-bg;
   }
 
+  &__badge {
+    .flex(row, center, center);
+    flex-shrink: 0;
+    width: 33.5px;
+    height: 33.5px;
+    border-radius: @radius-sm;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+  }
+
+  // flex:1 让 info 紧贴徽标（否则 space-between 会把它推到中间）。
   &__info {
     .flex(column, flex-start, stretch);
+    flex: 1;
     gap: 3px;
     min-width: 0;
   }
@@ -107,14 +131,16 @@ const emit = defineEmits<{
     color: @project-muted;
   }
 
+  // 设计稿：「预览」盒 1748.5~1779，「下载」盒 1814.5~1837 → 盒间距 35.5px。
   &__actions {
     .flex(row, flex-end, center);
-    gap: 14px;
+    gap: 35.5px;
     flex-shrink: 0;
   }
 
   &__btn {
     flex-shrink: 0;
+    padding: 0;
     font-size: 12px;
     line-height: 16px;
     color: @project-label;
diff --git a/src/views/project/cpns/ProjectFinance.vue b/src/views/project/cpns/ProjectFinance.vue
index f25d655..fd252fd 100644
--- a/src/views/project/cpns/ProjectFinance.vue
+++ b/src/views/project/cpns/ProjectFinance.vue
@@ -152,9 +152,12 @@ function fileMeta(file: FileInfo): string {
   .flex(column, flex-start, stretch);
   padding: 0;
 
+  // 设计稿 #27 的整页基线比 #30 低约 14px（同人不同次导出），
+  // 所以按「距 tabs 分割线的距离」对齐：#27 分割线 317.5 → 标题文字 337.5 = 20px。
+  // 减掉 1px 边框 → margin-top 20px（tabs 盒底 305 + 20 = 325）。
   &__title {
     .section-title();
-    margin-top: 22px;
+    margin-top: 20px;
     padding-left: 12px;
     font-size: 15px;
     font-weight: 700;
@@ -166,8 +169,9 @@ function fileMeta(file: FileInfo): string {
     }
   }
 
+  // 设计稿：标题底 355 → 卡片1 顶 380，间距 25px。
   &__title:first-child + &__plans {
-    margin-top: 21px;
+    margin-top: 25px;
   }
 
   &__plans + &__title,
@@ -180,9 +184,10 @@ function fileMeta(file: FileInfo): string {
     margin-top: 21px;
   }
 
+  // 设计稿：卡片1 底 518 → 卡片2 顶 533，间距 15px。
   &__plans {
     .flex(column, flex-start, flex-start);
-    gap: 14px;
+    gap: 15px;
   }
 
   &__plan {
@@ -196,8 +201,9 @@ function fileMeta(file: FileInfo): string {
     box-sizing: border-box;
     gap: 0;
 
+    // 设计稿：橙条底 677 → 卡片底 691，padding-bottom 14px。
     &:has(.project-finance__pay) {
-      padding-bottom: 0;
+      padding-bottom: 14px;
     }
 
     &:not(:has(.project-finance__field:nth-child(3))):not(:has(.project-finance__pay)) {
@@ -211,6 +217,7 @@ function fileMeta(file: FileInfo): string {
     &.is-paid {
       .project-finance__badge {
         color: @finance-paid;
+        background: @finance-paid-bg;
       }
 
       .project-finance__amount {
@@ -221,6 +228,7 @@ function fileMeta(file: FileInfo): string {
     &.is-pending {
       .project-finance__badge {
         color: @tag-warning-text;
+        background: @tag-warning-bg;
       }
 
       .project-finance__amount {
@@ -231,6 +239,7 @@ function fileMeta(file: FileInfo): string {
     &.is-idle {
       .project-finance__badge {
         color: @project-label;
+        background: @project-field-bg;
       }
 
       .project-finance__amount {
@@ -252,10 +261,14 @@ function fileMeta(file: FileInfo): string {
     .ellipsis();
   }
 
+  // 设计稿：徽标盒 56.5×20.5，右边界 422.5（卡片右 442 − padding 19.5）。
   &__badge {
     .flex(row, center, center);
     flex-shrink: 0;
-    margin-top: 2px;
+    height: 20.5px;
+    padding: 0 8px;
+    border-radius: 10.25px;
+    box-sizing: border-box;
     font-size: 11px;
     line-height: 15px;
     white-space: nowrap;
@@ -268,11 +281,12 @@ function fileMeta(file: FileInfo): string {
     gap: @spacing-base;
   }
 
+  // 子元素全部 position:absolute（脱离流），若不显式给宽度，
+  // flex-basis auto 会让容器宽度塌成 0，.ellipsis() 把文字全压没了。
   &__fields {
     position: relative;
-    flex: 0 0 auto;
+    flex: 1;
     min-width: 0;
-
     height: 53px;
 
     &:has(> :nth-child(3)) {
@@ -280,10 +294,11 @@ function fileMeta(file: FileInfo): string {
     }
   }
 
+  // 设计稿：金额左 345.5，字段右留到 339 → right: 76px（容器宽 415 − 339）。
   &__field {
     position: absolute;
     left: 0;
-    right: 0;
+    right: 76px;
     font-size: 11px;
     line-height: 15px;
     color: @project-label;
@@ -296,9 +311,11 @@ function fileMeta(file: FileInfo): string {
     &:nth-child(3) { top: 61px; }
   }
 
+  // 设计稿：金额顶 458.5，卡片顶 380 → 相对 78.5。
+  // 上游17(顶padding) + 19(标题) + 8(plan-body margin) = 44 → top 34.5。
   &__amount {
     position: absolute;
-    top: 29px;
+    top: 34.5px;
     right: 0;
     flex-shrink: 0;
     font-size: 20px;
@@ -307,15 +324,16 @@ function fileMeta(file: FileInfo): string {
     white-space: nowrap;
   }
 
+  // 设计稿：橙条 y=642~677（h=35），底距卡片底 691 = 14px。
   &__pay {
-    height: 34px;
-    margin: 11px -19px 0;
+    height: 35px;
+    margin: 10px -19px 0;
     border: none;
     border-radius: 0 0 13px 13px;
     background: @finance-pending;
     color: @white;
     font-size: 12px;
-    line-height: 34px;
+    line-height: 35px;
     cursor: pointer;
     transition: background 0.2s;
 
diff --git a/src/views/project/cpns/ProjectInfoCard.vue b/src/views/project/cpns/ProjectInfoCard.vue
index 69f1f36..59be202 100644
--- a/src/views/project/cpns/ProjectInfoCard.vue
+++ b/src/views/project/cpns/ProjectInfoCard.vue
@@ -59,6 +59,7 @@ function businessTypeText(project: Project): string {
   height: 67px;
   box-sizing: border-box;
 
+  // 设计稿 el51 "</>" 文字 (76.9, 209)；64px 盒内居中 → 盒 y=209+13−32≈195。
   &__logo {
     .flex(row, center, center);
     flex: 0 0 64px;
@@ -82,8 +83,9 @@ function businessTypeText(project: Project): string {
     min-width: 0;
   }
 
+  // 设计稿 el50 项目名 y=198（19px/700，行高 25）→ 卡片 y=195 + 3。
   &__name {
-    margin: 14px 0 0;
+    margin: 3px 0 0;
     font-size: 19px;
     font-weight: 700;
     line-height: 25px;
@@ -91,10 +93,11 @@ function businessTypeText(project: Project): string {
     .ellipsis();
   }
 
+  // 设计稿 el48~el45 meta 文字 y=231 → 项目名底 223+8。
   &__meta {
     .flex(row, flex-start, center);
     gap: 20px;
-    margin-top: 9px;
+    margin-top: 8px;
     font-size: 11px;
     font-weight: 500;
     line-height: 15px;
@@ -112,9 +115,10 @@ function businessTypeText(project: Project): string {
     font-weight: 400;
   }
 
+  // 设计稿 el43 "进行中" (1802, 211.5) 16px/700，右边界 1850= 容器右边界。
   &__status {
     flex-shrink: 0;
-    margin: 27.5px -21.6px 0 0;
+    margin: 16.5px 0 0;
     font-size: 16px;
     font-weight: 700;
     line-height: 21px;
diff --git a/src/views/project/cpns/ProjectMilestones.vue b/src/views/project/cpns/ProjectMilestones.vue
index 52d9bdf..89ba3ba 100644
--- a/src/views/project/cpns/ProjectMilestones.vue
+++ b/src/views/project/cpns/ProjectMilestones.vue
@@ -60,9 +60,11 @@ function linkDone(index: number): boolean {
   .flex(column, flex-start, stretch);
   padding: 0;
 
+  // 设计稿 el35 "项目进度（里程碑）" (82, 457) 15px/700。
+  // 上游时间行 y=406（底 421）→ 标题间距 36px。
   &__title {
     .section-title();
-    margin-top: 35px;
+    margin-top: 36px;
     padding-left: 12px;
     font-size: 15px;
     font-weight: 700;
diff --git a/src/views/project/cpns/ProjectProgress.vue b/src/views/project/cpns/ProjectProgress.vue
index 01a04b8..6b34340 100644
--- a/src/views/project/cpns/ProjectProgress.vue
+++ b/src/views/project/cpns/ProjectProgress.vue
@@ -45,6 +45,7 @@ function clampPercent(value: number): number {
   .flex(column, flex-start, stretch);
   padding: 0;
 
+  // 设计稿 el54 "开发进度" (82, 310) 15px/700，标题紧贴 tabs 分割线 y=303。
   &__title {
     .section-title();
     margin-top: 4px;
@@ -59,9 +60,10 @@ function clampPercent(value: number): number {
     }
   }
 
+  // 设计稿 el53 "总体进度" y=358，标题底 330 → 28px。
   &__head {
     .flex(row, space-between, baseline);
-    margin-top: 29px;
+    margin-top: 28px;
   }
 
   &__label {
@@ -70,8 +72,9 @@ function clampPercent(value: number): number {
     color: @project-label;
   }
 
+  // 设计稿 el52 "65%" (1798.8, 350) 20px/700；head 顶 358 → 上移 8px。
   &__percent {
-    margin-top: -9px;
+    margin-top: -8px;
     font-size: 20px;
     font-weight: 700;
     line-height: 26px;
diff --git a/src/views/project/cpns/ProjectTeam.vue b/src/views/project/cpns/ProjectTeam.vue
index fefa7c5..b9af95a 100644
--- a/src/views/project/cpns/ProjectTeam.vue
+++ b/src/views/project/cpns/ProjectTeam.vue
@@ -55,8 +55,9 @@ defineProps<Props>()
     .flex(row, flex-start, flex-start);
     flex-wrap: wrap;
     gap: 32px @team-gap;
-    margin-top: 33px;
-    margin-left: -3.5px;
+    // 设计稿 #30：项目团队标题文字 551~557.5 → 头像圆顶 641。
+    // 标题盒底 = 558 + 20 = 578，故间距 641 − 578 = 63px。
+    margin-top: 63px;
   }
 
   &__item {
@@ -76,8 +77,9 @@ defineProps<Props>()
     line-height: 22px;
   }
 
+  // 设计稿 #30：头像圆底 705 → 姓名文字顶 724，间距 19px。
   &__name {
-    margin-top: 0;
+    margin-top: 19px;
     max-width: 100%;
     font-size: 16px;
     font-weight: 600;
@@ -87,8 +89,9 @@ defineProps<Props>()
     .ellipsis();
   }
 
+  // 设计稿 #30：姓名文字底 738 → 角色文字顶 752，间距 14px。
   &__role {
-    margin-top: 3px;
+    margin-top: 14px;
     max-width: 100%;
     font-size: 12px;
     line-height: 19px;
diff --git a/src/views/project/detail.vue b/src/views/project/detail.vue
index ec692f1..1b7734d 100644
--- a/src/views/project/detail.vue
+++ b/src/views/project/detail.vue
@@ -179,23 +179,27 @@ onMounted(load)
   gap: 0;
   background: @white;
 
+  // 设计稿 el55 面包屑 y=116，header 底 72 → padding-top 44px。
   &__breadcrumb {
-    padding-top: 40px;
+    padding-top: 44px;
     font-size: 24px;
     font-weight: 500;
     line-height: 27px;
     color: @project-breadcrumb;
   }
 
+  // 设计稿 el51 logo 盒 y=195（面包屑盒底 = 72+44+27 = 143）→ 间距 52px。
   &__info {
-    margin-top: 56px;
+    margin-top: 52px;
   }
 
+  // 设计稿 el42 tab 文字 y=264，meta 文字底 231+15=246。
   &__tabs {
     .flex(row, flex-start, center);
     gap: 16.45px;
     height: 41px;
-    margin-top: 14px;
+    // 信息卡底 195+67=262，tab 文字顶 264 → tabs 盒顶 264，margin 2px。
+    margin-top: 2px;
     box-sizing: border-box;
     border-bottom: 1px solid @project-divider;
   }