From d0779fe37c2ffc4dec8171fd2213c60241e36cfc Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Tue, 13 Oct 2026 15:14:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=A1=88=E4=BE=8B=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=95=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppFooter.vue                  | 22 +++++++-------
 src/components/AppHeader.vue                  | 27 ++++++++---------
 src/views/contract/cpns/ContractSignPanel.vue |  6 ++--
 src/views/finance/checkout.vue                |  6 ++--
 src/views/finance/pay-result.vue              | 17 ++++++-----
 src/views/home/cpns/HomeServiceContents.vue   | 14 ++++-----
 src/views/home/cpns/HomeServiceTypes.vue      | 29 ++++++++++---------
 src/views/profile/address.vue                 | 16 +++++-----
 src/views/profile/cpns/FeedbackForm.vue       |  6 ++--
 src/views/profile/cpns/HotlinePanel.vue       | 26 ++++++++---------
 src/views/profile/cpns/QualificationCard.vue  | 16 +++++-----
 src/views/profile/cpns/SecurityPanel.vue      | 29 ++++++++++---------
 src/views/profile/delete-account.vue          |  2 +-
 src/views/profile/favorites.vue               | 10 ++++---
 src/views/project/after-sales.vue             | 15 ++++++++--
 15 files changed, 129 insertions(+), 112 deletions(-)

diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 31a311d..0352797 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -121,17 +121,17 @@ const coreBusiness = [
   }
 
   &__name {
-    font-size: 28px;
+    font-size: @font-size-xl;
     font-weight: 500;
-    line-height: 41px;
+    line-height: 1.4;
     color: @white;
   }
 
   &__desc {
     margin-top: 0;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 23px;
+    font-size: @font-size-sm;
+    font-weight: 400;
+    line-height: 1.5;
   }
 
   &__col {
@@ -154,18 +154,18 @@ const coreBusiness = [
   }
 
   &__title {
-    margin-bottom: 20px;
-    font-size: 28px;
+    margin-bottom: @spacing-base;
+    font-size: @font-size-lg;
     font-weight: 500;
-    line-height: 41px;
+    line-height: 1.4;
     white-space: nowrap;
     color: @white;
   }
 
   &__link {
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 23px;
+    font-size: @font-size-sm;
+    font-weight: 400;
+    line-height: 1.8;
     white-space: nowrap;
     cursor: pointer;
     transition: color 0.2s;
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index d5202be..3807597 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -106,16 +106,16 @@ onMounted(() => void messageStore.fetchUnreadCount())
 
   &__nav {
     .flex(row, center);
-    gap: @header-nav-gap;
+    gap: clamp(@spacing-lg, 4vw, 56px);
     height: 100%;
 
     &-item {
       position: relative;
       .flex(row, center);
       height: 100%;
-      font-size: 18px;
+      font-size: @font-size-md;
       font-weight: 500;
-      color: @black;
+      color: @heading-color;
       transition: color 0.2s;
 
       &:hover,
@@ -127,8 +127,8 @@ onMounted(() => void messageStore.fetchUnreadCount())
         content: '';
         position: absolute;
         left: 50%;
-        bottom: 11px;
-        width: 29px;
+        bottom: 12px;
+        width: 24px;
         height: 2px;
         border-radius: 1px;
         background: @home-tab-active;
@@ -139,20 +139,21 @@ onMounted(() => void messageStore.fetchUnreadCount())
 
   &__actions {
     .flex(row, flex-end, center);
-    gap: 29px;
+    gap: @spacing-base;
     margin-left: auto;
     flex-shrink: 0;
   }
 
   &__action {
     .flex(row, center);
-    gap: 5px;
-    width: 106px;
+    gap: @spacing-xs;
+    min-width: 96px;
     height: 36px;
-    border-radius: @radius-sm;
+    padding: 0 @spacing-base;
+    border-radius: @radius-round;
     background: @primary-color;
     color: @white;
-    font-size: 16px;
+    font-size: @font-size-sm;
     font-weight: 500;
     transition: opacity 0.2s;
 
@@ -161,8 +162,8 @@ onMounted(() => void messageStore.fetchUnreadCount())
     }
 
     &-icon {
-      width: 18px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
     }
   }
 
@@ -196,7 +197,7 @@ onMounted(() => void messageStore.fetchUnreadCount())
   }
 
   &__login {
-    font-size: 16px;
+    font-size: @font-size-base;
     font-weight: 500;
   }
 }
diff --git a/src/views/contract/cpns/ContractSignPanel.vue b/src/views/contract/cpns/ContractSignPanel.vue
index e7478ea..18fd4d1 100644
--- a/src/views/contract/cpns/ContractSignPanel.vue
+++ b/src/views/contract/cpns/ContractSignPanel.vue
@@ -25,9 +25,9 @@ const emit = defineEmits<{ refresh: [] }>()
 <style lang="less" scoped>
 .sign-panel {
   .flex(row, flex-start, flex-start);
-  gap: 48px;
-  padding: 28px 32px;
-  border-radius: @radius-lg;
+  gap: @spacing-xl;
+  padding: @spacing-xl;
+  border-radius: @radius-base;
   background: @white;
 
   &__left {
diff --git a/src/views/finance/checkout.vue b/src/views/finance/checkout.vue
index db92588..2df7a4e 100644
--- a/src/views/finance/checkout.vue
+++ b/src/views/finance/checkout.vue
@@ -210,11 +210,13 @@ onBeforeUnmount(() => {
 .checkout {
   .flex(column, flex-start, stretch);
   gap: @spacing-base;
+  min-height: 100%;
   padding-top: @spacing-lg;
-  padding-bottom: @spacing-xxl;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
-    font-size: @font-size-base;
+    font-size: @font-size-sm;
   }
 
   &__layout {
diff --git a/src/views/finance/pay-result.vue b/src/views/finance/pay-result.vue
index 634cef3..d8d1c94 100644
--- a/src/views/finance/pay-result.vue
+++ b/src/views/finance/pay-result.vue
@@ -131,15 +131,16 @@ onMounted(() => {
 <style lang="less" scoped>
 .pay-result {
   width: 100%;
-  padding-bottom: 344px;
-  background: @contract-page-bg;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__breadcrumb {
     .flex(row, flex-start, center);
-    padding-top: 22px;
-    font-size: 13px;
+    padding-top: @spacing-lg;
+    font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 17px;
+    line-height: 1.5;
     color: @project-muted;
   }
 
@@ -164,13 +165,13 @@ onMounted(() => {
 
   &__check {
     .flex(row, center, center);
-    width: 120px;
-    height: 120px;
+    width: 72px;
+    height: 72px;
     margin: 0 auto;
     border-radius: 50%;
     background: @finance-result-circle;
     color: @white;
-    font-size: 56px;
+    font-size: @font-size-hero;
     font-weight: 400;
     line-height: 1;
   }
diff --git a/src/views/home/cpns/HomeServiceContents.vue b/src/views/home/cpns/HomeServiceContents.vue
index ed7cfe4..08b4095 100644
--- a/src/views/home/cpns/HomeServiceContents.vue
+++ b/src/views/home/cpns/HomeServiceContents.vue
@@ -27,10 +27,10 @@ defineProps<Props>()
 .home-contents {
   &__block {
     margin-bottom: @spacing-base;
-    padding: 40px 45px 0;
-    border-radius: @radius-lg;
+    padding: @spacing-xl;
+    border-radius: @radius-base;
     background: @white;
-    min-height: 593px;
+    min-height: 0;
     box-sizing: border-box;
 
     &:last-child {
@@ -39,10 +39,10 @@ defineProps<Props>()
   }
 
   &__title {
-    margin: 0 0 301px;
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 52px;
+    margin: 0 0 @spacing-lg;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.4;
     color: @home-ink;
   }
 
diff --git a/src/views/home/cpns/HomeServiceTypes.vue b/src/views/home/cpns/HomeServiceTypes.vue
index 98ebaf4..c0f7cde 100644
--- a/src/views/home/cpns/HomeServiceTypes.vue
+++ b/src/views/home/cpns/HomeServiceTypes.vue
@@ -43,40 +43,41 @@ function isImageIcon(icon?: string): boolean {
 
 <style lang="less" scoped>
 .home-service-types {
-  margin-bottom: 20px;
-  padding: 24px 42px 0;
-  border-radius: @radius-lg;
+  margin-bottom: @spacing-base;
+  padding: @spacing-lg @spacing-xl;
+  border-radius: @radius-base;
   background: @white;
-  height: 287px;
+  min-height: 0;
   box-sizing: border-box;
 
   &__title {
-    margin: 0 0 132px;
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 52px;
+    margin: 0 0 @spacing-lg;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    line-height: 1.4;
     color: @home-ink;
   }
 
   &__list {
     .flex(row, flex-start);
-    gap: 0;
+    gap: @spacing-base;
+    flex-wrap: wrap;
   }
 
   &__item {
     .flex(column, center);
-    width: 187px;
-    gap: 47px;
+    width: 120px;
+    gap: @spacing-base;
   }
 
   &__icon {
     .flex(row, center);
-    width: 68px;
-    height: 68px;
+    width: 48px;
+    height: 48px;
     border-radius: @radius-round;
     background: @primary-light;
     color: @white;
-    font-size: 24px;
+    font-size: @font-size-lg;
     font-weight: 600;
     overflow: hidden;
 
diff --git a/src/views/profile/address.vue b/src/views/profile/address.vue
index 881dc48..537f71f 100644
--- a/src/views/profile/address.vue
+++ b/src/views/profile/address.vue
@@ -217,11 +217,11 @@ onMounted(() => {
 .address-row {
   position: relative;
   .flex(row, flex-start, center);
-  min-height: 78px;
-  padding: 14px 24px 14px 52px;
-  border: 1px solid @profile-card-border;
-  border-radius: @radius-lg;
-  background: @white;
+  min-height: 72px;
+  padding: @spacing-base @spacing-lg;
+  border: 1px solid @border-color;
+  border-radius: @radius-base;
+  background: @bg-color-light;
   box-sizing: border-box;
 
   &__tag {
@@ -273,9 +273,9 @@ onMounted(() => {
 
   &__btn {
     height: 28px;
-    padding: 0 14px;
-    border: 1px solid @profile-card-border;
-    border-radius: @radius-base;
+    padding: 0 @spacing-sm;
+    border: 1px solid @border-color;
+    border-radius: @radius-round;
     background: @white;
     color: @finance-entry-text;
     font-size: @font-size-sm;
diff --git a/src/views/profile/cpns/FeedbackForm.vue b/src/views/profile/cpns/FeedbackForm.vue
index 1079949..20c0871 100644
--- a/src/views/profile/cpns/FeedbackForm.vue
+++ b/src/views/profile/cpns/FeedbackForm.vue
@@ -235,10 +235,10 @@ function onSubmit(): void {
   }
 
   &__attach-title {
-    font-size: 16px;
-    font-weight: 700;
+    font-size: @font-size-base;
+    font-weight: 600;
     color: @heading-color;
-    line-height: 24px;
+    line-height: 1.4;
   }
 
   &__attach-hint {
diff --git a/src/views/profile/cpns/HotlinePanel.vue b/src/views/profile/cpns/HotlinePanel.vue
index 6760368..dd6a7b2 100644
--- a/src/views/profile/cpns/HotlinePanel.vue
+++ b/src/views/profile/cpns/HotlinePanel.vue
@@ -29,11 +29,11 @@ const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
   // 设计稿 #01：浅蓝横幅卡，蓝圆 + 标题/电话/时间三行左对齐
   &__card {
     .flex(row, flex-start, center);
-    gap: 32px;
+    gap: @spacing-lg;
     width: 100%;
-    padding: 30px 32px;
+    padding: @spacing-lg;
     border-radius: @radius-base;
-    background: @profile-hotline-bg;
+    background: @filter-selected-bg;
     box-sizing: border-box;
   }
 
@@ -50,25 +50,25 @@ const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
   }
 
   &__title {
-    font-size: 15px;
-    font-weight: 700;
+    font-size: @font-size-base;
+    font-weight: 600;
     color: @heading-color;
-    line-height: 22px;
+    line-height: 1.4;
   }
 
   &__number {
-    margin-top: 6px;
-    font-size: 24px;
-    font-weight: 700;
+    margin-top: @spacing-sm;
+    font-size: @font-size-xl;
+    font-weight: 600;
     color: @primary-strong;
-    line-height: 32px;
+    line-height: 1.3;
   }
 
   &__time {
-    margin-top: 6px;
-    font-size: 12px;
+    margin-top: @spacing-xs;
+    font-size: @font-size-sm;
     color: @text-color-secondary;
-    line-height: 17px;
+    line-height: 1.5;
   }
 }
 </style>
diff --git a/src/views/profile/cpns/QualificationCard.vue b/src/views/profile/cpns/QualificationCard.vue
index 21a0251..d4cf5ee 100644
--- a/src/views/profile/cpns/QualificationCard.vue
+++ b/src/views/profile/cpns/QualificationCard.vue
@@ -75,11 +75,11 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
 .qual-row {
   position: relative;
   .flex(row, flex-start, center);
-  min-height: 78px;
-  padding: 14px 24px 14px 52px;
-  border: 1px solid @profile-card-border;
-  border-radius: @radius-lg;
-  background: @white;
+  min-height: 72px;
+  padding: @spacing-base @spacing-lg;
+  border: 1px solid @border-color;
+  border-radius: @radius-base;
+  background: @bg-color-light;
   box-sizing: border-box;
 
   &__col {
@@ -139,9 +139,9 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
 
   &__btn {
     height: 28px;
-    padding: 0 14px;
-    border: 1px solid @profile-card-border;
-    border-radius: @radius-base;
+    padding: 0 @spacing-sm;
+    border: 1px solid @border-color;
+    border-radius: @radius-round;
     background: @white;
     color: @finance-entry-text;
     font-size: @font-size-sm;
diff --git a/src/views/profile/cpns/SecurityPanel.vue b/src/views/profile/cpns/SecurityPanel.vue
index caf8638..e6fdfe9 100644
--- a/src/views/profile/cpns/SecurityPanel.vue
+++ b/src/views/profile/cpns/SecurityPanel.vue
@@ -121,12 +121,12 @@ function goDeleteAccount(): void {
 
   &__title {
     position: relative;
-    padding-left: 14px;
-    margin-bottom: 22px;
+    padding-left: @spacing-base;
+    margin-bottom: @spacing-base;
     font-size: @font-size-base;
     font-weight: 600;
     color: @profile-ink;
-    line-height: 20px;
+    line-height: 1.4;
 
     &::before {
       content: '';
@@ -142,22 +142,23 @@ function goDeleteAccount(): void {
 
   &__row {
     .flex(row, flex-start, center);
-    height: 85px;
-    padding: 0 48px 0 52px;
-    border: 1px solid @profile-line;
+    min-height: 72px;
+    padding: 0 @spacing-lg;
+    border: 1px solid @border-color;
     border-radius: @radius-base;
-    background: @white;
+    background: @bg-color-light;
     box-sizing: border-box;
     cursor: pointer;
-    transition: border-color 0.2s;
+    transition: border-color 0.2s, background-color 0.2s;
 
     &:hover {
-      border-color: @profile-nav-active-bg;
+      border-color: @primary-color;
+      background: @filter-selected-bg;
     }
   }
 
   &__row + &__row {
-    margin-top: 16px;
+    margin-top: @spacing-base;
   }
 
   &__icon {
@@ -227,10 +228,10 @@ function goDeleteAccount(): void {
 
   &__delete {
     width: 100%;
-    height: 48px;
-    margin-top: 108px;
-    border: 1px solid @profile-line;
-    border-radius: @profile-radius;
+    height: 40px;
+    margin-top: @spacing-xxl;
+    border: 1px solid @border-color;
+    border-radius: @radius-round;
     background: @white;
     color: @finance-axis-text;
     font-size: @font-size-base;
diff --git a/src/views/profile/delete-account.vue b/src/views/profile/delete-account.vue
index 3321e55..0a8b957 100644
--- a/src/views/profile/delete-account.vue
+++ b/src/views/profile/delete-account.vue
@@ -253,7 +253,7 @@ function onDeleteAccount(): void {
     border: 2px solid @danger-color;
     border-radius: @radius-round;
     color: @danger-color;
-    font-size: 26px;
+    font-size: @font-size-xl;
     font-weight: 700;
     font-style: italic;
     line-height: 1;
diff --git a/src/views/profile/favorites.vue b/src/views/profile/favorites.vue
index 6423bb9..ad41c9b 100644
--- a/src/views/profile/favorites.vue
+++ b/src/views/profile/favorites.vue
@@ -95,19 +95,21 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .favorites {
-  padding-bottom: 78px;
+  min-height: 100%;
+  padding-bottom: @spacing-page-bottom;
+  background: @bg-color;
 
   &__body {
     .flex(row, flex-start, flex-start);
-    gap: 20px;
-    padding-top: 20px;
+    gap: @spacing-lg;
+    padding-top: @spacing-lg;
   }
 
   &__main {
     .flex(column, flex-start, stretch);
     flex: 1;
     min-width: 0;
-    gap: 24px;
+    gap: @spacing-lg;
   }
 
   &__pager {
diff --git a/src/views/project/after-sales.vue b/src/views/project/after-sales.vue
index 03c88e4..f35756d 100644
--- a/src/views/project/after-sales.vue
+++ b/src/views/project/after-sales.vue
@@ -153,13 +153,18 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="container after-sales">
+  <div class="after-sales">
+    <div class="container after-sales__inner">
     <nav class="after-sales__breadcrumb">
       <RouterLink to="/project" class="link">
         项目中心
       </RouterLink>
       <span> &gt; </span>
-      <span>项目详情</span>
+      <RouterLink :to="`/project/${projectId}`" class="link">
+        项目详情
+      </RouterLink>
+      <span> &gt; </span>
+      <span>申请售后</span>
     </nav>
 
     <header class="after-sales__header">
@@ -300,16 +305,20 @@ onMounted(() => {
         </AppButton>
       </div>
     </footer>
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 .after-sales {
-  .flex(column, flex-start, stretch);
   min-height: 100%;
   padding-bottom: @spacing-page-bottom;
   background: @bg-color;
 
+  &__inner {
+    .flex(column, flex-start, stretch);
+  }
+
   &__breadcrumb {
     padding-top: @spacing-lg;
     font-size: @font-size-sm;