diff --git a/src/components/CaseCard.vue b/src/components/CaseCard.vue
index a2b6f18..af8dbbf 100644
--- a/src/components/CaseCard.vue
+++ b/src/components/CaseCard.vue
@@ -97,16 +97,16 @@ const meta = computed<Array<{ label: string; value: string }>>(() => [
 
   &__tag {
     position: absolute;
-    top: 87px;
-    left: 22px;
-    height: 44px;
-    padding: 0 14px;
+    top: 12px;
+    left: 12px;
+    height: 28px;
+    padding: 0 @spacing-sm;
     border-radius: @radius-sm;
     background: @primary-strong;
     color: @white;
-    font-size: 28px;
+    font-size: @font-size-sm;
     font-weight: 500;
-    line-height: 44px;
+    line-height: 28px;
 
     &--hardware {
       background: @tag-hardware;
diff --git a/src/components/CasesFilter.vue b/src/components/CasesFilter.vue
index 42b1ef9..af66a57 100644
--- a/src/components/CasesFilter.vue
+++ b/src/components/CasesFilter.vue
@@ -292,15 +292,15 @@ function clearChips(): void {
 <style lang="less" scoped>
 .case-filter {
   flex-shrink: 0;
-  width: 516px;
-  padding: 15px 0 40px;
+  width: @cases-filter-width;
+  padding: @spacing-lg 0 @spacing-xl;
   border-radius: @radius-base;
   background: @white;
 
   &__head,
   &__group,
   &__actions {
-    padding: 0 50px 0 35px;
+    padding: 0 @spacing-lg;
   }
 
   &__head {
@@ -308,15 +308,15 @@ function clearChips(): void {
   }
 
   &__title {
-    font-size: 28px;
-    font-weight: 500;
-    line-height: 41px;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.4;
     color: @cases-filter-title;
   }
 
   &__link {
     color: @primary-strong;
-    font-size: 16px;
+    font-size: @font-size-sm;
 
     &:hover {
       color: @primary-hover;
@@ -324,32 +324,36 @@ function clearChips(): void {
   }
 
   &__group {
-    margin-top: 24px;
+    margin-top: @spacing-lg;
   }
 
   &__head + &__group {
-    margin-top: 11px;
+    margin-top: @spacing-base;
   }
 
   &__group-title {
-    font-size: 24px;
+    font-size: @font-size-md;
     font-weight: 500;
-    line-height: 35px;
+    line-height: 1.4;
     color: @cases-text;
   }
 
   &__rows {
-    margin-top: 19px;
+    margin-top: @spacing-sm;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
   }
 
   &__row {
     .flex(row, flex-start, center);
-    gap: 12px;
+    gap: @spacing-sm;
     width: 100%;
-    height: 50px;
-    padding: 0;
+    height: 40px;
+    padding: 0 @spacing-sm;
+    border-radius: @radius-sm;
     color: @cases-text;
-    font-size: 20px;
+    font-size: @font-size-base;
     text-align: left;
     transition: background 0.2s;
 
@@ -367,8 +371,8 @@ function clearChips(): void {
   &__box {
     position: relative;
     flex-shrink: 0;
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     border: 1px solid @cases-input-border;
     border-radius: 2px;
 
@@ -380,9 +384,9 @@ function clearChips(): void {
         content: '';
         position: absolute;
         top: 1px;
-        left: 4px;
-        width: 5px;
-        height: 8px;
+        left: 3px;
+        width: 4px;
+        height: 7px;
         border: solid @white;
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
@@ -397,7 +401,7 @@ function clearChips(): void {
 
   &__row-count {
     color: @cases-muted;
-    font-size: 16px;
+    font-size: @font-size-sm;
     font-weight: 500;
   }
 
@@ -409,17 +413,17 @@ function clearChips(): void {
   &__pills {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 24px 33px;
-    margin-top: 21px;
+    gap: @spacing-sm;
+    margin-top: @spacing-sm;
   }
 
   &__pill {
-    height: 53px;
+    height: 36px;
     padding: 0 @spacing-sm;
     border-radius: @radius-base;
     background: @pill-bg;
     color: @cases-text;
-    font-size: 20px;
+    font-size: @font-size-sm;
     .ellipsis();
     transition: all 0.2s;
 
@@ -429,15 +433,14 @@ function clearChips(): void {
 
     &.is-active,
     &.is-light {
-      background: @pill-selected-bg;
-      color: @white;
+      background: @filter-selected-bg;
+      color: @primary-strong;
       font-weight: 500;
     }
   }
 
   // ElDatePicker 有两层元素：外层 div.case-filter__date 与内部 .el-range-editor，
-  // 真正控制盒子尺寸的是内层。所以尺寸/背景/圆角都要用 :deep() 打到内层，
-  // 且不能写在 &__date 上——那样只命中外层，视觉上看不到变化。
+  // 真正控制盒子尺寸的是内层。所以尺寸/背景/圆角都要用 :deep() 打到内层。
   &__date-wrap {
     grid-column: 1 / -1;
     width: 100%;
@@ -448,7 +451,7 @@ function clearChips(): void {
       align-items: center;
       width: 100%;
       min-width: 0;
-      height: 53px;
+      height: 36px;
       padding: 0 @spacing-sm;
       border-radius: @radius-base;
       background: @input-bg;
@@ -461,7 +464,7 @@ function clearChips(): void {
   &__date {
     justify-content: center;
     min-width: 0;
-    height: 53px;
+    height: 36px;
     padding: 0 @spacing-sm;
     border-radius: @radius-base;
     background: @input-bg;
@@ -481,32 +484,33 @@ function clearChips(): void {
 
     :deep(.el-range-input) {
       flex: 0 1 auto;
-      width: 92px;
+      width: 88px;
       background: transparent;
       color: @cases-text;
-      font-size: 20px;
+      font-size: @font-size-sm;
 
       &::placeholder {
-        color: @cases-text;
+        color: @cases-muted;
       }
     }
 
     :deep(.el-range-separator) {
       flex: 0 0 auto;
       margin: 0 @spacing-xs;
-      color: @cases-text;
-      font-size: 20px;
-      line-height: 53px;
+      color: @cases-muted;
+      font-size: @font-size-sm;
+      line-height: 36px;
     }
 
     &.is-focus {
-      background: @input-bg;
+      background: @white;
+      box-shadow: 0 0 0 1px @cases-accent inset;
     }
   }
 
   &__selected {
-    margin: 23px 50px 0 35px;
-    padding: 16px 24px 21px;
+    margin: @spacing-lg @spacing-lg 0;
+    padding: @spacing-base;
     border-radius: @radius-base;
     background: @chips-panel-bg;
   }
@@ -517,30 +521,30 @@ function clearChips(): void {
 
   &__selected-title {
     color: @cases-text;
-    font-size: 20px;
+    font-size: @font-size-base;
     font-weight: 500;
   }
 
   &__selected-empty {
     margin-top: @spacing-sm;
     color: @cases-muted;
-    font-size: 14px;
+    font-size: @font-size-sm;
   }
 
   &__chips {
     .flex(row, flex-start, center);
     flex-wrap: wrap;
-    gap: 14px 13px;
-    margin-top: 16px;
+    gap: @spacing-sm;
+    margin-top: @spacing-sm;
   }
 
   &__chip {
-    height: 32px;
+    height: 28px;
     padding: 0 @spacing-sm;
     border-radius: @radius-round;
     background: @white;
     color: @cases-accent;
-    font-size: 14px;
+    font-size: @font-size-sm;
     font-weight: 500;
     transition: color 0.2s;
 
@@ -551,32 +555,32 @@ function clearChips(): void {
 
   &__actions {
     .flex(row, flex-start, center);
-    gap: 13px;
-    margin-top: 30px;
+    gap: @spacing-sm;
+    margin-top: @spacing-lg;
   }
 
   &__reset {
-    width: 135px;
-    height: 30px;
+    flex: 0 0 88px;
+    height: 32px;
     border-radius: @radius-round;
     background: @cases-reset-bg;
-    color: @black;
-    font-size: 14px;
+    color: @text-color;
+    font-size: @font-size-sm;
     font-weight: 400;
-    transition: filter 0.2s;
+    transition: color 0.2s;
 
     &:hover {
-      filter: brightness(0.96);
+      color: @primary-color;
     }
   }
 
   &__confirm {
     flex: 1;
-    height: 30px;
+    height: 32px;
     border-radius: @radius-round;
     background: @cases-confirm;
     color: @white;
-    font-size: 14px;
+    font-size: @font-size-sm;
     font-weight: 400;
     transition: background 0.2s;
 
diff --git a/src/components/CasesSearchBar.vue b/src/components/CasesSearchBar.vue
index d6c1147..9235ac1 100644
--- a/src/components/CasesSearchBar.vue
+++ b/src/components/CasesSearchBar.vue
@@ -62,29 +62,27 @@ const keyword = computed<string>({
 <style lang="less" scoped>
 .case-search {
   .flex(row, flex-start, center);
-  gap: 24px;
+  gap: @spacing-base;
   width: 100%;
-  height: 128px;
+  min-height: 64px;
   box-sizing: border-box;
-  // 设计稿 #31：输入框 x=653（栏左 606 + 47），重置 1305，搜索 1429
-  padding: 0 47px;
+  padding: 0 @spacing-lg;
   border-radius: @radius-base;
   background: @white;
 
   &__field {
     position: relative;
-    // 输入框右边界 1245 → 重置按钮 1305，设计稿间距 60
-    margin-right: 36px;
-    flex: 0 0 592px;
+    flex: 0 1 360px;
+    min-width: 0;
   }
 
   &__icon {
     position: absolute;
     top: 50%;
-    right: 16px;
+    right: @spacing-base;
     left: auto;
-    width: 27px;
-    height: 27px;
+    width: 18px;
+    height: 18px;
     transform: translateY(-50%);
     fill: none;
     stroke: @cases-icon;
@@ -93,15 +91,15 @@ const keyword = computed<string>({
 
   &__input {
     width: 100%;
-    height: 49px;
-    padding: 0 52px 0 20px;
+    height: 36px;
+    padding: 0 40px 0 @spacing-base;
     border: 1px solid @cases-input-border;
-    border-radius: @radius-sm;
-    background: @white;
+    border-radius: @radius-round;
+    background: @input-bg;
     color: @cases-text;
-    font-size: 20px;
+    font-size: @font-size-base;
     outline: none;
-    transition: border-color 0.2s;
+    transition: border-color 0.2s, background-color 0.2s;
 
     &::placeholder {
       color: @text-color-disabled;
@@ -109,22 +107,24 @@ const keyword = computed<string>({
 
     &:focus {
       border-color: @cases-accent;
+      background: @white;
     }
   }
 
   &__btn {
-    min-width: 100px;
-    height: 49px;
-    padding: 0 @spacing-base;
-    border-radius: @radius-sm;
-    background: @cases-accent;
-    color: @white;
-    font-size: 20px;
+    flex-shrink: 0;
+    min-width: 72px;
+    height: 36px;
+    padding: 0 @spacing-lg;
+    border-radius: @radius-round;
+    background: @pill-bg;
+    color: @text-color;
+    font-size: @font-size-base;
     font-weight: 400;
     transition: all 0.2s;
 
     &:hover {
-      background: @primary-hover;
+      color: @primary-color;
     }
 
     &--primary {
@@ -143,7 +143,7 @@ const keyword = computed<string>({
     gap: @spacing-xs;
     margin-left: auto;
     color: @heading-color;
-    font-size: 16px;
+    font-size: @font-size-base;
     transition: color 0.2s;
 
     &:hover,
diff --git a/src/components/FilterPanel.vue b/src/components/FilterPanel.vue
index 37e1c92..9e448c3 100644
--- a/src/components/FilterPanel.vue
+++ b/src/components/FilterPanel.vue
@@ -71,54 +71,55 @@ const emit = defineEmits<{
 
 <style lang="less" scoped>
 .filter-panel {
-  padding: 24px 36px;
+  padding: @spacing-lg;
   border-radius: @radius-base;
   background: @white;
 
   &__bar {
-    .flex(row, flex-start);
-    gap: 18px;
+    .flex(row, flex-start, center);
+    gap: @spacing-base;
   }
 
   &__input {
     flex: 1;
-    max-width: 456px;
-    margin-right: 28px;
-    height: 38px;
+    max-width: 360px;
+    margin-right: 0;
+    height: 36px;
     padding: 0 @spacing-base;
-    border: 1px solid @cases-input-border;
-    border-radius: @radius-sm;
-    background: @white;
-    color: @cases-text;
-    font-size: 15px;
+    border: 1px solid @border-color;
+    border-radius: @radius-round;
+    background: @input-bg;
+    color: @text-color;
+    font-size: @font-size-base;
     outline: none;
-    transition: border-color 0.2s;
+    transition: border-color 0.2s, background-color 0.2s;
 
     &::placeholder {
-      color: @cases-input-border;
+      color: @text-color-disabled;
     }
 
     &:focus {
-      border-color: @cases-accent;
+      border-color: @primary-color;
+      background: @white;
     }
   }
 
   &__btn {
-    min-width: 77px;
-    height: 38px;
-    padding: 0 @spacing-base;
-    border-radius: @radius-sm;
-    background: @cases-accent;
-    color: @white;
-    font-size: 15px;
+    min-width: 72px;
+    height: 36px;
+    padding: 0 @spacing-lg;
+    border-radius: @radius-round;
+    background: @pill-bg;
+    color: @text-color;
+    font-size: @font-size-base;
     transition: all 0.2s;
 
     &:hover {
-      background: @primary-hover;
+      color: @primary-color;
     }
 
     &--primary {
-      background: @cases-accent;
+      background: @primary-color;
       color: @white;
 
       &:hover {
@@ -131,26 +132,26 @@ const emit = defineEmits<{
   &__chips {
     .flex(row, flex-start, center);
     flex-wrap: wrap;
-    gap: 11px 10px;
+    gap: @spacing-sm;
     margin-top: @spacing-base;
-    padding: 12px 18px 16px;
+    padding: @spacing-base;
     border-radius: @radius-base;
     background: @chips-panel-bg;
-    font-size: 15px;
+    font-size: @font-size-base;
   }
 
   &__chips-label {
-    color: @cases-text;
+    color: @text-color;
     font-weight: 500;
   }
 
   &__chip {
-    height: 25px;
+    height: 28px;
     padding: 0 @spacing-sm;
     border-radius: @radius-round;
     background: @white;
-    color: @cases-accent;
-    font-size: 11px;
+    color: @primary-color;
+    font-size: @font-size-sm;
     font-weight: 500;
     transition: all 0.2s;
 
diff --git a/src/components/PageHead.vue b/src/components/PageHead.vue
index dc74a4a..7c7af54 100644
--- a/src/components/PageHead.vue
+++ b/src/components/PageHead.vue
@@ -23,25 +23,25 @@ defineProps<Props>()
 <style lang="less" scoped>
 .page-head {
   background: @white;
-  padding-bottom: 72px;
+  padding: @spacing-lg 0;
+  border-bottom: 1px solid @border-color;
 
   &__title {
-    padding-top: 52px;
-    font-size: 22px;
-    font-weight: 700;
-    line-height: 29px;
-    color: @finance-ink;
+    padding-top: 0;
+    font-size: @font-size-title;
+    font-weight: 600;
+    line-height: 1.3;
+    color: @heading-color;
   }
 
   &__slogan {
-    // 设计稿 #20：slogan 水平居中（当前唯一使用方为财务中心页）
-    text-align: center;
+    text-align: left;
     padding-bottom: 0;
-    margin-top: 9px;
-    font-size: 13px;
+    margin-top: @spacing-sm;
+    font-size: @font-size-base;
     font-weight: 400;
-    line-height: 17px;
-    color: @finance-muted-text;
+    line-height: 1.5;
+    color: @text-color-secondary;
   }
 }
 </style>
diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index 25adcd6..0db6fc9 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -67,18 +67,18 @@ function go(page: number): void {
 .pagination {
   .flex(row, center);
   gap: @spacing-xs;
-  padding: 12px 0;
+  padding: @spacing-base 0;
 
   &__btn {
     .flex(row, center);
-    min-width: 20px;
-    height: 25px;
-    padding: 0 3px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
     border: 1px solid @border-color;
     border-radius: @radius-sm;
     background: @white;
-    color: @text-color-secondary;
-    font-size: 11px;
+    color: @text-color;
+    font-size: @font-size-sm;
     transition: all 0.2s;
 
     &:hover:not(:disabled):not(.is-ellipsis) {
@@ -87,9 +87,10 @@ function go(page: number): void {
     }
 
     &.is-active {
-      border-color: @cases-page-active-bg;
-      background: @cases-page-active-bg;
+      border-color: @primary-strong;
+      background: @primary-light;
       color: @primary-strong;
+      font-weight: 500;
     }
 
     &.is-ellipsis {
diff --git a/src/components/SmsCodeInput.vue b/src/components/SmsCodeInput.vue
index 41509c8..cc75a2c 100644
--- a/src/components/SmsCodeInput.vue
+++ b/src/components/SmsCodeInput.vue
@@ -38,7 +38,7 @@ function onGetCode(): void {
     min-width: 0;
     height: 40px;
     padding: 0 12px;
-    border: 1px solid #dde1e7;
+    border: 1px solid @border-color;
     border-radius: @radius-sm;
     background: @white;
     font-size: 13px;
diff --git a/src/styles/variables.less b/src/styles/variables.less
index 28f3de4..5832031 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -90,10 +90,10 @@
 @shadow-lg: 0 4px 16px rgba(31, 39, 51, 0.12);
 
 @filter-selected-bg: #e7eeff;
-@pill-bg: #ededed;
+@pill-bg: #f5f6f8;
 @pill-selected-bg: #075cff;
 @chips-panel-bg: #eaf1ff;
-@input-bg: #ededed;
+@input-bg: #f5f6f8;
 @tag-hardware: #4caf50;
 @tag-iot: #5720ba;
 @tag-manufacturing: #ff8f1f;
@@ -105,19 +105,23 @@
 @cases-filter-title: #222222;
 @cases-text: #333333;
 @cases-muted: #666666;
-@cases-input-border: #999999;
+@cases-input-border: #cdd3dd;
 @cases-icon: #797979;
-@cases-reset-bg: #f0f0f0;
-@cases-card-border: #e1dfdf;
-@cases-card-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+@cases-reset-bg: #f5f6f8;
+@cases-card-border: #e4e7ec;
+@cases-card-shadow: 0 2px 8px rgba(31, 39, 51, 0.06);
 @cases-page-active-bg: #e0e9fa;
+@cases-filter-width: 320px;
 
 @demand-selected-bg: #024fff;
 @demand-accent: #024fff;
 @demand-secondary-bg: #075cff;
 
-@project-table-head-bg: #e8e8e8;
-@project-table-line: #bbbbbb;
+@project-table-head-bg: #f7f8fa;
+@project-table-line: #e4e7ec;
+@project-filter-width: 320px;
+@project-pill-bg: #f5f6f8;
+@project-input-bg: #f5f6f8;
 
 @project-accent: #024fff;
 @project-track: #edeff2;
@@ -181,8 +185,8 @@
 @demand-ink: #121212;
 @demand-heading: #333333;
 @demand-subtitle: #666666;
-@demand-line: #999999;
-@demand-upload-bg: #ededed;
+@demand-line: #e4e7ec;
+@demand-upload-bg: #f5f6f8;
 @demand-radio-idle: #c7c2c2;
 @auth-gradient-from: #505be8;
 @auth-gradient-to: #8b3fe8;
@@ -208,7 +212,7 @@
 @project-cell: #4b5563;
 @project-card: #ffffff;
 @project-field-bg: #f3f4f6;
-@project-input-border: #dde1e7;
+@project-input-border: #e4e7ec;
 @project-head-bg: #f7f8fa;
 @project-upload-tag: #ef4444;
 @project-banner-soft: #fdeeee;
@@ -223,12 +227,12 @@
 
 @contract-accent: #075cff;
 @contract-muted: #666666;
-@contract-head-text: #222222;
+@contract-head-text: #666666;
 @contract-cell-text: #333333;
-@contract-line: #999999;
-@contract-table-head-bg: #ededed;
+@contract-line: #e4e7ec;
+@contract-table-head-bg: #f7f8fa;
 @contract-placeholder: #b3b9c4;
-@contract-reset-bg: #eef0f3;
+@contract-reset-bg: #f5f6f8;
 @contract-qr-bg: #d6d6d6;
 
 @finance-hero-gradient: linear-gradient(
@@ -239,8 +243,8 @@
 );
 @finance-chart-bar: #4a90c4;
 @finance-chart-grid: #edeef2;
-@finance-table-head-bg: #f1f3f5;
-@finance-field-bg: #f3f4f6;
+@finance-table-head-bg: #f7f8fa;
+@finance-field-bg: #f5f6f8;
 @finance-page-active: #d5e2fe;
 @finance-summary-cta: #ffb754;
 @finance-result-circle: #7ed321;
@@ -252,7 +256,7 @@
 @profile-nav-active-bg: #e7eeff;
 @profile-card-border: #f0f1f3;
 @profile-line: #e5e7eb;
-@profile-input-border: #dde1e7;
+@profile-input-border: #e4e7ec;
 @profile-radius: 6px;
 @profile-page-bg: #f4f5f9;
 @profile-ink: #1f2937;
diff --git a/src/views/cases/cpns/CaseHero.vue b/src/views/cases/cpns/CaseHero.vue
index 4b72797..08a5540 100644
--- a/src/views/cases/cpns/CaseHero.vue
+++ b/src/views/cases/cpns/CaseHero.vue
@@ -30,18 +30,26 @@ const coverStyle = computed(() =>
 <style lang="less" scoped>
 .case-hero {
   position: relative;
-  width: 100%;
-  height: 260px;
+  width: auto;
+  max-width: @home-content;
+  height: 180px;
+  margin: 0 @home-gutter;
+  border-radius: @radius-base;
+
+  @media (max-width: 1600px) {
+    margin: 0 @spacing-lg;
+  }
   background-color: @primary-color;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  overflow: hidden;
 
   &::after {
     content: '';
     position: absolute;
     inset: 0;
-    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 42%, rgba(15, 23, 42, 0.55));
+    background: linear-gradient(180deg, fade(@black, 0%) 40%, fade(@black, 45%));
   }
 
   &__inner {
@@ -64,9 +72,9 @@ const coverStyle = computed(() =>
 
   &__title {
     color: @white;
-    font-size: @font-size-xxl;
+    font-size: @font-size-title;
     font-weight: 600;
-    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
+    text-shadow: 0 1px 8px fade(@black, 35%);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
diff --git a/src/views/cases/detail.vue b/src/views/cases/detail.vue
index 6ba43c6..403c0a1 100644
--- a/src/views/cases/detail.vue
+++ b/src/views/cases/detail.vue
@@ -75,12 +75,14 @@ onMounted(load)
 
 <style lang="less" scoped>
 .case-detail {
-  padding-bottom: @spacing-xxl;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__crumb {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    font-size: @font-size-base;
+    padding-top: @spacing-base;
+    padding-bottom: @spacing-base;
+    font-size: @font-size-sm;
   }
 
   &__main {
@@ -91,11 +93,11 @@ onMounted(load)
 
   &__cta {
     width: 100%;
-    height: 44px;
-    border-radius: @radius-base;
+    height: 40px;
+    border-radius: @radius-round;
     background: @primary-color;
     color: @white;
-    font-size: @font-size-lg;
+    font-size: @font-size-base;
     cursor: pointer;
     transition: background 0.2s;
 
diff --git a/src/views/cases/index.vue b/src/views/cases/index.vue
index d08f28f..6b81fa5 100644
--- a/src/views/cases/index.vue
+++ b/src/views/cases/index.vue
@@ -109,53 +109,49 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .cases {
-  padding-bottom: 78px;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__hero {
-    height: 179px;
     box-sizing: border-box;
-    padding-top: 32px;
+    padding: @spacing-lg 0;
     background: @white;
+    border-bottom: 1px solid @border-color;
   }
 
-  // 设计稿 #31：hero 标题 x=112、副标题 x=112；
-  // 主体筛选栏 x=70、右侧操作区右边界 1850。两套留白并存，
-  // 所以 hero 内容单独内缩，不动全局 .container 的 70px 留白。
   &__hero-inner {
-    padding-left: 112px;
-    padding-right: 112px;
+    padding-left: @spacing-xl;
+    padding-right: @spacing-xl;
   }
 
   &__title {
     margin: 0;
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 52px;
+    font-size: @font-size-title;
+    font-weight: 600;
+    line-height: 1.3;
     color: @cases-hero-title;
   }
 
   &__slogan {
-    margin: 15px 0 0;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 37px;
+    margin: @spacing-sm 0 0;
+    font-size: @font-size-base;
+    font-weight: 400;
+    line-height: 1.5;
     color: @cases-muted;
   }
 
   &__body {
     .flex(row, flex-start, flex-start);
-    gap: 20px;
-    padding-top: 20px;
+    gap: @spacing-lg;
+    padding-top: @spacing-lg;
   }
 
   &__main {
-    // 设计稿：右侧操作区 x=606 w=1244（右边界 1850，与筛选栏区留白 70 对称）。
-    // mixin 签名是 .flex(direction; justify; align)，第三参才是 align-items。
-// 纵向排列时 justify 无意义，align 用 stretch 让子项撑满 1244。
     .flex(column, flex-start, stretch);
     flex: 1;
     min-width: 0;
-    gap: 24px;
+    gap: @spacing-lg;
   }
 
   &__pager {
diff --git a/src/views/contract/cpns/ContractInfoCard.vue b/src/views/contract/cpns/ContractInfoCard.vue
index 36a25e7..d5da51b 100644
--- a/src/views/contract/cpns/ContractInfoCard.vue
+++ b/src/views/contract/cpns/ContractInfoCard.vue
@@ -25,167 +25,172 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
 
 <template>
   <div class="contract-info">
-    <h3 class="contract-info__section contract-info__section--1">
-      <span class="contract-info__step">01</span>
-      <span class="contract-info__section-title">合同信息</span>
-    </h3>
-    <div class="contract-info__field contract-info__field--1 contract-info__field--l">
-      <span class="contract-info__label">项目名称</span>
-      <span class="contract-info__value">{{ contract.contractName }}</span>
-    </div>
-    <div class="contract-info__field contract-info__field--1 contract-info__field--r">
-      <span class="contract-info__label">合同类型</span>
-      <span class="contract-info__value">{{ contract.contractType }}</span>
-    </div>
-    <div class="contract-info__field contract-info__field--2 contract-info__field--l">
-      <span class="contract-info__label">合同编号</span>
-      <span class="contract-info__value">{{ contract.contractNo }}</span>
-    </div>
-    <div class="contract-info__field contract-info__field--2 contract-info__field--r">
-      <span class="contract-info__label">签订日期</span>
-      <span class="contract-info__value">{{ contract.signDate || '—' }}</span>
-    </div>
-    <div class="contract-info__field contract-info__field--3 contract-info__field--l">
-      <span class="contract-info__label">生效日期</span>
-      <span class="contract-info__value">{{ contract.effectiveDate }}</span>
-    </div>
-    <div class="contract-info__field contract-info__field--3 contract-info__field--r">
-      <span class="contract-info__label">到期日期</span>
-      <span class="contract-info__value">{{ contract.expiryDate }}</span>
-    </div>
-    <div class="contract-info__field contract-info__field--4 contract-info__field--l">
-      <span class="contract-info__label">合同状态</span>
-      <StatusTag :label="contract.signStatus" :variant="SIGN_VARIANTS[contract.signStatus]" />
-    </div>
+    <section class="contract-info__section">
+      <h3 class="contract-info__heading">
+        <span class="contract-info__step">01</span>
+        <span>合同信息</span>
+      </h3>
+      <div class="contract-info__grid">
+        <div class="contract-info__field">
+          <span class="contract-info__label">项目名称</span>
+          <span class="contract-info__value">{{ contract.contractName }}</span>
+        </div>
+        <div class="contract-info__field">
+          <span class="contract-info__label">合同类型</span>
+          <span class="contract-info__value">{{ contract.contractType }}</span>
+        </div>
+        <div class="contract-info__field">
+          <span class="contract-info__label">合同编号</span>
+          <span class="contract-info__value">{{ contract.contractNo }}</span>
+        </div>
+        <div class="contract-info__field">
+          <span class="contract-info__label">签订日期</span>
+          <span class="contract-info__value">{{ contract.signDate || '—' }}</span>
+        </div>
+        <div class="contract-info__field">
+          <span class="contract-info__label">生效日期</span>
+          <span class="contract-info__value">{{ contract.effectiveDate }}</span>
+        </div>
+        <div class="contract-info__field">
+          <span class="contract-info__label">到期日期</span>
+          <span class="contract-info__value">{{ contract.expiryDate }}</span>
+        </div>
+        <div class="contract-info__field">
+          <span class="contract-info__label">合同状态</span>
+          <StatusTag :label="contract.signStatus" :variant="SIGN_VARIANTS[contract.signStatus]" />
+        </div>
+      </div>
+    </section>
 
-    <h3 class="contract-info__section contract-info__section--2">
-      <span class="contract-info__step">02</span>
-      <span class="contract-info__section-title">关联项目</span>
-    </h3>
-    <div class="contract-info__field contract-info__field--5 contract-info__field--l">
-      <span class="contract-info__label">
-        项目名称
-        <button class="contract-info__link" @click="emit('viewProject')">查看详情</button>
-      </span>
-      <span class="contract-info__value">{{ contract.relatedProjectName }}</span>
-    </div>
-    <div class="contract-info__field contract-info__field--5 contract-info__field--r">
-      <span class="contract-info__label">项目编号</span>
-      <span class="contract-info__value">{{ contract.projectNo }}</span>
-    </div>
-
-    <h3 class="contract-info__section contract-info__section--3">
-      <span class="contract-info__step">03</span>
-      <span class="contract-info__section-title">合同文件</span>
-    </h3>
-    <ul class="contract-info__files">
-      <li
-        v-for="(file, index) in contract.files"
-        :key="`${file.name}-${index}`"
-        class="contract-info__file"
-      >
-        <div class="contract-info__file-info">
-          <span class="contract-info__file-name" :title="file.name">{{ file.name }}</span>
-          <span class="contract-info__file-meta">
-            {{ formatFileSize(file.size) }} · {{ file.uploadTime }}
+    <section class="contract-info__section">
+      <h3 class="contract-info__heading">
+        <span class="contract-info__step">02</span>
+        <span>关联项目</span>
+      </h3>
+      <div class="contract-info__grid">
+        <div class="contract-info__field">
+          <span class="contract-info__label">
+            项目名称
+            <button
+              type="button"
+              class="contract-info__link"
+              @click="emit('viewProject')"
+            >
+              查看详情
+            </button>
           </span>
+          <span class="contract-info__value">{{ contract.relatedProjectName }}</span>
         </div>
-        <div class="contract-info__file-actions">
-          <button class="contract-info__link" @click="emit('preview', file)">
-            预览
-          </button>
-          <button class="contract-info__link" @click="emit('download', file)">
-            下载
-          </button>
+        <div class="contract-info__field">
+          <span class="contract-info__label">项目编号</span>
+          <span class="contract-info__value">{{ contract.projectNo }}</span>
         </div>
-      </li>
-      <li v-if="contract.files.length === 0" class="contract-info__empty">
-        暂无合同文件
-      </li>
-    </ul>
+      </div>
+    </section>
+
+    <section class="contract-info__section">
+      <h3 class="contract-info__heading">
+        <span class="contract-info__step">03</span>
+        <span>合同文件</span>
+      </h3>
+      <ul class="contract-info__files">
+        <li
+          v-for="(file, index) in contract.files"
+          :key="`${file.name}-${index}`"
+          class="contract-info__file"
+        >
+          <div class="contract-info__file-info">
+            <span class="contract-info__file-name" :title="file.name">{{ file.name }}</span>
+            <span class="contract-info__file-meta">
+              {{ formatFileSize(file.size) }} · {{ file.uploadTime }}
+            </span>
+          </div>
+          <div class="contract-info__file-actions">
+            <button
+              type="button"
+              class="contract-info__link"
+              @click="emit('preview', file)"
+            >
+              预览
+            </button>
+            <button
+              type="button"
+              class="contract-info__link"
+              @click="emit('download', file)"
+            >
+              下载
+            </button>
+          </div>
+        </li>
+        <li v-if="contract.files.length === 0" class="contract-info__empty">
+          暂无合同文件
+        </li>
+      </ul>
+    </section>
   </div>
 </template>
 
 <style lang="less" scoped>
 .contract-info {
-  position: relative;
-  width: 1780px;
-  height: 1152px;
-  margin-top: 21px;
-  border-radius: @radius-lg;
+  width: 100%;
+  margin-top: @spacing-base;
+  padding: @spacing-xl;
+  border-radius: @radius-base;
   background: @white;
   box-sizing: border-box;
 
-  &__section {
-    position: absolute;
-    left: 54px;
-    top: 0;
-    height: 70px;
-
-    &--1 { top: 36px; }
-    &--2 { top: 649px; }
-    &--3 { top: 901px; }
+  &__section + &__section {
+    margin-top: @spacing-xxl;
   }
 
-  &__section-title {
-    position: absolute;
-    left: 60px;
-    top: 23px;
-    margin: 0;
-    font-size: 28px;
+  &__heading {
+    .flex(row, flex-start, center);
+    gap: @spacing-sm;
+    margin: 0 0 @spacing-lg;
+    font-size: @font-size-lg;
     font-weight: 500;
-    line-height: 41px;
+    line-height: 1.4;
     color: @contract-cell-text;
-    white-space: nowrap; // 父级 h3 内子元素全部脱流，标题会逐字换行，强制不换行
   }
 
   &__step {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    font-size: 48px;
-    font-weight: 500;
-    line-height: 70px;
+    font-size: @font-size-title;
+    font-weight: 600;
+    line-height: 1.2;
     color: @project-accent;
-    white-space: nowrap;
-    transform: translateY(-50%);
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: @spacing-lg;
   }
 
   &__field {
     .flex(column, flex-start, stretch);
-    position: absolute;
-    width: 764px;
-    gap: 14px;
+    gap: @spacing-sm;
+    min-width: 0;
   }
 
-  &__field--1 { top: 174px; }
-  &__field--2 { top: 296px; }
-  &__field--3 { top: 418px; }
-  &__field--4 { top: 540px; }
-  &__field--5 { top: 770px; }
-
-  &__field--5:has(&__label) { top: 749px; }
-
-  &__field--l { left: 54px; }
-  &__field--r { left: 930px; }
-
   &__label {
-    font-size: 20px;
+    .flex(row, flex-start, center);
+    gap: @spacing-sm;
+    font-size: @font-size-base;
     font-weight: 500;
-    line-height: 29px;
+    line-height: 1.4;
     color: @contract-cell-text;
   }
 
   &__value {
     .flex(row, flex-start, center);
     width: 100%;
-    height: 49px;
-    padding: 0 18px;
-    border: 1px solid @contract-line;
-    border-radius: 8px;
-    background: @contract-page-bg;
-    font-size: 20px;
-    line-height: 29px;
+    height: 40px;
+    padding: 0 @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-sm;
+    background: @bg-color-light;
+    font-size: @font-size-base;
+    line-height: 1.4;
     color: @contract-cell-text;
     box-sizing: border-box;
     .ellipsis();
@@ -194,19 +199,19 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
   &__field :deep(.status-tag) {
     .flex(row, flex-start, center);
     width: 100%;
-    height: 49px;
-    padding: 0 18px;
-    border: 1px solid @contract-line;
-    border-radius: 8px;
-    background: @contract-page-bg;
-    font-size: 20px;
-    line-height: 29px;
+    height: 40px;
+    padding: 0 @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-sm;
+    background: @bg-color-light;
+    font-size: @font-size-base;
+    line-height: 1.4;
     color: @contract-cell-text;
     box-sizing: border-box;
   }
 
   &__link {
-    font-size: 18px;
+    font-size: @font-size-sm;
     font-weight: 400;
     color: @contract-accent;
     transition: opacity 0.2s;
@@ -216,18 +221,9 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
     }
   }
 
-  &__label &__link {
-    margin-left: 10px;
-    font-size: 16px;
-  }
-
   &__files {
     .flex(column, flex-start, stretch);
-    position: absolute;
-    top: 1001px;                  // 1153 − 152
-    left: 54px;                   // 124 − 70
-    width: 1640px;
-    gap: 0;
+    gap: @spacing-sm;
     margin: 0;
     padding: 0;
     list-style: none;
@@ -236,28 +232,29 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
   &__file {
     .flex(row, space-between, center);
     gap: @spacing-base;
-    height: 90px;
-    padding: 0 30px;
-    background: @contract-table-head-bg;
+    min-height: 64px;
+    padding: 0 @spacing-base;
+    border-radius: @radius-base;
+    background: @bg-color-light;
     box-sizing: border-box;
   }
 
   &__file-info {
     .flex(column, flex-start, stretch);
-    gap: 4px;
+    gap: 2px;
     min-width: 0;
   }
 
   &__file-name {
-    font-size: 20px;
-    line-height: 29px;
+    font-size: @font-size-base;
+    line-height: 1.4;
     color: @contract-cell-text;
     .ellipsis();
   }
 
   &__file-meta {
-    font-size: 14px;
-    line-height: 20px;
+    font-size: @font-size-sm;
+    line-height: 1.4;
     color: @contract-muted;
   }
 
@@ -269,9 +266,11 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
 
   &__empty {
     .flex(row, flex-start, center);
-    height: 90px;
-    padding: 0 30px;
-    font-size: 18px;
+    min-height: 64px;
+    padding: 0 @spacing-base;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+    font-size: @font-size-base;
     color: @contract-muted;
   }
 }
diff --git a/src/views/contract/cpns/ContractTable.vue b/src/views/contract/cpns/ContractTable.vue
index a913d9e..abf47d4 100644
--- a/src/views/contract/cpns/ContractTable.vue
+++ b/src/views/contract/cpns/ContractTable.vue
@@ -26,7 +26,6 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
   <div class="contract-table">
     <el-table
       :data="contracts"
-      border
       style="width: 100%"
     >
       <el-table-column prop="contractNo" label="合同编号" show-overflow-tooltip />
@@ -77,7 +76,7 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
 <style lang="less" scoped>
 .contract-table {
   :deep(.el-table) {
-    font-size: 20px;
+    font-size: @font-size-sm;
     --el-table-border-color: @contract-line;
     --el-table-header-bg-color: @contract-table-head-bg;
     --el-table-header-text-color: @contract-head-text;
@@ -85,20 +84,26 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
     --el-table-row-hover-bg-color: @bg-color-light;
     background: @white;
 
+    &::before {
+      display: none;
+    }
+
     .el-table__cell {
       padding: 0;
+      border-right: none;
     }
 
     .cell {
-      padding: 0 10px;
-      font-size: 20px;
-      line-height: 29px;
+      padding: 0 @spacing-sm;
+      font-size: @font-size-sm;
+      line-height: 1.4;
     }
 
     th.el-table__cell {
-      height: 64px;
-      font-weight: 400;
+      height: 44px;
+      font-weight: 500;
       background: @contract-table-head-bg;
+      border-bottom: 1px solid @contract-line;
 
       .cell {
         color: @contract-head-text;
@@ -107,8 +112,9 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
     }
 
     td.el-table__cell {
-      height: 96px;
+      height: 64px;
       color: @contract-cell-text;
+      border-bottom: 1px solid @contract-line;
     }
 
     .el-table__row:hover > td.el-table__cell {
@@ -118,11 +124,11 @@ const SIGN_VARIANTS: Record<SignStatus, 'primary' | 'success' | 'warning' | 'dan
 
   &__actions {
     .flex(row, center);
-    gap: @spacing-sm;
+    gap: @spacing-base;
   }
 
   &__btn {
-    font-size: 13px;
+    font-size: @font-size-sm;
     color: @contract-accent;
     background: transparent;
     border: none;
diff --git a/src/views/contract/detail.vue b/src/views/contract/detail.vue
index 8b820fd..ecbcd00 100644
--- a/src/views/contract/detail.vue
+++ b/src/views/contract/detail.vue
@@ -65,17 +65,20 @@ onMounted(load)
 
 <style lang="less" scoped>
 .contract-detail {
-  padding-bottom: @spacing-xxl;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   .container {
     .flex(column, flex-start, stretch);
     gap: 0;
   }
+
   &__breadcrumb {
-    padding-top: 32px;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 27px;
+    padding-top: @spacing-lg;
+    font-size: @font-size-sm;
+    font-weight: 400;
+    line-height: 1.5;
     color: @contract-muted;
   }
 
diff --git a/src/views/contract/index.vue b/src/views/contract/index.vue
index 2a8c2a2..f72069c 100644
--- a/src/views/contract/index.vue
+++ b/src/views/contract/index.vue
@@ -82,41 +82,40 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .contract {
-  padding-bottom: @spacing-xxl;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__head {
-    padding: 24px 0 52px;
+    padding: @spacing-lg 0;
     background: @white;
-
-    .container {
-      padding-left: 42px;
-    }
+    border-bottom: 1px solid @border-color;
   }
 
   &__title {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 52px;
+    font-size: @font-size-title;
+    font-weight: 600;
+    line-height: 1.3;
     color: @contract-ink;
   }
 
   &__slogan {
-    margin-top: 13.5px;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 37px;
+    margin-top: @spacing-sm;
+    font-size: @font-size-base;
+    font-weight: 400;
+    line-height: 1.5;
     color: @contract-muted;
   }
 }
 
 .contract .contract__card {
-  margin-top: 20px;
-  padding: 51px 64px 59px;
-  border-radius: @radius-lg;
+  margin-top: @spacing-lg;
+  padding: @spacing-lg;
+  border-radius: @radius-base;
   background: @white;
 
   :deep(.filter-panel) {
-    margin-bottom: 39px;
+    margin-bottom: @spacing-lg;
     padding: 0;
     border-radius: 0;
     background: transparent;
@@ -128,26 +127,19 @@ onMounted(() => {
   }
 
   :deep(.filter-panel__bar) {
-    gap: 8px;
-
-    .filter-panel__btn {
-      margin-left: 78px;
-    }
-
-    .filter-panel__btn--primary {
-      margin-left: 40px;
-    }  }
+    gap: @spacing-base;
+  }
 
   :deep(.filter-panel__input) {
-    flex: 0 0 592px;
-    width: 592px;
-    max-width: none;
+    flex: 0 1 360px;
+    width: auto;
+    max-width: 360px;
     margin-right: 0;
-    height: 49px;
-    border-color: transparent;
-    border-radius: 0;
+    height: 36px;
+    border: 1px solid @border-color;
+    border-radius: @radius-round;
     background: @input-bg;
-    font-size: 20px;
+    font-size: @font-size-base;
     box-sizing: border-box;
   }
 
@@ -157,53 +149,50 @@ onMounted(() => {
 
   :deep(.filter-panel__input:focus) {
     border-color: @primary-strong;
+    background: @white;
   }
 
   :deep(.filter-panel__btn) {
-    order: 1;
-    min-width: 0;
-    height: 29px;
-    padding: 0 12px;
+    min-width: 72px;
+    height: 36px;
+    padding: 0 @spacing-lg;
     border: none;
-    border-radius: 0;
-    background: transparent;
-    color: @contract-placeholder;
-    font-size: 20px;
+    border-radius: @radius-round;
+    background: @pill-bg;
+    color: @text-color;
+    font-size: @font-size-base;
   }
 
   :deep(.filter-panel__btn:hover) {
-    border-color: transparent;
-    color: @text-color;
+    color: @primary-color;
   }
 
   :deep(.filter-panel__btn--primary) {
-    order: 2;
-    border-radius: 0;
-    background: transparent;
-    color: @contract-accent;
+    background: @contract-accent;
+    color: @white;
   }
 
   :deep(.filter-panel__btn--primary:hover) {
-    background: transparent;
-    color: @primary-color;
+    background: @primary-color;
+    color: @white;
   }
 
   :deep(.pagination) {
     justify-content: flex-end;
-    gap: 10px;
+    gap: @spacing-xs;
     padding: 0;
-    margin-top: 28px;
+    margin-top: @spacing-lg;
   }
 
   :deep(.pagination__btn) {
-    min-width: 40px;
-    height: 26px;
-    padding: 0 4px;
-    border: 1px solid @contract-line;
-    border-radius: 0;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
+    border: 1px solid @border-color;
+    border-radius: @radius-sm;
     background: @white;
-    color: @contract-line;
-    font-size: 14px;
+    color: @text-color;
+    font-size: @font-size-sm;
   }
 
   :deep(.pagination__btn:hover:not(:disabled):not(.is-ellipsis)) {
@@ -213,8 +202,9 @@ onMounted(() => {
 
   :deep(.pagination__btn.is-active) {
     border-color: @contract-accent;
-    background: @contract-accent;
-    color: @white;
+    background: @primary-light;
+    color: @contract-accent;
+    font-weight: 500;
   }
 
   :deep(.pagination__btn.is-ellipsis) {
@@ -222,20 +212,5 @@ onMounted(() => {
     background: transparent;
     color: @contract-muted;
   }
-
-  :deep(.pagination__btn:first-child),
-  :deep(.pagination__btn:last-child) {
-    min-width: auto;
-    padding: 0 2px;
-    border: none;
-    background: transparent;
-    color: @contract-muted;
-    font-size: 12px;
-  }
-
-  :deep(.pagination__btn:first-child:disabled),
-  :deep(.pagination__btn:last-child:disabled) {
-    opacity: 1;
-  }
 }
 </style>
diff --git a/src/views/contract/sign.vue b/src/views/contract/sign.vue
index 96f6ed5..ed4fffc 100644
--- a/src/views/contract/sign.vue
+++ b/src/views/contract/sign.vue
@@ -63,16 +63,18 @@ onMounted(load)
 
 <style lang="less" scoped>
 .contract-sign {
+  min-height: 100%;
   padding-top: @spacing-lg;
-  padding-bottom: @spacing-xxl;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   .container {
     .flex(column, flex-start, stretch);
-    gap: 12px;
+    gap: @spacing-base;
   }
 
   &__breadcrumb {
-    font-size: 11px;
+    font-size: @font-size-sm;
     color: @text-color-disabled;
 
     > span:last-child {
@@ -84,16 +86,16 @@ onMounted(load)
   &__footer {
     .flex(row, flex-end);
     width: 100%;
-    margin-top: 19px;
+    margin-top: @spacing-base;
 
     :deep(.app-button) {
-      height: 30px;
-      padding: 0 24px;
+      height: 36px;
+      padding: 0 @spacing-lg;
       border: none;
-      border-radius: @radius-sm;
+      border-radius: @radius-round;
       background: @primary-strong;
       color: @white;
-      font-size: 11px;
+      font-size: @font-size-sm;
     }
 
     :deep(.app-button:hover) {
diff --git a/src/views/demand/cpns/DemandActionBar.vue b/src/views/demand/cpns/DemandActionBar.vue
index c180ac0..80a2341 100644
--- a/src/views/demand/cpns/DemandActionBar.vue
+++ b/src/views/demand/cpns/DemandActionBar.vue
@@ -49,35 +49,32 @@ const emit = defineEmits<{
 
 <style lang="less" scoped>
 .demand-bar {
-  // 设计稿里操作栏不是 fixed 底栏，而是卡片内的一行：
-  // el66 提示文字 x=240 y=2297，按钮 el36/34/32 x=1009/1288/1567 y=2280 w=232 h=63。
-  // 内容左边界 194，提示文字比它右移 46px；按钮右边界 1799 与输入框右边界齐平。
   .flex(row, space-between, center);
-  margin-top: 66px;
+  margin-top: @spacing-xxl;
+  gap: @spacing-lg;
 
   &__tip {
-    // 提示文字左边界 240 = 内容左边界 194 + 46。
-    margin: 0 0 0 114px;
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 29px;
-    color: @demand-heading;
+    margin: 0;
+    font-size: @font-size-base;
+    font-weight: 400;
+    line-height: 1.5;
+    color: @text-color-secondary;
   }
 
   &__actions {
     .flex(row, flex-end, center);
-    gap: 47px;
+    gap: @spacing-base;
     flex-shrink: 0;
   }
 
   &__btn {
-    width: 232px;
-    height: 63px;
-    padding: 0;
+    min-width: 120px;
+    height: 40px;
+    padding: 0 @spacing-lg;
     border: none;
-    border-radius: @radius-base;
+    border-radius: @radius-round;
     background: @demand-secondary-bg;
-    font-size: 20px;
+    font-size: @font-size-base;
     font-weight: 500;
     color: @white;
     cursor: pointer;
diff --git a/src/views/demand/cpns/DemandAttachments.vue b/src/views/demand/cpns/DemandAttachments.vue
index f4cf2bc..8d78d16 100644
--- a/src/views/demand/cpns/DemandAttachments.vue
+++ b/src/views/demand/cpns/DemandAttachments.vue
@@ -202,11 +202,10 @@ function onDownload(file: DemandAttachment): void {
 <style lang="less" scoped>
 .demand-attach {
   .flex(column, flex-start, stretch);
-  // el59标签底 1405 → el54 顶 1419 = 14px；el54 底 1509 → el53 顶 1529 = 20px。
-  gap: 14px;
+  gap: @spacing-base;
 
   &__list {
-    gap: 20px;
+    gap: @spacing-sm;
   }
 
   &__head {
@@ -215,38 +214,38 @@ function onDownload(file: DemandAttachment): void {
 
   &__label {
     flex-shrink: 0;
-    font-size: 20px;
+    font-size: @font-size-base;
     font-weight: 500;
-    line-height: 29px;
+    line-height: 1.4;
     color: @demand-heading;
   }
 
   &__hint {
     flex: 1;
     min-width: 0;
-    margin-left: 20px;
-    font-size: 16px;
+    margin-left: @spacing-base;
+    font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 23px;
-    color: @demand-line;
+    line-height: 1.5;
+    color: @text-color-secondary;
   }
 
-  // 设计稿 el54：x=194 y=1419 w=1605 h=90，整块浅灰上传区。
   &__drop {
     width: 100%;
-    height: 90px;
+    height: 72px;
     padding: 0;
-    border: none;
-    border-radius: @radius-sm;
-    background: @demand-upload-bg;
+    border: 1px dashed @border-color;
+    border-radius: @radius-base;
+    background: @bg-color-light;
     font-family: inherit;
-    font-size: 16px;
-    color: @demand-line;
+    font-size: @font-size-base;
+    color: @text-color-secondary;
     cursor: pointer;
-    transition: background 0.2s, color 0.2s;
+    transition: background 0.2s, color 0.2s, border-color 0.2s;
 
     &:hover:not(:disabled) {
-      background: darken(@demand-upload-bg, 4%);
+      border-color: @demand-accent;
+      background: @filter-selected-bg;
       color: @demand-accent;
     }
 
@@ -262,35 +261,34 @@ function onDownload(file: DemandAttachment): void {
 
   &__list {
     .flex(column, flex-start, stretch);
-    gap: 20px;
+    gap: @spacing-sm;
     margin: 0;
     padding: 0;
     list-style: none;
   }
 
-  // el53：x=194 y=1529 w=1605 h=90，空态占位块；有附件时列表项本身就是这个高度。
   &__list:empty {
-    height: 90px;
-    border-radius: @radius-sm;
-    background: @demand-upload-bg;
+    height: 72px;
+    border-radius: @radius-base;
+    background: @bg-color-light;
   }
 
   &__item {
     .flex(row, flex-start, center);
     gap: @spacing-base;
-    min-height: 90px;
-    padding: 0 @spacing-lg;
-    border-radius: @radius-sm;
-    background: @demand-upload-bg;
+    min-height: 64px;
+    padding: 0 @spacing-base;
+    border-radius: @radius-base;
+    background: @bg-color-light;
   }
 
   &__badge {
     .flex(row, center);
     flex-shrink: 0;
-    width: 44px;
-    height: 44px;
+    width: 36px;
+    height: 36px;
     border-radius: @radius-sm;
-    font-size: 12px;
+    font-size: @font-size-xs;
     font-weight: 700;
     letter-spacing: 0.2px;
   }
@@ -298,18 +296,18 @@ function onDownload(file: DemandAttachment): void {
   &__meta {
     .flex(column, flex-start, stretch);
     flex: 1;
-    gap: 4px;
+    gap: 2px;
     min-width: 0;
   }
 
   &__name {
-    font-size: 20px;
+    font-size: @font-size-base;
     color: @demand-ink;
     .ellipsis();
   }
 
   &__sub {
-    font-size: 16px;
+    font-size: @font-size-sm;
     color: @text-color-secondary;
   }
 
diff --git a/src/views/demand/cpns/DemandBizTypes.vue b/src/views/demand/cpns/DemandBizTypes.vue
index e91c278..227d03d 100644
--- a/src/views/demand/cpns/DemandBizTypes.vue
+++ b/src/views/demand/cpns/DemandBizTypes.vue
@@ -39,7 +39,7 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
           v-else
           class="biz-types__icon"
           :name="option.icon"
-          :size="68"
+          :size="48"
         />
         <span class="biz-types__name">{{ option.label }}</span>
         <span v-if="option.desc" class="biz-types__desc">{{ option.desc }}</span>
@@ -63,20 +63,17 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
   &__grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: 17px;
+    gap: @spacing-base;
   }
 
   &__card {
     position: relative;
     .flex(column, flex-start, flex-start);
     gap: 0;
-    height: 206px;
+    min-height: 160px;
     box-sizing: border-box;
-    // 设计稿 el21 "互联网软件" y=545 → 卡片 y=439 距顶 106px。
-    // 插画 el4 y=444 h=110 的框底 554 已越过 name 顶545，说明插画切片含
-    // 透明边距；按文字层定位为准，插画框给68px 见方、左对齐即可。
-    padding: 4px 16px 0;
-    border: 1px solid @demand-line;
+    padding: @spacing-lg;
+    border: 1px solid @border-color;
     border-radius: @radius-base;
     background: @white;
     text-align: left;
@@ -88,18 +85,17 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
     }
 
     &.is-active {
-      border-color: @demand-selected-bg;
-      background: @demand-selected-bg;
+      border-color: @demand-accent;
+      background: @filter-selected-bg;
     }
   }
 
-  // el8 "圆形51" x=442 y=467 w=30 h=30：卡片 x=194 w=307，右内缩 29px、上移 22px。
   &__check {
     position: absolute;
-    top: 22px;
-    right: 19px;
-    width: 30px;
-    height: 30px;
+    top: @spacing-base;
+    right: @spacing-base;
+    width: 20px;
+    height: 20px;
     border: 1px solid @demand-radio-idle;
     border-radius: 50%;
     background: @white;
@@ -107,41 +103,42 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
   }
 
   &__card.is-active &__check {
-    border-color: @white;
+    border-color: @demand-accent;
     background: @white;
-    box-shadow: inset 0 0 0 3px @demand-selected-bg;
+    box-shadow: inset 0 0 0 5px @demand-accent;
   }
 
-  // el4 插画 x=233 / el3 x=542 / el1 x=875 / el2 x=1190：
-  // 四张卡的插画都在卡片左边线右侧 27~39px 处，不是水平居中，按左对齐处理。
   &__icon {
-    margin-bottom: 33px;
+    margin-bottom: @spacing-base;
   }
 
   &__logo {
-    width: 68px;
-    height: 68px;
-    margin-bottom: 33px;
+    width: 48px;
+    height: 48px;
+    margin-bottom: @spacing-base;
     object-fit: contain;
   }
 
   &__name {
-    font-size: 28px;
+    font-size: @font-size-lg;
     font-weight: 500;
-    line-height: 45px;
+    line-height: 1.4;
     color: @demand-ink;
   }
 
   &__desc {
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 23px;
-    color: @demand-ink;
+    font-size: @font-size-sm;
+    font-weight: 400;
+    line-height: 1.5;
+    color: @text-color-secondary;
+  }
+
+  &__card.is-active &__name {
+    color: @demand-accent;
   }
 
-  &__card.is-active &__name,
   &__card.is-active &__desc {
-    color: @white;
+    color: @text-color-secondary;
   }
 }
 </style>
diff --git a/src/views/demand/cpns/DemandConfirmForm.vue b/src/views/demand/cpns/DemandConfirmForm.vue
index e0ff44f..0c43e00 100644
--- a/src/views/demand/cpns/DemandConfirmForm.vue
+++ b/src/views/demand/cpns/DemandConfirmForm.vue
@@ -99,24 +99,24 @@ function onRemark(event: Event): void {
   }
 
   &__label {
-    font-size: 20px;
+    font-size: @font-size-base;
     font-weight: 500;
-    line-height: 29px;
+    line-height: 1.4;
     color: @demand-heading;
   }
 
   &__input {
     .text-control();
-    height: 49px;
-    padding: 0 18px;
-    border-color: @demand-line;
+    height: 40px;
+    padding: 0 @spacing-base;
+    border-color: @border-color;
     border-radius: @radius-sm;
-    font-size: 20px;
+    font-size: @font-size-base;
     color: @demand-ink;
 
     &::placeholder {
       font-weight: 400;
-      color: @demand-line;
+      color: @text-color-disabled;
     }
   }
 
@@ -127,27 +127,27 @@ function onRemark(event: Event): void {
 
   &__textarea {
     .text-control();
-    height: 270px;
-    min-height: 270px;
-    padding: 10px 18px 24px;
-    border-color: @demand-line;
+    height: 160px;
+    min-height: 160px;
+    padding: @spacing-base;
+    border-color: @border-color;
     border-radius: @radius-sm;
-    font-size: 20px;
+    font-size: @font-size-base;
     color: @demand-ink;
-    line-height: 29px;
+    line-height: 1.5;
     resize: vertical;
 
     &::placeholder {
       font-weight: 400;
-      color: @demand-line;
+      color: @text-color-disabled;
     }
   }
 
   &__count {
     position: absolute;
-    right: @spacing-lg;
+    right: @spacing-base;
     bottom: @spacing-sm;
-    font-size: 16px;
+    font-size: @font-size-sm;
     color: @text-color-disabled;
   }
 }
diff --git a/src/views/demand/cpns/DemandInfoForm.vue b/src/views/demand/cpns/DemandInfoForm.vue
index da151c3..b329a32 100644
--- a/src/views/demand/cpns/DemandInfoForm.vue
+++ b/src/views/demand/cpns/DemandInfoForm.vue
@@ -201,9 +201,9 @@ function onBudgetManualBlur(event: Event): void {
   }
 
   &__label {
-    font-size: 20px;
+    font-size: @font-size-base;
     font-weight: 500;
-    line-height: 29px;
+    line-height: 1.4;
     color: @demand-heading;
   }
 
@@ -214,16 +214,16 @@ function onBudgetManualBlur(event: Event): void {
 
   &__input {
     .text-control();
-    height: 49px;
-    padding: 0 18px;
-    border-color: @demand-line;
+    height: 40px;
+    padding: 0 @spacing-base;
+    border-color: @border-color;
     border-radius: @radius-sm;
-    font-size: 20px;
+    font-size: @font-size-base;
     color: @demand-ink;
 
     &::placeholder {
       font-weight: 400;
-      color: @demand-line;
+      color: @text-color-disabled;
     }
   }
 
@@ -234,47 +234,47 @@ function onBudgetManualBlur(event: Event): void {
 
   &__textarea {
     .text-control();
-    height: 270px;
-    min-height: 270px;
-    padding: 10px 18px 24px;
-    border-color: @demand-line;
+    height: 160px;
+    min-height: 160px;
+    padding: @spacing-base;
+    border-color: @border-color;
     border-radius: @radius-sm;
-    font-size: 20px;
+    font-size: @font-size-base;
     color: @demand-ink;
-    line-height: 29px;
+    line-height: 1.5;
     resize: vertical;
 
     &::placeholder {
       font-weight: 400;
-      color: @demand-line;
+      color: @text-color-disabled;
     }
   }
 
   &__count {
     position: absolute;
-    right: @spacing-lg;
+    right: @spacing-base;
     bottom: @spacing-sm;
-    font-size: 16px;
+    font-size: @font-size-sm;
     color: @text-color-disabled;
   }
 
   &__budgets {
     .flex(row, flex-start, stretch);
-    gap: 17px;
+    gap: @spacing-base;
   }
 
   &__budget {
     flex: 1;
     min-width: 0;
-    height: 49px;
+    height: 40px;
     padding: 0 @spacing-sm;
-    border: 1px solid @demand-line;
-    border-radius: @radius-sm;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
     background: @white;
-    font-size: 20px;
+    font-size: @font-size-base;
     font-weight: 400;
     font-family: inherit;
-    color: @demand-line;
+    color: @text-color;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s;
@@ -287,8 +287,8 @@ function onBudgetManualBlur(event: Event): void {
 
     &.is-active {
       border-color: @demand-accent;
-      background: @demand-selected-bg;
-      color: @white;
+      background: @filter-selected-bg;
+      color: @demand-accent;
       font-weight: 500;
     }
   }
@@ -298,7 +298,7 @@ function onBudgetManualBlur(event: Event): void {
 
     &::placeholder {
       font-weight: 400;
-      color: @demand-line;
+      color: @text-color-disabled;
     }
   }
 }
diff --git a/src/views/demand/index.vue b/src/views/demand/index.vue
index d3c269a..9764aec 100644
--- a/src/views/demand/index.vue
+++ b/src/views/demand/index.vue
@@ -120,7 +120,9 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .demand-page {
-  // 操作栏已收进卡片内（设计稿 el36 y=2280），不需要为fixed 底栏预留空白。
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &.is-loading .demand {
     opacity: 0.6;
@@ -128,65 +130,60 @@ onMounted(() => {
   }
 
   &__hero {
-    height: 179px;
     box-sizing: border-box;
-    padding-top: 32px;
+    padding: @spacing-lg 0;
     background: @white;
+    border-bottom: 1px solid @border-color;
   }
 
   &__hero-inner {
-    // 设计稿 el82：标题左边界 112px（hero 白底 1920 宽，标题左起 112）。
-    padding-left: 112px;
+    padding-left: @spacing-xl;
   }
 
   &__title {
     margin: 0;
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 52px;
+    font-size: @font-size-title;
+    font-weight: 600;
+    line-height: 1.3;
     color: @demand-ink;
   }
 
   &__subtitle {
-    margin: 15px 0 0;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 35px;
+    margin: @spacing-sm 0 0;
+    font-size: @font-size-base;
+    font-weight: 400;
+    line-height: 1.5;
     color: @demand-subtitle;
   }
 }
 
 .demand {
-  margin-top: 20px;             // 271 − (72+179) = 20
-  // 设计稿 el83 卡片 x=70 w=1780；内容左边界 194（el68 输入框 x=194 w=1605），
-  // 右边界 1799。故左内边距 56、右内边距 51（不对称是设计稿本身如此）。
-  padding: 48px 51px 114px 56px;
+  margin-top: @spacing-lg;
+  padding: @spacing-xl;
+  border-radius: @radius-base;
   background: @white;
 
   &__heading {
-    // 设计稿三个 heading 的标签都比序号低 23px（el80 "01" y=319 →
-    // el79 "选择业务类型*" y=342），不是垂直居中，故用flex-start + margin-top。
-    .flex(row, flex-start, flex-start);
-    gap: 4px;
-    margin: 0 0 50px;
-    padding-left: 8px;
+    .flex(row, flex-start, center);
+    gap: @spacing-sm;
+    margin: 0 0 @spacing-lg;
+    padding-left: 0;
   }
 
   &__index {
     flex-shrink: 0;
-    font-size: 48px;
-    font-weight: 500;
-    line-height: 70px;
+    font-size: @font-size-title;
+    font-weight: 600;
+    line-height: 1.2;
     font-variant-numeric: tabular-nums;
     color: @demand-accent;
   }
 
   &__label {
-    // 与序号的顶部落差 23px（el80 y=319 → el79 y=342）。
-    margin-top: 23px;
-    font-size: 28px;
+    margin-top: 0;
+    font-size: @font-size-lg;
     font-weight: 500;
-    line-height: 41px;
+    line-height: 1.4;
     color: @demand-heading;
   }
 
@@ -195,28 +192,24 @@ onMounted(() => {
     color: @danger-color;
   }
 
-  // 内容左边界 194：卡片 x=70 + padding-left 56 + 内容缩进 68。
   &__heading + * {
-    margin-left: 68px;
+    margin-left: 0;
   }
 
-  // el29业务类型卡片底 645 → el78 "02" 顶 705 = 60px。
   &__section + &__section {
-    margin-top: 60px;
+    margin-top: @spacing-xxl;
   }
 
-  // el53 附件灰块底 1619 → el76 "03" 顶 1689 = 70px。
   &__section + &__section:last-of-type {
-    margin-top: 70px;
+    margin-top: @spacing-xxl;
   }
 
   &__section + &__section &__heading {
-    margin-bottom: 0;
+    margin-bottom: @spacing-lg;
   }
 
-  // el78 "02" 底 775 → el70 "项目名称*" 顶 789 = 14px。
   &__section + &__section &__heading + * {
-    margin-top: 14px;
+    margin-top: 0;
   }
 }
 </style>
diff --git a/src/views/finance/bill-detail.vue b/src/views/finance/bill-detail.vue
index 3c1d054..357a545 100644
--- a/src/views/finance/bill-detail.vue
+++ b/src/views/finance/bill-detail.vue
@@ -150,16 +150,17 @@ onMounted(() => {
 <style lang="less" scoped>
 .bill-detail {
   width: 100%;
-  padding-bottom: 325px;
-  background: @contract-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
     .flex(row, flex-start, center);
-    height: 86px;
-    padding-top: 34px;
-    font-size: 13px;
+    min-height: 48px;
+    padding-top: @spacing-lg;
+    font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 17px;
+    line-height: 1.5;
     color: @project-muted;
     box-sizing: border-box;
   }
diff --git a/src/views/finance/bills.vue b/src/views/finance/bills.vue
index cd46f0b..03ee92e 100644
--- a/src/views/finance/bills.vue
+++ b/src/views/finance/bills.vue
@@ -154,8 +154,9 @@ onMounted(() => {
   align-items: stretch;
   gap: 0;
   width: 100%;
-  padding-bottom: 14px;
-  background: @contract-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
     .flex(row, flex-start, center);
@@ -185,9 +186,9 @@ onMounted(() => {
   &__stats {
     .flex(row, flex-start, flex-start);
     gap: 0;
-    height: 106px;
-    margin-top: 11px;
-    border: 1px solid @finance-card-line;
+    min-height: 96px;
+    margin-top: @spacing-base;
+    border: none;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
@@ -209,19 +210,19 @@ onMounted(() => {
   }
 
   &__stat-value {
-    font-size: 26px;
-    font-weight: 700;
-    line-height: 35px;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.3;
     color: @finance-ink;
   }
 
   &__toolbar {
     .flex(row, flex-start, center);
-    gap: 0;
-    height: 71px;
-    margin-top: 14px;
-    padding: 0 0 0 22px;
-    border: 1px solid @finance-card-line;
+    gap: @spacing-base;
+    min-height: 64px;
+    margin-top: @spacing-base;
+    padding: 0 @spacing-lg;
+    border: none;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
@@ -249,27 +250,29 @@ onMounted(() => {
 
     :deep(.el-radio-button.is-active .el-radio-button__inner) {
       border-color: @primary-strong;
-      background: @primary-strong;
-      color: @white;
+      background: @filter-selected-bg;
+      color: @primary-strong;
       font-size: 11px;
       font-weight: 500;
-      box-shadow: -1px 0 0 0 @primary-strong;
+      box-shadow: none;
     }
   }
 
   &__search {
-    width: 1300px;
-    height: 37px;
-    margin-left: 33px;
-    flex-shrink: 0;
+    flex: 0 1 360px;
+    width: auto;
+    height: 36px;
+    margin-left: 0;
+    flex-shrink: 1;
+    min-width: 0;
 
     :deep(.el-input__wrapper) {
-      width: 1300px;
-      height: 37px;
-      padding: 0 16px;
+      width: 100%;
+      height: 36px;
+      padding: 0 @spacing-base;
       background: @finance-field-bg;
-      box-shadow: none;
-      border-radius: 0;
+      box-shadow: 0 0 0 1px @border-color inset;
+      border-radius: @radius-round;
     }
 
     :deep(.el-input__inner) {
@@ -314,36 +317,41 @@ onMounted(() => {
   }
 
   &__board {
-    margin-top: 14px;
-    border: 1px solid @finance-card-line;
+    margin-top: @spacing-base;
+    border: none;
     border-radius: @radius-base;
     background: @white;
     overflow: hidden;
+    padding: @spacing-base @spacing-lg @spacing-lg;
   }
 
   :deep(.pagination) {
     justify-content: flex-end;
-    gap: 3.7px;
-    padding: 8px 26px 30px 0;
+    gap: @spacing-xs;
+    padding: @spacing-base 0 0;
   }
 
   :deep(.pagination__btn) {
-    min-width: 0;
-    height: 16px;
-    padding: 0 3px;
-    border: none;
-    border-radius: 0;
-    background: transparent;
-    color: @finance-muted-text;
-    font-size: 12px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
+    border: 1px solid @border-color;
+    border-radius: @radius-sm;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-sm;
     font-weight: 400;
 
     &.is-active {
-      min-width: 21.45px;
+      min-width: 28px;
+      border-color: @primary-strong;
+      background: @primary-light;
+      color: @primary-strong;
+      font-weight: 500;
     }
 
     &:hover:not(:disabled):not(.is-ellipsis) {
-      border: none;
+      border-color: @primary-strong;
       color: @primary-strong;
     }
 
diff --git a/src/views/finance/cpns/BillTable.vue b/src/views/finance/cpns/BillTable.vue
index 89dac77..a3f0afb 100644
--- a/src/views/finance/cpns/BillTable.vue
+++ b/src/views/finance/cpns/BillTable.vue
@@ -126,31 +126,36 @@ watch(
 
 <style lang="less" scoped>
 .bill-table {
-  width: 1765px;
-  margin: 6.5px 0 0 14.5px;
-  font-size: 12px;
+  width: 100%;
+  margin: @spacing-sm 0 0;
+  font-size: @font-size-sm;
   color: @finance-entry-text;
 
+  :deep(.el-table) {
+    --el-table-border-color: @border-color;
+
+    &::before {
+      display: none;
+    }
+  }
+
   :deep(.el-table__header-wrapper th.el-table__cell) {
-    height: 41.77px;
+    height: 44px;
     padding: 0;
     background: @finance-table-head-bg;
-    border-right: 1px solid @project-divider;
-    border-bottom: 1px solid @project-divider;
-    color: @finance-entry-text;
-    font-size: 12px;
-    font-weight: 600;
+    border-right: none;
+    border-bottom: 1px solid @border-color;
+    color: @text-color-secondary;
+    font-size: @font-size-sm;
+    font-weight: 500;
     text-align: left;
   }
 
-  :deep(.el-table__header-wrapper th.el-table__cell:first-child) {
-    border-left: 1px solid @project-divider;
-  }
-
   :deep(.el-table__body-wrapper td.el-table__cell) {
-    height: 43.77px;
+    height: 56px;
     padding: 0;
-    border-bottom: 1px solid @project-divider;
+    border-right: none;
+    border-bottom: 1px solid @border-color;
     box-sizing: border-box;
   }
 
@@ -159,17 +164,16 @@ watch(
   }
 
   :deep(.el-table .cell) {
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: @spacing-sm;
+    padding-right: @spacing-sm;
     line-height: normal;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  // 首列（多选）左缩进对齐设计稿
   :deep(.el-table-column--selection .cell) {
-    padding-left: 43.5px;
+    padding-left: @spacing-base;
   }
 
   &__ops {
@@ -177,12 +181,12 @@ watch(
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
-    gap: 18px;
+    gap: @spacing-base;
     white-space: nowrap;
   }
 
   &__link {
-    font-size: 12px;
+    font-size: @font-size-sm;
     font-weight: 400;
     padding: 0;
   }
diff --git a/src/views/finance/index.vue b/src/views/finance/index.vue
index 96bc107..ee580d8 100644
--- a/src/views/finance/index.vue
+++ b/src/views/finance/index.vue
@@ -164,20 +164,22 @@ onMounted(() => {
 <style lang="less" scoped>
 .finance {
   width: 100%;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__top {
     .flex(row, flex-start, stretch);
-    gap: 14px;
-    margin-top: -56px;
+    gap: @spacing-base;
+    margin-top: @spacing-lg;
   }
 
   &__entries {
     .flex(row, space-between, center);
     flex: 0 0 672px;
     height: 135px;
-    // 设计稿 #20：首入口中心 x=1272、尾中心 x=1756，两侧对称 padding 66px 命中
     padding: 0 66px;
-    border: 1px solid @finance-card-line;
+    border: none;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
diff --git a/src/views/finance/invoice-titles.vue b/src/views/finance/invoice-titles.vue
index 8c66976..a38e632 100644
--- a/src/views/finance/invoice-titles.vue
+++ b/src/views/finance/invoice-titles.vue
@@ -137,16 +137,17 @@ onMounted(() => {
 <style lang="less" scoped>
 .invoice-titles {
   width: 100%;
-  padding-bottom: 459px;
-  background: @contract-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
     .flex(row, flex-start, center);
-    height: 81px;
-    padding-top: 36px;
-    font-size: 13px;
+    min-height: 48px;
+    padding-top: @spacing-lg;
+    font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 17px;
+    line-height: 1.5;
     color: @project-muted;
     box-sizing: border-box;
   }
@@ -167,9 +168,9 @@ onMounted(() => {
 
   &__head {
     .flex(row, space-between, center);
-    height: 62px;
-    padding: 0 33.56px 0 36px;
-    border: 1px solid @finance-card-line;
+    min-height: 56px;
+    padding: 0 @spacing-lg;
+    border: none;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
diff --git a/src/views/finance/invoices.vue b/src/views/finance/invoices.vue
index 1775ae9..3678e55 100644
--- a/src/views/finance/invoices.vue
+++ b/src/views/finance/invoices.vue
@@ -265,8 +265,10 @@ onMounted(() => {
   gap: @spacing-base;
   width: 100%;
   max-width: @container-width;
+  min-height: 100%;
   margin: 0 auto;
-  padding: @spacing-lg @spacing-base @spacing-xxl;
+  padding: @spacing-lg @spacing-base @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
     font-size: 11px;
@@ -346,13 +348,14 @@ onMounted(() => {
 
     &.is-active {
       border-color: @primary-color;
-      background: @primary-color;
-      color: @white;
+      background: @filter-selected-bg;
+      color: @primary-color;
+      font-weight: 500;
 
       &:hover {
         border-color: @primary-color;
-        background: @primary-color;
-        color: @white;
+        background: @filter-selected-bg;
+        color: @primary-color;
       }
     }
   }
diff --git a/src/views/finance/pay.vue b/src/views/finance/pay.vue
index 70352db..4a5aba0 100644
--- a/src/views/finance/pay.vue
+++ b/src/views/finance/pay.vue
@@ -161,8 +161,10 @@ onMounted(() => {
 .pay {
   width: 100%;
   max-width: @container-width;
+  min-height: 100%;
   margin: 0 auto;
-  padding: @spacing-lg @spacing-base @spacing-xxl;
+  padding: @spacing-lg @spacing-base @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
     margin-bottom: @spacing-base;
@@ -235,8 +237,8 @@ onMounted(() => {
 
   &__amount {
     margin-top: 4px;
-    font-size: 26px;
-    font-weight: 700;
+    font-size: @font-size-xl;
+    font-weight: 600;
     color: @danger-color;
     line-height: 1.2;
   }
diff --git a/src/views/home/cpns/HomeBanner.vue b/src/views/home/cpns/HomeBanner.vue
index f68c39d..738c6bc 100644
--- a/src/views/home/cpns/HomeBanner.vue
+++ b/src/views/home/cpns/HomeBanner.vue
@@ -61,59 +61,92 @@ onBeforeUnmount(stopAutoplay)
 
 <template>
   <section class="home-banner">
-    <div class="home-banner__carousel" aria-hidden="true">
-      <div
-        v-for="(src, index) in slides"
-        :key="`${src}-${index}`"
-        class="home-banner__slide"
-        :class="{ 'home-banner__slide--active': index === activeIndex }"
-      >
-        <img
-          class="home-banner__image"
-          :class="{ 'home-banner__image--inline': !hasBanners }"
-          :src="src"
-          alt=""
+    <div class="home-banner__stage">
+      <div class="home-banner__carousel" aria-hidden="true">
+        <div
+          v-for="(src, index) in slides"
+          :key="`${src}-${index}`"
+          class="home-banner__slide"
+          :class="{ 'home-banner__slide--active': index === activeIndex }"
         >
+          <img
+            class="home-banner__image"
+            :class="{ 'home-banner__image--inline': !hasBanners }"
+            :src="src"
+            alt=""
+          >
+        </div>
       </div>
-    </div>
 
-    <div class="home-banner__inner">
-      <h1 class="home-banner__title">虫子智造研发一体化平台</h1>
-      <p class="home-banner__subtitle">一站式智能软硬件研发与量产综合服务商</p>
+      <div class="home-banner__inner">
+        <h1 class="home-banner__title">
+          虫子智造研发一体化平台
+        </h1>
+        <p class="home-banner__subtitle">
+          一站式智能软硬件研发与量产综合服务商
+        </p>
 
-      <div class="home-banner__actions">
-        <button class="home-banner__btn home-banner__btn--primary" type="button" @click="goDemand">
-          需求提报
-        </button>
-        <button class="home-banner__btn home-banner__btn--ghost" type="button" @click="goCases">
-          案例中心
-        </button>
+        <div class="home-banner__actions">
+          <button
+            class="home-banner__btn home-banner__btn--primary"
+            type="button"
+            @click="goDemand"
+          >
+            需求提报
+          </button>
+          <button
+            class="home-banner__btn home-banner__btn--ghost"
+            type="button"
+            @click="goCases"
+          >
+            案例中心
+          </button>
+        </div>
       </div>
-    </div>
 
-    <div v-if="slides.length > 1" class="home-banner__dots" role="tablist" aria-label="头图轮播">
-      <button
-        v-for="(_, index) in slides"
-        :key="index"
-        class="home-banner__dot"
-        :class="{ 'home-banner__dot--active': index === activeIndex }"
-        type="button"
-        role="tab"
-        :aria-selected="index === activeIndex"
-        @click="goTo(index)"
-      />
+      <div
+        v-if="slides.length > 1"
+        class="home-banner__dots"
+        role="tablist"
+        aria-label="头图轮播"
+      >
+        <button
+          v-for="(_, index) in slides"
+          :key="index"
+          class="home-banner__dot"
+          :class="{ 'home-banner__dot--active': index === activeIndex }"
+          type="button"
+          role="tab"
+          :aria-selected="index === activeIndex"
+          @click="goTo(index)"
+        />
+      </div>
     </div>
   </section>
 </template>
 
 <style lang="less" scoped>
 .home-banner {
-  position: relative;
-  height: 661px;
-  overflow: hidden;
-  background: @home-banner-bg;
   width: 100%;
   flex: 0 0 auto;
+  padding: @spacing-lg @home-gutter 0;
+  box-sizing: border-box;
+  background: transparent;
+
+  @media (max-width: 1600px) {
+    padding: @spacing-lg @spacing-lg 0;
+  }
+
+  &__stage {
+    position: relative;
+    width: 100%;
+    max-width: @home-content;
+    height: 420px;
+    margin: 0 auto;
+    overflow: hidden;
+    border-radius: @radius-base;
+    background: @home-banner-bg;
+  }
 
   &__carousel {
     position: absolute;
@@ -138,15 +171,14 @@ onBeforeUnmount(stopAutoplay)
     height: 100%;
     object-fit: cover;
 
-    // 内置插图：按设计稿定位与尺寸原样显示，不铺满
     &--inline {
       position: absolute;
-      top: 31px;
-      right: 269px;
+      top: 24px;
+      right: 48px;
       left: auto;
       bottom: auto;
-      width: 723px;
-      height: 598px;
+      width: 420px;
+      height: 348px;
       margin-left: auto;
       object-fit: contain;
     }
@@ -156,50 +188,48 @@ onBeforeUnmount(stopAutoplay)
     position: relative;
     z-index: 1;
     width: 100%;
-    max-width: @container-width;
     height: 100%;
-    margin: 0 auto;
     pointer-events: none;
   }
 
   &__title {
     position: absolute;
-    top: 184px;
-    left: 150px;
+    top: 96px;
+    left: 64px;
     margin: 0;
     color: @banner-title-color;
-    font-size: @font-size-hero-lg;
+    font-size: @font-size-hero;
     font-weight: 700;
-    line-height: 87px;
+    line-height: 1.25;
     white-space: nowrap;
   }
 
   &__subtitle {
     position: absolute;
-    top: 287px;
-    left: 150px;
+    top: 168px;
+    left: 64px;
     margin: 0;
     color: @banner-title-color;
-    font-size: 24px;
+    font-size: @font-size-lg;
     font-weight: 500;
-    line-height: 35px;
+    line-height: 1.4;
     white-space: nowrap;
   }
 
   &__actions {
     position: absolute;
-    top: 392px;
-    left: 150px;
+    top: 232px;
+    left: 64px;
     .flex(row, flex-start, center);
-    gap: 20px;
+    gap: @spacing-base;
     pointer-events: auto;
   }
 
   &__btn {
-    width: 183px;
-    height: 55px;
-    border-radius: 8px;
-    font-size: 18px;
+    width: 140px;
+    height: 44px;
+    border-radius: @radius-base;
+    font-size: @font-size-base;
     font-weight: 500;
     line-height: 1;
     cursor: pointer;
@@ -220,7 +250,7 @@ onBeforeUnmount(stopAutoplay)
         content: '';
         position: absolute;
         inset: 0;
-        border-radius: 8px;
+        border-radius: @radius-base;
         padding: 2px;
         background: linear-gradient(135deg, @btn-gradient-from 0%, @btn-gradient-to 100%);
         -webkit-mask:
@@ -238,16 +268,17 @@ onBeforeUnmount(stopAutoplay)
 
   &__dots {
     position: absolute;
-    left: 929px;
-    top: 594px;
+    left: 50%;
+    bottom: @spacing-base;
     z-index: 1;
-    .flex(row, flex-start, center);
-    gap: 13px;
+    .flex(row, center, center);
+    gap: @spacing-sm;
+    transform: translateX(-50%);
   }
 
   &__dot {
-    width: 5px;
-    height: 5px;
+    width: 6px;
+    height: 6px;
     padding: 0;
     border: none;
     border-radius: 50%;
@@ -255,7 +286,7 @@ onBeforeUnmount(stopAutoplay)
     cursor: pointer;
 
     &--active {
-      width: 44px;
+      width: 28px;
       border-radius: 3px;
       background: @home-banner-dot;
     }
diff --git a/src/views/home/cpns/HomeBusinessCards.vue b/src/views/home/cpns/HomeBusinessCards.vue
index b711502..b670653 100644
--- a/src/views/home/cpns/HomeBusinessCards.vue
+++ b/src/views/home/cpns/HomeBusinessCards.vue
@@ -39,40 +39,42 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
 
 <style lang="less" scoped>
 .home-business {
-  padding: 44px 70px 54px;
-  border: 1px solid @home-section-border;
-  border-radius: @radius-lg;
+  padding: @spacing-xl;
+  border: none;
+  border-radius: @radius-base;
   background: @white;
 
   &__title {
-    margin: 0 0 47px;
-    font-size: @font-size-xxl;
-    font-weight: 700;
+    margin: 0 0 @spacing-lg;
+    font-size: @font-size-xl;
+    font-weight: 600;
     color: @home-ink;
   }
 
   &__grid {
     display: flex;
-    gap: 22px;
+    gap: @spacing-base;
   }
 
   &__card {
     position: relative;
     .flex(column, flex-start, flex-start);
-    flex: 0 1 368px;
+    flex: 1 1 0;
     min-width: 0;
-    height: 206px;
+    min-height: 160px;
     box-sizing: border-box;
-    padding: 0 20px;
+    padding: @spacing-lg;
     overflow: hidden;
-    border: 1px solid @home-business-border;
+    border: 1px solid @border-color;
     border-radius: @radius-base;
     background: @white;
     transition:
       transform 0.2s,
-      box-shadow 0.2s;
+      box-shadow 0.2s,
+      border-color 0.2s;
 
     &:hover {
+      border-color: @primary-color;
       box-shadow: @shadow-base;
       transform: translateY(-2px);
     }
@@ -102,37 +104,41 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
   }
 
   &__name {
-    margin: 104px 0 0;
-    font-size: @font-size-title;
+    margin: @spacing-xxl 0 0;
+    font-size: @font-size-lg;
     font-weight: 500;
-    line-height: 41px;
+    line-height: 1.4;
     color: @home-ink;
   }
 
   &__desc {
-    margin: 4px 0 0;
-    font-size: @font-size-md;
-    font-weight: 500;
-    line-height: 23px;
-    color: @home-ink;
-    .multi-ellipsis(1);
+    margin: @spacing-xs 0 0;
+    font-size: @font-size-sm;
+    font-weight: 400;
+    line-height: 1.5;
+    color: @text-color-secondary;
+    .multi-ellipsis(2);
   }
 
   &__card--active {
-    border-color: @primary-strong;
-    background: @primary-strong;
+    border-color: @primary-color;
+    background: @filter-selected-bg;
 
     .home-business__check {
-      border-color: @white;
+      border-color: @primary-color;
 
       &::after {
         opacity: 1;
+        background: @primary-color;
       }
     }
 
-    .home-business__name,
+    .home-business__name {
+      color: @primary-strong;
+    }
+
     .home-business__desc {
-      color: @white;
+      color: @text-color-secondary;
     }
   }
 }
diff --git a/src/views/home/cpns/HomeCaseShowcase.vue b/src/views/home/cpns/HomeCaseShowcase.vue
index cc78388..af5ecd9 100644
--- a/src/views/home/cpns/HomeCaseShowcase.vue
+++ b/src/views/home/cpns/HomeCaseShowcase.vue
@@ -85,26 +85,26 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
 <style lang="less" scoped>
 .home-cases {
-  padding: 40px 66px 60px;
-  border: 1px solid @home-section-border;
-  border-radius: @radius-lg;
+  padding: @spacing-xl;
+  border: none;
+  border-radius: @radius-base;
   background: @white;
 
   &__head {
-    .flex(row, flex-start);
-    gap: 24px;
-    margin-bottom: 47px;
+    .flex(row, flex-start, center);
+    gap: @spacing-lg;
+    margin-bottom: @spacing-lg;
   }
 
   &__title {
-    font-size: @font-size-xxl;
-    font-weight: 700;
+    font-size: @font-size-xl;
+    font-weight: 600;
     color: @home-ink;
   }
 
   &__tabs {
     .flex(row, center);
-    gap: 36px;
+    gap: @spacing-lg;
   }
 
   &__tab {
@@ -146,19 +146,20 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
   &__card {
     overflow: hidden;
-    flex: 0 1 368px;
+    flex: 1 1 0;
     min-width: 0;
-    height: 248px;
+    min-height: 220px;
     box-sizing: border-box;
-    border: 1px solid @home-case-border;
+    border: 1px solid @border-color;
     border-radius: @radius-base;
     background: @white;
-    box-shadow: 0 4px 10px fade(@black, 8%);
+    box-shadow: none;
     cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
 
     &:hover {
-      box-shadow: 0 6px 14px fade(@black, 12%);
+      border-color: @primary-color;
+      box-shadow: @shadow-base;
       transform: translateY(-2px);
 
       .home-cases__view {
diff --git a/src/views/home/cpns/HomeQuickEntries.vue b/src/views/home/cpns/HomeQuickEntries.vue
index decd0d9..dcd4753 100644
--- a/src/views/home/cpns/HomeQuickEntries.vue
+++ b/src/views/home/cpns/HomeQuickEntries.vue
@@ -173,15 +173,15 @@ function onMore(): void {
   position: relative;
   .flex(column, flex-start, stretch);
   flex-shrink: 0;
-  flex: 0 0 529px;
-  width: 529px;
-  height: 245px;
+  flex: 0 0 420px;
+  width: 420px;
+  min-height: 0;
   box-sizing: border-box;
   min-width: 0;
   gap: 0;
-  padding: 18px 40px 28px;
-  border: 1px solid @home-card-border;
-  border-radius: @radius-lg;
+  padding: @spacing-lg;
+  border: none;
+  border-radius: @radius-base;
   background: @white;
   overflow: hidden;
 
@@ -190,22 +190,22 @@ function onMore(): void {
   }
 
   &__title {
-    font-size: @font-size-xxl;
-    font-weight: 700;
-    line-height: 52px;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.4;
     color: @home-ink;
   }
 
   &__list {
     .flex(row, flex-start, flex-start);
-    gap: 30px;
-    margin-top: 17px;
+    gap: @spacing-base;
+    margin-top: @spacing-base;
     flex-wrap: wrap;
   }
 
   &__item {
     .flex(column, flex-start, center);
-    gap: 8px;
+    gap: @spacing-sm;
     flex: none;
     transition: transform 0.2s;
 
@@ -216,14 +216,14 @@ function onMore(): void {
 
   &__tile {
     display: block;
-    width: 97px;
-    height: 97px;
+    width: 72px;
+    height: 72px;
     border-radius: @radius-base;
     object-fit: cover;
   }
 
   &__label {
-    font-size: @font-size-lg;
+    font-size: @font-size-sm;
     font-weight: 500;
     color: @home-ink;
     text-align: center;
@@ -231,15 +231,16 @@ function onMore(): void {
 
   &__more {
     position: absolute;
-    top: 120px;
-    right: 25px;
-    width: 32px;
-    height: 32px;
+    top: 50%;
+    right: @spacing-base;
+    width: 28px;
+    height: 28px;
     padding: 0;
     border: 0;
     background: transparent;
-    color: #c9cdd4;
+    color: @text-color-disabled;
     cursor: pointer;
+    transform: translateY(-50%);
     transition: color 0.2s;
 
     &:hover {
diff --git a/src/views/home/cpns/HomeStats.vue b/src/views/home/cpns/HomeStats.vue
index 09c9026..d8d6444 100644
--- a/src/views/home/cpns/HomeStats.vue
+++ b/src/views/home/cpns/HomeStats.vue
@@ -30,30 +30,30 @@ const items = [
 <style lang="less" scoped>
 .home-stats {
   .flex(row, flex-end);
-  gap: 30px;
+  gap: @spacing-base;
 
   &__item {
     .flex(column, center, center);
-    gap: 0;
-    width: 112px;
-    height: 112px;
-    min-width: 112px;
+    gap: 2px;
+    width: 88px;
+    height: 88px;
+    min-width: 88px;
     padding: 0;
-    border-radius: @radius-sm;
-    background: @primary-strong;
+    border-radius: @radius-base;
+    background: @filter-selected-bg;
   }
 
   &__value {
-    font-size: 48px;
-    font-weight: 500;
+    font-size: @font-size-title;
+    font-weight: 600;
     line-height: 1.2;
-    color: @white;
+    color: @primary-strong;
   }
 
   &__label {
-    font-size: @font-size-base;
+    font-size: @font-size-sm;
     font-weight: 500;
-    color: @white;
+    color: @text-color-secondary;
   }
 }
 </style>
diff --git a/src/views/home/cpns/HomeWelcome.vue b/src/views/home/cpns/HomeWelcome.vue
index b3b167b..0f6aed8 100644
--- a/src/views/home/cpns/HomeWelcome.vue
+++ b/src/views/home/cpns/HomeWelcome.vue
@@ -37,24 +37,24 @@ const greeting = computed(() => {
   &__greeting {
     .flex(row, flex-start);
     gap: @spacing-sm;
-    font-size: 52px;
-    font-weight: 700;
+    font-size: @font-size-title;
+    font-weight: 600;
     color: @home-welcome;
   }
 
   &__wave {
     .flex(row, center);
-    width: 44px;
-    height: 44px;
+    width: 32px;
+    height: 32px;
     border-radius: @radius-round;
     background: fade(@black, 4%);
-    font-size: @font-size-xl;
+    font-size: @font-size-lg;
   }
 
   &__summary {
-    font-size: 24px;
+    font-size: @font-size-base;
     font-weight: 400;
-    color: @home-welcome;
+    color: @text-color-secondary;
   }
 }
 </style>
diff --git a/src/views/home/detail.vue b/src/views/home/detail.vue
index 11351a8..aa2c34b 100644
--- a/src/views/home/detail.vue
+++ b/src/views/home/detail.vue
@@ -58,14 +58,16 @@ onMounted(load)
 
 <style lang="less" scoped>
 .business-detail {
-  padding-top: 32px;
-  padding-bottom: @spacing-xxl;
+  min-height: 100%;
+  padding-top: @spacing-lg;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
-    margin-bottom: 49px;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 37px;
+    margin-bottom: @spacing-lg;
+    font-size: @font-size-base;
+    font-weight: 400;
+    line-height: 1.5;
     color: @home-breadcrumb;
 
     .link {
@@ -74,18 +76,19 @@ onMounted(load)
   }
 
   &__hero {
-    .flex(column, flex-start);
+    .flex(column, flex-start, flex-start);
+    justify-content: center;
     margin-bottom: @spacing-base;
-    padding: 129px 29px 0;
-    border-radius: @radius-lg;
+    padding: @spacing-xl;
+    border-radius: @radius-base;
     background: @home-detail-hero-bg;
-    height: 219px;
+    min-height: 140px;
     box-sizing: border-box;
   }
 
   &__loading {
-    padding: 80px 0;
-    font-size: 16px;
+    padding: @spacing-xxl 0;
+    font-size: @font-size-base;
     color: @text-color-secondary;
   }
 
@@ -95,23 +98,23 @@ onMounted(load)
 
   &__intro {
     .flex(column, flex-start);
-    gap: 8px;
+    gap: @spacing-sm;
   }
 
   &__name {
     margin: 0;
-    font-size: 26px;
-    font-weight: 400;
-    line-height: 33px;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.3;
     color: @home-body;
   }
 
   &__slogan {
     margin: 0;
-    font-size: 14px;
+    font-size: @font-size-base;
     font-weight: 400;
-    line-height: 18px;
-    color: @home-body;
+    line-height: 1.5;
+    color: @text-color-secondary;
   }
 
   &__cta {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e3a94ff..e7adc8b 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -53,25 +53,25 @@ onMounted(() => {
 <style lang="less" scoped>
 .home {
   .flex(column, flex-start);
-  gap: 20px;
+  gap: @spacing-lg;
   padding-top: 0;
-  padding-bottom: @spacing-xxl;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__dashboard {
     .flex(row, space-between, stretch);
-    gap: 60px;
+    gap: @spacing-lg;
   }
 
   &__dashboard-main {
     .flex(row, space-between, center);
-    flex: 0 0 1091px;
-    width: 1091px;
+    flex: 1 1 auto;
     min-width: 0;
     box-sizing: border-box;
     gap: @spacing-lg;
-    padding: 0 59px 0 105px;
-    border: 1px solid @home-card-border;
-    border-radius: @radius-lg;
+    padding: @spacing-lg @spacing-xl;
+    border: none;
+    border-radius: @radius-base;
     background: @white;
   }
 }
diff --git a/src/views/login/cpns/LoginForm.vue b/src/views/login/cpns/LoginForm.vue
index b4d90aa..8cf454a 100644
--- a/src/views/login/cpns/LoginForm.vue
+++ b/src/views/login/cpns/LoginForm.vue
@@ -101,7 +101,7 @@ const localAgree = computed({
     width: 100%;
     height: 40px;
     padding: 0 12px;
-    border: 1px solid #dde1e7;
+    border: 1px solid @border-color;
     border-radius: @radius-sm;
     background: @white;
     font-size: 13px;
diff --git a/src/views/login/cpns/SmsLoginForm.vue b/src/views/login/cpns/SmsLoginForm.vue
index 0cbbfe2..bb6c6cd 100644
--- a/src/views/login/cpns/SmsLoginForm.vue
+++ b/src/views/login/cpns/SmsLoginForm.vue
@@ -116,7 +116,7 @@ function onSubmit(): void {
     width: 100%;
     height: 40px;
     padding: 0 12px;
-    border: 1px solid #dde1e7;
+    border: 1px solid @border-color;
     border-radius: @radius-sm;
     background: @white;
     font-size: 13px;
diff --git a/src/views/login/register.vue b/src/views/login/register.vue
index 8730d0e..dfae57f 100644
--- a/src/views/login/register.vue
+++ b/src/views/login/register.vue
@@ -190,7 +190,7 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 40px;
     padding: 0 12px;
-    border: 1px solid #dde1e7;
+    border: 1px solid @border-color;
     border-radius: @radius-sm;
     background: @white;
     font-size: 13px;
diff --git a/src/views/login/reset.vue b/src/views/login/reset.vue
index cda6ec4..bd0a82d 100644
--- a/src/views/login/reset.vue
+++ b/src/views/login/reset.vue
@@ -191,7 +191,7 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 40px;
     padding: 0 12px;
-    border: 1px solid #dde1e7;
+    border: 1px solid @border-color;
     border-radius: @radius-sm;
     background: @white;
     font-size: 13px;
diff --git a/src/views/message/cpns/MessageList.vue b/src/views/message/cpns/MessageList.vue
index 5b4e1c7..9f2dd53 100644
--- a/src/views/message/cpns/MessageList.vue
+++ b/src/views/message/cpns/MessageList.vue
@@ -31,20 +31,20 @@ const emit = defineEmits<{ view: [id: string] }>()
 .message-list {
   .flex(column, flex-start, stretch);
   gap: 0;
-  margin-top: 16px;
+  margin-top: 0;
   padding: 0;
   border-radius: @radius-base;
   background: @white;
   overflow: hidden;
 
   .message-item + .message-item {
-    border-top: 1px solid @finance-card-line;
+    border-top: 1px solid @border-color;
   }
 
   &__empty {
-    padding: 60px 0;
+    padding: @spacing-xxl 0;
     text-align: center;
-    font-size: 13px;
+    font-size: @font-size-sm;
   }
 }
 </style>
diff --git a/src/views/message/cpns/MessageTabs.vue b/src/views/message/cpns/MessageTabs.vue
index b14fd45..48f73ba 100644
--- a/src/views/message/cpns/MessageTabs.vue
+++ b/src/views/message/cpns/MessageTabs.vue
@@ -41,9 +41,9 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
 <style lang="less" scoped>
 .message-tabs {
   .flex(column, flex-start, stretch);
-  gap: 0;
-  height: 438px;
-  padding: 14px 0;
+  gap: 2px;
+  min-height: 0;
+  padding: @spacing-sm 0;
   border-radius: @radius-base;
   background: @white;
   box-sizing: border-box;
@@ -51,22 +51,24 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
   &__tab {
     .flex(row, space-between, center);
     gap: @spacing-sm;
-    height: 44px;
-    padding: 0 25px;
-    border-radius: 0;
+    height: 40px;
+    margin: 0 @spacing-sm;
+    padding: 0 @spacing-base;
+    border-radius: @radius-sm;
     background: transparent;
     color: @message-tabs-text;
-    font-size: 13px;
+    font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 18px;
-    transition: color 0.2s;
+    line-height: 1.4;
+    transition: color 0.2s, background-color 0.2s;
 
     &:hover {
       color: @primary-strong;
+      background: @bg-color-light;
     }
 
     &.is-active {
-      background: transparent;
+      background: @filter-selected-bg;
       color: @primary-strong;
       font-weight: 600;
     }
diff --git a/src/views/message/detail.vue b/src/views/message/detail.vue
index 06b5272..26dc258 100644
--- a/src/views/message/detail.vue
+++ b/src/views/message/detail.vue
@@ -122,21 +122,24 @@ onMounted(load)
   .flex(column, flex-start, stretch);
   gap: 0;
   width: 100%;
-  padding-bottom: 60px;
-  background: @message-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__wrap {
     width: 100%;
-    padding: 28px 70px 0;
+    max-width: @container-width;
+    margin: 0 auto;
+    padding: @spacing-lg @page-gutter 0;
     box-sizing: border-box;
   }
 
   &__breadcrumb {
     .flex(row, flex-start, center);
     gap: 4px;
-    height: 49px;
-    font-size: 12px;
-    line-height: 17px;
+    min-height: 40px;
+    font-size: @font-size-sm;
+    line-height: 1.5;
     color: @project-muted;
   }
 
@@ -158,18 +161,18 @@ onMounted(load)
   }
 
   &__card {
-    padding: 45px 47px 40px;
+    padding: @spacing-xl;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
   }
 
   &__title {
-    font-size: 20px;
-    font-weight: 700;
-    line-height: 28px;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.4;
     color: @finance-ink;
-    text-align: center;
+    text-align: left;
   }
 
   &__time {
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index 25c161b..8ade810 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -61,7 +61,7 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
       slogan="统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒"
     />
 
-    <div class="message__body">
+    <div class="container message__body">
       <MessageTabs
         class="message__tabs"
         :active="query.type"
@@ -120,55 +120,56 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
   .flex(column, flex-start, stretch);
   gap: 0;
   width: 100%;
-  padding-bottom: 14px;
-  background: @message-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__body {
     .flex(row, flex-start, flex-start);
-    gap: 22px;
+    gap: @spacing-lg;
     width: 100%;
-    padding: 119px 25px 0;
+    padding: @spacing-lg 0 0;
     box-sizing: border-box;
   }
 
   &__tabs {
     flex-shrink: 0;
-    width: 198px;
+    width: 200px;
   }
 
   &__main {
     .flex(column, flex-start, stretch);
-    gap: 0;
+    gap: @spacing-base;
     flex: 1;
     min-width: 0;
   }
 
   &__toolbar {
     .flex(row, flex-start, center);
-    gap: 0;
-    height: 69px;
-    padding: 0 21px 0 25px;
-    border: 1px solid @message-toolbar-btn-border;
+    gap: @spacing-base;
+    min-height: 64px;
+    padding: 0 @spacing-lg;
+    border: none;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
   }
 
   &__search {
-    flex: 0 1 460px;
-    height: 37px;
+    flex: 0 1 360px;
+    height: 36px;
 
     :deep(.el-input__wrapper) {
-      height: 37px;
-      padding: 0 16px;
-      border-radius: @radius-base;
+      height: 36px;
+      padding: 0 @spacing-base;
+      border-radius: @radius-round;
       background: @finance-field-bg;
-      box-shadow: none;
+      box-shadow: 0 0 0 1px @border-color inset;
     }
 
     :deep(.el-input__inner) {
       color: @finance-ink;
-      font-size: 13px;
+      font-size: @font-size-base;
 
       &::placeholder {
         color: @contract-placeholder;
@@ -177,11 +178,11 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
   }
 
   &__btn {
-    height: 28px;
-    margin-left: 14px;
-    padding: 0 15px;
-    border-radius: @radius-sm;
-    font-size: 12px;
+    height: 36px;
+    margin-left: 0;
+    padding: 0 @spacing-lg;
+    border-radius: @radius-round;
+    font-size: @font-size-sm;
     font-weight: 400;
 
     &:hover {
@@ -195,15 +196,15 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
       color: @white;
 
       &:hover {
-        border-color: @primary-strong;
-        background: @primary-strong;
+        border-color: @primary-hover;
+        background: @primary-hover;
         color: @white;
       }
     }
 
     &--read {
       margin-left: auto;
-      border-color: @message-toolbar-btn-border;
+      border-color: @border-color;
       background: @white;
       color: @finance-entry-text;
 
@@ -218,22 +219,22 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
   &__pagination {
     justify-content: flex-end;
     align-self: stretch;
-    margin-top: 16px;
+    margin-top: @spacing-base;
     padding: 0;
 
     :deep(.pagination__btn) {
-      min-width: 23px;
-      height: 26px;
-      border-color: @message-toolbar-btn-border;
+      min-width: 28px;
+      height: 28px;
+      border: 1px solid @border-color;
       border-radius: @radius-sm;
       background: @white;
-      color: @finance-entry-text;
-      font-size: 12px;
+      color: @text-color;
+      font-size: @font-size-sm;
     }
 
     :deep(.pagination__btn.is-active) {
-      border-color: @message-pager-active-bg;
-      background: @message-pager-active-bg;
+      border-color: @primary-strong;
+      background: @primary-light;
       color: @primary-strong;
       font-weight: 500;
     }
diff --git a/src/views/profile/cpns/ProfileSider.vue b/src/views/profile/cpns/ProfileSider.vue
index 9499125..1a1ce58 100644
--- a/src/views/profile/cpns/ProfileSider.vue
+++ b/src/views/profile/cpns/ProfileSider.vue
@@ -32,24 +32,29 @@ const menus: MenuItem[] = [
 <style lang="less" scoped>
 .profile-sider {
   .flex(column, flex-start);
-  gap: 0;
+  gap: 2px;
+  padding: @spacing-sm 0;
+  border-radius: @radius-base;
+  background: @white;
 
   &__item {
     .flex(row, flex-start, center);
-    height: 36px;
-    padding: 0 16px;
-    border-radius: @profile-radius;
+    height: 40px;
+    margin: 0 @spacing-sm;
+    padding: 0 @spacing-base;
+    border-radius: @radius-sm;
     color: @text-color;
-    font-size: 13px;
+    font-size: @font-size-sm;
     font-weight: 400;
     transition: all 0.2s;
 
     &:hover {
       color: @primary-strong;
+      background: @bg-color-light;
     }
 
     &.router-link-active {
-      background: @profile-nav-active-bg;
+      background: @filter-selected-bg;
       color: @primary-strong;
       font-weight: 500;
     }
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index 6ccb2e5..30bdda9 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -36,32 +36,34 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .profile {
-  min-height: 737px;
-  background: @profile-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__container {
-    padding: 24px 16px 0 10px;
+    padding-top: @spacing-lg;
   }
 
   &__body {
     .flex(row, flex-start, stretch);
+    gap: @spacing-lg;
     width: 100%;
   }
 
   &__aside {
     .flex(column, flex-start, stretch);
-    gap: 16px;
-    flex: 0 0 156px;
-    width: 156px;
+    gap: @spacing-base;
+    flex: 0 0 200px;
+    width: 200px;
   }
 
   &__main {
     flex: 1 1 auto;
     min-width: 0;
-    min-height: 534px;
-    margin-left: 10px;
-    padding: 26px 28px 22px;
-    border-radius: @radius-lg;
+    min-height: 480px;
+    margin-left: 0;
+    padding: @spacing-lg @spacing-xl;
+    border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
   }
diff --git a/src/views/project/after-sales.vue b/src/views/project/after-sales.vue
index 83ea2f5..03c88e4 100644
--- a/src/views/project/after-sales.vue
+++ b/src/views/project/after-sales.vue
@@ -306,45 +306,45 @@ onMounted(() => {
 <style lang="less" scoped>
 .after-sales {
   .flex(column, flex-start, stretch);
+  min-height: 100%;
   padding-bottom: @spacing-page-bottom;
-  background: @white;
+  background: @bg-color;
 
-  // 设计稿 el40 面包屑 y=116，header 底 72 → padding-top 44px。
   &__breadcrumb {
-    padding-top: 44px;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 27px;
+    padding-top: @spacing-lg;
+    font-size: @font-size-sm;
+    font-weight: 400;
+    line-height: 1.5;
     color: @project-breadcrumb;
   }
 
   &__header {
     .flex(column, flex-start, stretch);
-    padding-top: 52px;
+    padding-top: @spacing-base;
   }
 
   &__title {
     margin: 0;
-    font-size: 22px;
-    font-weight: 700;
-    line-height: 29px;
+    font-size: @font-size-title;
+    font-weight: 600;
+    line-height: 1.3;
     color: @project-ink;
   }
 
-  // 设计稿 #26：副标题文字 x=728~1185，中心 ≈ 957 ≈ 内容区中心 960（居中）。
   &__subtitle {
-    margin-top: 8px;
-    font-size: 13px;
+    margin-top: @spacing-sm;
+    font-size: @font-size-base;
     font-weight: 400;
-    line-height: 17px;
+    line-height: 1.5;
     color: @project-label;
-    text-align: center;
+    text-align: left;
   }
 
   &__card {
     .flex(column, flex-start, stretch);
-    margin-top: 30px;
-    padding: 22px 0 40px;
+    margin-top: @spacing-base;
+    padding: @spacing-lg;
+    border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
   }
diff --git a/src/views/project/cpns/ProjectFilter.vue b/src/views/project/cpns/ProjectFilter.vue
index 29b5ed8..94cdc2d 100644
--- a/src/views/project/cpns/ProjectFilter.vue
+++ b/src/views/project/cpns/ProjectFilter.vue
@@ -237,54 +237,54 @@ function onClearChips(): void {
 <style lang="less" scoped>
 .project-filter {
   flex-shrink: 0;
-  width: 516px;
-  // 字体/尺寸/间距/面板宽度对齐案例库 CasesFilter（老大要求），颜色保持不变。
-  padding: 15px 0 40px;
+  width: @project-filter-width;
+  padding: @spacing-lg 0 @spacing-xl;
   border-radius: @radius-base;
   background: @white;
 
   &__title,
   &__group,
   &__actions {
-    padding: 0 50px 0 35px;
+    padding: 0 @spacing-lg;
   }
 
   &__title {
-    font-size: 28px;
-    font-weight: 500;
-    line-height: 41px;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.4;
     color: @heading-color;
   }
 
   &__group {
-    margin-top: 24px;
+    margin-top: @spacing-lg;
   }
 
   &__title + &__group {
-    margin-top: 11px;
+    margin-top: @spacing-base;
   }
 
   &__group-title {
-    font-size: 24px;
+    font-size: @font-size-md;
     font-weight: 500;
-    line-height: 35px;
+    line-height: 1.4;
     color: @heading-color;
   }
 
   &__list {
-    margin-top: 19px;
+    margin-top: @spacing-sm;
     display: flex;
     flex-direction: column;
+    gap: 2px;
   }
 
   &__row {
     .flex(row, flex-start, center);
-    gap: 12px;
+    gap: @spacing-sm;
     width: 100%;
-    height: 50px;
-    padding: 0;
+    height: 40px;
+    padding: 0 @spacing-sm;
     border-radius: @radius-sm;
-    font-size: 20px;
+    font-size: @font-size-base;
     color: @heading-color;
     transition: background-color 0.2s, color 0.2s;
 
@@ -301,8 +301,8 @@ function onClearChips(): void {
   &__box {
     position: relative;
     flex-shrink: 0;
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     border: 1px solid @border-color-dark;
     border-radius: 2px;
     background: @white;
@@ -312,9 +312,9 @@ function onClearChips(): void {
       content: '';
       position: absolute;
       top: 1px;
-      left: 4px;
-      width: 5px;
-      height: 8px;
+      left: 3px;
+      width: 4px;
+      height: 7px;
       border: solid @white;
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
@@ -340,25 +340,25 @@ function onClearChips(): void {
   &__row-count {
     flex-shrink: 0;
     margin-left: @spacing-sm;
-    font-size: 16px;
+    font-size: @font-size-sm;
     font-weight: 500;
-    color: @text-color;
+    color: @text-color-secondary;
   }
 
   &__grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 24px 33px;
-    margin-top: 21px;
+    gap: @spacing-sm;
+    margin-top: @spacing-sm;
   }
 
   &__pill {
-    height: 53px;
+    height: 36px;
     padding: 0 @spacing-sm;
     border-radius: @radius-base;
-    background: @pill-bg;
+    background: @project-pill-bg;
     color: @text-color;
-    font-size: 20px;
+    font-size: @font-size-sm;
     .ellipsis();
     transition: background-color 0.2s, color 0.2s;
 
@@ -367,8 +367,9 @@ function onClearChips(): void {
     }
 
     &.is-active {
-      background: @primary-color;
-      color: @white;
+      background: @filter-selected-bg;
+      color: @primary-color;
+      font-weight: 500;
     }
 
     &--wide {
@@ -378,20 +379,20 @@ function onClearChips(): void {
 
   &__range {
     .flex(row, space-between, center);
-    margin-top: 9px;
+    margin-top: @spacing-sm;
     gap: @spacing-xs;
   }
 
   &__date {
     flex: 1;
     min-width: 0;
-    height: 53px;
-    padding: 0 @spacing-xs;
+    height: 36px;
+    padding: 0 @spacing-sm;
     border: 1px solid @border-color;
     border-radius: @radius-sm;
     background: @white;
     color: @text-color;
-    font-size: 20px;
+    font-size: @font-size-sm;
   }
 
   &__range-sep {
@@ -399,8 +400,8 @@ function onClearChips(): void {
   }
 
   &__chips {
-    margin: 23px 50px 0 35px;
-    padding: 16px 24px 21px;
+    margin: @spacing-lg @spacing-lg 0;
+    padding: @spacing-base;
     border-radius: @radius-base;
     background: @chips-panel-bg;
   }
@@ -410,13 +411,13 @@ function onClearChips(): void {
   }
 
   &__chips-title {
-    font-size: 20px;
+    font-size: @font-size-base;
     font-weight: 500;
     color: @primary-color;
   }
 
   &__chips-clear {
-    font-size: 16px;
+    font-size: @font-size-sm;
     color: @primary-color;
 
     &:hover {
@@ -427,18 +428,18 @@ function onClearChips(): void {
   &__chips-list {
     .flex(row, flex-start, center);
     flex-wrap: wrap;
-    margin-top: 16px;
-    gap: 14px 13px;
+    margin-top: @spacing-sm;
+    gap: @spacing-sm;
   }
 
   &__chip {
     .flex(row, center, center);
-    height: 32px;
+    height: 28px;
     padding: 0 @spacing-sm;
     border-radius: @radius-round;
     background: @white;
     color: @primary-color;
-    font-size: 14px;
+    font-size: @font-size-sm;
     font-weight: 500;
 
     &:hover {
@@ -452,17 +453,17 @@ function onClearChips(): void {
 
   &__actions {
     .flex(row, flex-start, center);
-    margin-top: 30px;
-    gap: 13px;
+    margin-top: @spacing-lg;
+    gap: @spacing-sm;
   }
 
   &__reset {
-    flex: 0 0 135px;
-    height: 30px;
+    flex: 0 0 88px;
+    height: 32px;
     border-radius: @radius-round;
-    background: @pill-bg;
+    background: @project-pill-bg;
     color: @text-color;
-    font-size: 14px;
+    font-size: @font-size-sm;
 
     &:hover {
       color: @primary-color;
@@ -471,11 +472,11 @@ function onClearChips(): void {
 
   &__submit {
     flex: 1;
-    height: 30px;
+    height: 32px;
     border-radius: @radius-round;
     background: @primary-color;
     color: @white;
-    font-size: 14px;
+    font-size: @font-size-sm;
 
     &:hover {
       background: @primary-hover;
diff --git a/src/views/project/cpns/ProjectPager.vue b/src/views/project/cpns/ProjectPager.vue
index 4ee138b..47e57c1 100644
--- a/src/views/project/cpns/ProjectPager.vue
+++ b/src/views/project/cpns/ProjectPager.vue
@@ -69,19 +69,20 @@ function go(page: number): void {
 <style lang="less" scoped>
 .project-pager {
   .flex(row, flex-end, center);
-  gap: 4px;
-  margin-top: 15px;
+  gap: @spacing-xs;
+  margin-top: @spacing-lg;
 
   &__btn {
     .flex(row, center, center);
-    width: 20px;
-    height: 20px;
-    border: 1px solid @border-color-dark;
-    border-radius: 2px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
+    border: 1px solid @border-color;
+    border-radius: @radius-sm;
     background: @white;
-    color: @heading-color;
+    color: @text-color;
     font-size: @font-size-sm;
-    transition: border-color 0.2s, color 0.2s;
+    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
 
     &:hover:not(:disabled):not(.is-ellipsis) {
       border-color: @primary-color;
@@ -90,7 +91,9 @@ function go(page: number): void {
 
     &.is-active {
       border-color: @primary-color;
+      background: @primary-light;
       color: @primary-color;
+      font-weight: 500;
     }
 
     &.is-ellipsis {
diff --git a/src/views/project/cpns/ProjectTable.vue b/src/views/project/cpns/ProjectTable.vue
index 0bc680d..62d335e 100644
--- a/src/views/project/cpns/ProjectTable.vue
+++ b/src/views/project/cpns/ProjectTable.vue
@@ -54,7 +54,7 @@ function progressLabel(value: number | null | undefined): string {
           <th>业务类型</th>
           <th>进度</th>
           <th>状态</th>
-          <th />
+          <th>操作</th>
         </tr>
       </thead>
       <tbody>
@@ -108,7 +108,8 @@ function progressLabel(value: number | null | undefined): string {
 
     th,
     td {
-      border: 1px solid @project-table-line;
+      border: none;
+      border-bottom: 1px solid @project-table-line;
       text-align: center;
       vertical-align: middle;
       font-size: @font-size-sm;
@@ -117,22 +118,27 @@ function progressLabel(value: number | null | undefined): string {
     th {
       height: 44px;
       background: @project-table-head-bg;
-      color: @heading-color;
-      font-weight: 600;
+      color: @text-color-secondary;
+      font-weight: 500;
     }
 
     td {
-      height: 76px;
+      height: 64px;
       color: @heading-color;
+      transition: background-color 0.15s;
     }
 
-    th:nth-child(1) { width: 6.09%; }
-    th:nth-child(2) { width: 29.34%; }
-    th:nth-child(3) { width: 21.76%; }
-    th:nth-child(4) { width: 10.68%; }
-    th:nth-child(5) { width: 14.37%; }
-    th:nth-child(6) { width: 8.98%; }
-    th:nth-child(7) { width: 8.78%; }
+    tbody tr:hover td {
+      background: @bg-color-light;
+    }
+
+    th:nth-child(1) { width: 6%; }
+    th:nth-child(2) { width: 18%; }
+    th:nth-child(3) { width: 24%; }
+    th:nth-child(4) { width: 14%; }
+    th:nth-child(5) { width: 10%; }
+    th:nth-child(6) { width: 12%; }
+    th:nth-child(7) { width: 16%; }
   }
 
   &__name {
@@ -142,7 +148,7 @@ function progressLabel(value: number | null | undefined): string {
 
   &__ops {
     .flex(row, center, center);
-    gap: 10px;
+    gap: @spacing-base;
     white-space: nowrap;
   }
 
diff --git a/src/views/project/cpns/ProjectToolbar.vue b/src/views/project/cpns/ProjectToolbar.vue
index cd3ce7e..71ac0b3 100644
--- a/src/views/project/cpns/ProjectToolbar.vue
+++ b/src/views/project/cpns/ProjectToolbar.vue
@@ -76,21 +76,28 @@ const keyword = computed({
 <style lang="less" scoped>
 .project-toolbar {
   .flex(row, flex-start, center);
-  gap: 24px;
+  gap: @spacing-base;
 
   &__field {
     .flex(row, flex-start, center);
     position: relative;
-    flex: 0 1 380px;
+    flex: 0 1 360px;
     min-width: 0;
-    height: 37px;
+    height: 36px;
+    border: 1px solid @border-color;
     border-radius: @radius-round;
-    background: @input-bg;
+    background: @project-input-bg;
+    transition: border-color 0.2s, background-color 0.2s;
+
+    &:focus-within {
+      border-color: @primary-color;
+      background: @white;
+    }
   }
 
   &__icon {
     position: absolute;
-    left: 16px;
+    left: @spacing-base;
     color: @text-color-disabled;
     pointer-events: none;
   }
@@ -113,10 +120,10 @@ const keyword = computed({
 
   &__btn {
     flex-shrink: 0;
-    height: 26px;
-    padding: 0 22px;
+    height: 36px;
+    padding: 0 @spacing-lg;
     border-radius: @radius-round;
-    background: @pill-bg;
+    background: @project-pill-bg;
     color: @text-color;
     font-size: @font-size-base;
     transition: color 0.2s, background-color 0.2s;
diff --git a/src/views/project/detail.vue b/src/views/project/detail.vue
index a38f149..4391073 100644
--- a/src/views/project/detail.vue
+++ b/src/views/project/detail.vue
@@ -92,75 +92,81 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="container project-detail">
-    <nav class="project-detail__breadcrumb text-secondary">
-      <RouterLink to="/project" class="link">
-        项目中心
-      </RouterLink>
-      <span> &gt; </span>
-      <span>项目详情</span>
-    </nav>
+  <div class="project-detail">
+    <div class="container project-detail__inner">
+      <nav class="project-detail__breadcrumb text-secondary">
+        <RouterLink to="/project" class="link">
+          项目中心
+        </RouterLink>
+        <span> &gt; </span>
+        <span>项目详情</span>
+      </nav>
 
-    <template v-if="current">
-      <div class="project-detail__info">
-        <ProjectInfoCard :project="current" />
-      </div>
+      <template v-if="current">
+        <div class="project-detail__panel">
+          <div class="project-detail__info">
+            <ProjectInfoCard :project="current" />
+          </div>
 
-      <div class="project-detail__tabs">
-        <button
-          v-for="tab in tabs"
-          :key="tab.value"
-          class="project-detail__tab"
-          :class="{
-            'is-active': activeTab === tab.value,
-            'is-loading': loadingTab === tab.value,
-          }"
-          @click="onTabClick(tab.value)"
-        >
-          {{ tab.label }}
-        </button>
-      </div>
+          <div class="project-detail__tabs">
+            <button
+              v-for="tab in tabs"
+              :key="tab.value"
+              class="project-detail__tab"
+              :class="{
+                'is-active': activeTab === tab.value,
+                'is-loading': loadingTab === tab.value,
+              }"
+              @click="onTabClick(tab.value)"
+            >
+              {{ tab.label }}
+            </button>
+          </div>
 
-      <template v-if="activeTab === 'progress'">
-        <ProjectProgress
-          :progress="current.progress"
-          :start-time="current.startTime"
-          :end-time="current.endTime"
-        />
-        <ProjectMilestones :milestones="current.milestones" />
-        <ProjectTeam :team="current.team" />
+          <div class="project-detail__body">
+            <template v-if="activeTab === 'progress'">
+              <ProjectProgress
+                :progress="current.progress"
+                :start-time="current.startTime"
+                :end-time="current.endTime"
+              />
+              <ProjectMilestones :milestones="current.milestones" />
+              <ProjectTeam :team="current.team" />
+            </template>
+
+            <ProjectFiles
+              v-if="activeTab === 'files'"
+              :files="current.files"
+              @delete="onDeleteFile"
+              @preview="onPreviewFile"
+              @download="onDownloadFile"
+            />
+
+            <ProjectFinance
+              v-if="activeTab === 'finance'"
+              :payment-plans="current.paymentPlans"
+              :invoice-records="current.invoiceRecords"
+              :contract-file="current.contractFile"
+              @pay="onPay"
+              @preview="onFinancePreview"
+              @download="onFinanceDownload"
+            />
+
+            <ProjectAfterSales
+              v-if="activeTab === 'afterSales'"
+              :after-sales="current.afterSales"
+              :project-status="current.status"
+              @apply="onApplyAfterSales"
+              @cancel="cancelVisible = true"
+            />
+          </div>
+        </div>
       </template>
 
-      <ProjectFiles
-        v-if="activeTab === 'files'"
-        :files="current.files"
-        @delete="onDeleteFile"
-        @preview="onPreviewFile"
-        @download="onDownloadFile"
-      />
-
-      <ProjectFinance
-        v-if="activeTab === 'finance'"
-        :payment-plans="current.paymentPlans"
-        :invoice-records="current.invoiceRecords"
-        :contract-file="current.contractFile"
-        @pay="onPay"
-        @preview="onFinancePreview"
-        @download="onFinanceDownload"
-      />
-
-      <ProjectAfterSales
-        v-if="activeTab === 'afterSales'"
-        :after-sales="current.afterSales"
-        :project-status="current.status"
-        @apply="onApplyAfterSales"
-        @cancel="cancelVisible = true"
-      />
-    </template>
-
-    <p v-else class="project-detail__empty text-secondary">
-      项目不存在或已取消
-    </p>
+      <p v-else class="project-detail__empty text-secondary">
+        项目不存在或已取消
+      </p>
+    </div>
 
     <ConfirmDialog
       v-model:visible="cancelVisible"
@@ -175,45 +181,52 @@ onMounted(load)
 
 <style lang="less" scoped>
 .project-detail {
-  .flex(column, flex-start, stretch);
-  gap: 0;
+  min-height: 100%;
   padding-bottom: @spacing-page-bottom;
-  background: @white;
+  background: @bg-color;
+
+  &__inner {
+    .flex(column, flex-start, stretch);
+    gap: 0;
+  }
 
-  // 设计稿 el55 面包屑 y=116，header 底 72 → padding-top 44px。
   &__breadcrumb {
-    padding-top: 44px;
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 27px;
+    padding-top: @spacing-lg;
+    font-size: @font-size-sm;
+    font-weight: 400;
+    line-height: 1.5;
     color: @project-breadcrumb;
   }
 
-  // 设计稿 el51 logo 盒 y=195（面包屑盒底 = 72+44+27 = 143）→ 间距 52px。
-  &__info {
-    margin-top: 52px;
+  &__panel {
+    margin-top: @spacing-base;
+    padding: @spacing-lg;
+    border-radius: @radius-base;
+    background: @white;
+  }
+
+  &__info {
+    margin-top: 0;
   }
 
-  // 设计稿 el42 tab 文字 y=264，meta 文字底 231+15=246。
   &__tabs {
     .flex(row, flex-start, center);
-    gap: 16.45px;
-    height: 41px;
-    // 老大要求：信息卡与 tabs 栏之间留 20px 间距（原设计稿 2px 覆盖）。
-    margin-top: 20px;
+    gap: @spacing-lg;
+    height: 40px;
+    margin-top: @spacing-lg;
     box-sizing: border-box;
-    border-bottom: 1px solid @project-divider;
+    border-bottom: 1px solid @border-color;
   }
 
   &__tab {
     position: relative;
-    padding: 0 0 24px;
+    padding: 0 0 @spacing-base;
     border: none;
     background: transparent;
     color: @project-cell;
-    font-size: 13px;
+    font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 17px;
+    line-height: 1.4;
     cursor: pointer;
     transition: color 0.2s;
 
@@ -242,6 +255,10 @@ onMounted(load)
     }
   }
 
+  &__body {
+    padding-top: @spacing-lg;
+  }
+
   &__empty {
     padding: @spacing-xxl 0;
     text-align: center;
diff --git a/src/views/project/index.vue b/src/views/project/index.vue
index 536a8b5..7407f18 100644
--- a/src/views/project/index.vue
+++ b/src/views/project/index.vue
@@ -111,42 +111,44 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .project {
+  min-height: 100%;
   padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__head {
-    padding: 16px 0 32px;
+    padding: @spacing-lg 0;
     background: @white;
+    border-bottom: 1px solid @border-color;
   }
 
   &__title {
-    font-size: @font-size-xxl;
+    font-size: @font-size-title;
     font-weight: 600;
     color: @heading-color;
-    line-height: 1.2;
+    line-height: 1.3;
   }
 
   &__slogan {
-    margin-top: 14px;
+    margin-top: @spacing-sm;
     font-size: @font-size-base;
     color: @text-color-secondary;
   }
 
   &__body {
     .flex(row, flex-start, stretch);
-    gap: 17px;
-    padding-top: 18px;
+    gap: @spacing-lg;
+    padding-top: @spacing-lg;
   }
 
   &__main {
     flex: 1;
     min-width: 0;
-    padding: 18px 12px 20px;
+    padding: @spacing-lg;
     border-radius: @radius-base;
     background: @white;
 
-    // 搜索表单（ProjectToolbar）与下方项目表格间距 35px（老大指定）
     .project-toolbar + .project-table {
-      margin-top: 35px;
+      margin-top: @spacing-lg;
     }
   }
 }
diff --git a/src/views/service/cpns/ChatWindow.vue b/src/views/service/cpns/ChatWindow.vue
index 056e73e..01b9103 100644
--- a/src/views/service/cpns/ChatWindow.vue
+++ b/src/views/service/cpns/ChatWindow.vue
@@ -60,7 +60,7 @@ watch(
 <style lang="less" scoped>
 .chat-window {
   .flex(column, flex-start, stretch);
-  border: 1px solid @service-card-line;
+  border: none;
   border-radius: @radius-base;
   background: @white;
   box-sizing: border-box;
@@ -68,10 +68,10 @@ watch(
 
   &__header {
     .flex(row, flex-start, center);
-    gap: 16px;
-    height: 66px;
-    padding: 0 22px;
-    border-bottom: 1px solid @service-card-line;
+    gap: @spacing-base;
+    height: 56px;
+    padding: 0 @spacing-lg;
+    border-bottom: 1px solid @border-color;
     background: @white;
     box-sizing: border-box;
   }
diff --git a/src/views/service/index.vue b/src/views/service/index.vue
index 736b3af..bbbf36e 100644
--- a/src/views/service/index.vue
+++ b/src/views/service/index.vue
@@ -29,7 +29,7 @@ onMounted(() => {
       slogan="在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题"
     />
 
-    <div class="service__wrap">
+    <div class="container service__wrap">
       <ChatWindow
         :messages="messages"
         @send="onSend"
@@ -44,12 +44,13 @@ onMounted(() => {
   .flex(column, flex-start, stretch);
   gap: 0;
   width: 100%;
-  padding-bottom: 60px;
-  background: @message-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__wrap {
     width: 100%;
-    padding: 0 70px;
+    padding: @spacing-lg 0 0;
     box-sizing: border-box;
   }
 }