feet:designer-demo02

angular.json

@@ -43,8 +43,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "10kB",
+                  "maximumError": "15kB"
                 }
               ],
               "outputHashing": "all"

src/app/pages/designer/dashboard/dashboard.html

@@ -71,11 +71,12 @@
       </div>
       
       <div class="quick-access-grid">
-        <a [routerLink]="['/designer/project-detail', tasks[0]?.projectId]" class="quick-access-item">
+        <a [routerLink]="['/designer/project-detail', tasks[0].projectId]" class="quick-access-item">
           <h3>待确认项目</h3>
           <p>{{ tasks.length }}个项目待处理</p>
         </a>
         
+        
         <a [routerLink]="['/designer/project-detail', feedbackProjectId]" class="quick-access-item">
           <h3>待反馈项目</h3>
           <p>{{ overdueTasks.length }}个项目需反馈</p>

src/app/pages/designer/dashboard/dashboard.scss

@@ -1,22 +1,28 @@
+// 导入iOS主题变量
+@import '../ios-theme.scss';
+
 .dashboard-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
+  background-color: $ios-background;
+  min-height: 100vh;
 }
 
 .dashboard-header {
   margin-bottom: 30px;
   h1 {
-    font-size: 28px;
-    color: #333;
-    font-weight: 600;
+    font-size: 32px;
+    color: $ios-text-primary;
+    font-weight: $ios-font-weight-semibold;
+    font-family: $ios-font-family;
   }
 }
 
 .dashboard-main {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: 24px;
   
   .task-section {
     grid-column: 1 / -1;
@@ -24,38 +30,41 @@
 }
 
 .section-header {
-  margin-bottom: 15px;
+  margin-bottom: 16px;
   h2 {
-    font-size: 20px;
-    color: #555;
-    font-weight: 500;
+    font-size: 22px;
+    color: $ios-text-primary;
+    font-weight: $ios-font-weight-medium;
     display: flex;
     align-items: center;
+    font-family: $ios-font-family;
     &::before {
       content: '';
       display: inline-block;
-      width: 4px;
+      width: 3px;
       height: 20px;
-      background-color: #1890ff;
-      margin-right: 8px;
+      background-color: $ios-primary;
+      margin-right: 10px;
+      border-radius: $ios-radius-full;
     }
   }
 }
 
 .task-list {
   display: grid;
-  gap: 15px;
+  gap: 16px;
 }
 
 .task-item {
-  background: #fff;
-  border-radius: 8px;
+  background: $ios-card-background;
+  border-radius: $ios-radius-lg;
   padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: $ios-shadow-card;
   transition: all 0.3s ease;
+  border: 1px solid $ios-border;
   
   &:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: $ios-shadow-lg;
     transform: translateY(-2px);
   }
   
@@ -63,80 +72,97 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
     
     h3 {
-      font-size: 16px;
-      color: #333;
+      font-size: 17px;
+      color: $ios-text-primary;
       margin: 0;
+      font-family: $ios-font-family;
     }
     
     .task-stage {
-      font-size: 14px;
-      padding: 4px 12px;
-      border-radius: 16px;
-      background-color: #e6f7ff;
-      color: #1890ff;
+      font-size: 13px;
+      padding: 6px 14px;
+      border-radius: $ios-radius-full;
+      background-color: $ios-primary-light;
+      color: $ios-primary;
+      border: 1px solid $ios-primary;
     }
   }
   
   .task-info {
-    margin-bottom: 15px;
+    margin-bottom: 16px;
     
     .project-name {
-      font-size: 14px;
-      color: #666;
-      margin: 5px 0;
+      font-size: 15px;
+      color: $ios-text-secondary;
+      margin: 6px 0;
     }
     
     .deadline {
-      font-size: 14px;
-      color: #666;
-      margin: 5px 0;
+      font-size: 15px;
+      color: $ios-text-secondary;
+      margin: 6px 0;
       
       &.overdue {
-        color: #f5222d;
+        color: $ios-danger;
       }
       
       .overdue-badge {
-        background-color: #ffccc7;
-        color: #f5222d;
-        padding: 2px 8px;
-        border-radius: 12px;
+        background-color: rgba(255, 59, 48, 0.1);
+        color: $ios-danger;
+        padding: 4px 10px;
+        border-radius: $ios-radius-full;
         font-size: 12px;
         margin-left: 8px;
+        border: 1px solid $ios-danger;
       }
     }
   }
   
   .task-actions {
     display: flex;
-    gap: 10px;
+    gap: 12px;
     
     button {
-      padding: 8px 16px;
+      padding: 10px 18px;
       border: none;
-      border-radius: 4px;
-      font-size: 14px;
+      border-radius: $ios-radius-md;
+      font-size: 15px;
       cursor: pointer;
-      transition: all 0.3s ease;
+      transition: $ios-animation-normal $ios-animation-easing;
+      font-weight: $ios-font-weight-medium;
+      font-family: $ios-font-family;
     }
     
     .btn-complete {
-      background-color: #52c41a;
+      background-color: $ios-success;
       color: white;
       
       &:hover {
-        background-color: #73d13d;
+        background-color: darken($ios-success, 5%);
+        transform: translateY(-1px);
+        box-shadow: $ios-shadow-md;
+      }
+      
+      &:active {
+        transform: translateY(0);
       }
     }
     
     .btn-detail {
-      background-color: #1890ff;
+      background-color: $ios-primary;
       color: white;
       
       &:hover {
-        background-color: #40a9ff;
+        background-color: #003A8C;
+        transform: translateY(-1px);
+        box-shadow: $ios-shadow-md;
+      }
+      
+      &:active {
+        transform: translateY(0);
       }
     }
   }
@@ -148,14 +174,14 @@
 
 .warning-list {
   display: grid;
-  gap: 15px;
+  gap: 16px;
 }
 
 .warning-item {
-  background: #fff7e6;
-  border: 1px solid #ffd591;
-  border-radius: 8px;
-  padding: 15px;
+  background: rgba(255, 149, 0, 0.1);
+  border: 1px solid $ios-warning;
+  border-radius: $ios-radius-lg;
+  padding: 16px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -163,15 +189,16 @@
   .warning-content {
     
     .warning-title {
-      font-size: 16px;
-      color: #d46b08;
-      font-weight: 500;
-      margin: 0 0 5px 0;
+      font-size: 17px;
+      color: $ios-warning;
+      font-weight: $ios-font-weight-medium;
+      margin: 0 0 6px 0;
+      font-family: $ios-font-family;
     }
     
     .warning-detail {
-      font-size: 14px;
-      color: #fa8c16;
+      font-size: 15px;
+      color: $ios-warning;
       margin: 0;
     }
   }
@@ -179,18 +206,26 @@
   .warning-actions {
     
     .btn-generate-reminder {
-      padding: 6px 16px;
-      border: 1px solid #fa8c16;
-      border-radius: 4px;
-      background-color: white;
-      color: #fa8c16;
-      font-size: 14px;
+      padding: 10px 18px;
+      border: 1px solid $ios-warning;
+      border-radius: $ios-radius-md;
+      background-color: $ios-card-background;
+      color: $ios-warning;
+      font-size: 15px;
       cursor: pointer;
       transition: all 0.3s ease;
+      font-weight: 500;
+      font-family: $ios-font-family;
       
       &:hover {
-        background-color: #fa8c16;
+        background-color: $ios-warning;
         color: white;
+        transform: translateY(-1px);
+        box-shadow: $ios-shadow-md;
+      }
+      
+      &:active {
+        transform: translateY(0);
       }
     }
   }
@@ -202,42 +237,45 @@
 
 .quick-access-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 15px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
 }
 
 .quick-access-item {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: $ios-card-background;
+  border-radius: $ios-radius-lg;
+  padding: 20px 24px;
+  box-shadow: $ios-shadow-card;
   text-decoration: none;
   transition: all 0.3s ease;
+  border: 1px solid $ios-border;
   
   &:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: $ios-shadow-md;
     transform: translateY(-2px);
   }
   
   h3 {
-    font-size: 18px;
-    color: #333;
-    margin: 0 0 10px 0;
+    font-size: 20px;
+    color: $ios-text-primary;
+    margin: 0 0 12px 0;
+    font-family: $ios-font-family;
   }
   
   p {
-    font-size: 14px;
-    color: #666;
+    font-size: 15px;
+    color: $ios-text-secondary;
     margin: 0;
   }
 }
 
 .empty-state {
   text-align: center;
-  padding: 40px 20px;
-  color: #999;
-  background-color: #fafafa;
-  border-radius: 8px;
+  padding: 48px 24px;
+  color: $ios-text-tertiary;
+  background-color: $ios-card-background;
+  border-radius: $ios-radius-lg;
+  border: 1px dashed $ios-border;
 }
 
 .reminder-modal {
@@ -251,41 +289,53 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  backdrop-filter: blur(8px);
 }
 
 .modal-content {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
+  background: $ios-card-background;
+  border-radius: $ios-radius-xl;
+  padding: 24px;
   max-width: 400px;
   width: 90%;
   text-align: center;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  border: 1px solid $ios-border;
   
   h3 {
-    font-size: 18px;
-    color: #333;
-    margin: 0 0 15px 0;
+    font-size: 20px;
+    color: $ios-text-primary;
+    margin: 0 0 16px 0;
+    font-family: $ios-font-family;
   }
   
   p {
-    font-size: 14px;
-    color: #666;
-    margin: 0 0 20px 0;
-    line-height: 1.5;
+    font-size: 15px;
+    color: $ios-text-secondary;
+    margin: 0 0 24px 0;
+    line-height: 1.6;
   }
   
   .btn-close {
-    padding: 8px 20px;
+    padding: 12px 24px;
     border: none;
-    border-radius: 4px;
-    background-color: #1890ff;
+    border-radius: $ios-radius-md;
+    background-color: $ios-primary;
     color: white;
-    font-size: 14px;
+    font-size: 15px;
     cursor: pointer;
     transition: all 0.3s ease;
+    font-weight: $ios-font-weight-medium;
+    font-family: $ios-font-family;
     
     &:hover {
-      background-color: #40a9ff;
+      background-color: darken($ios-primary, 5%);
+      transform: translateY(-1px);
+      box-shadow: $ios-shadow-md;
+    }
+    
+    &:active {
+      transform: translateY(0);
     }
   }
 }

src/app/pages/designer/ios-theme.scss

@@ -0,0 +1,67 @@
+// iOS主题变量 - 白色和克莱茵蓝主色调
+
+// 颜色变量
+$ios-primary: #0047AB; // 克莱茵蓝 - iOS风格的蓝色
+$ios-primary-light: #4D91F7; // 较浅的蓝色
+$ios-background: #FFFFFF; // 白色背景
+$ios-background-secondary: #F2F2F7; // 浅灰色背景
+$ios-card-background: #FFFFFF; // 卡片背景色
+$ios-text-primary: #000000; // 主要文本色
+$ios-text-secondary: #8E8E93; // 次要文本色
+$ios-text-tertiary: #C7C7CC; // 三级文本色
+$ios-border: #E5E5EA; // 边框颜色
+$ios-success: #34C759; // 成功色
+$ios-warning: #FF9500; // 警告色
+$ios-danger: #FF3B30; // 危险色
+$ios-info: #5AC8FA; // 信息色
+
+// 字体变量
+$ios-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+$ios-font-size-xs: 12px;
+$ios-font-size-sm: 14px;
+$ios-font-size-base: 16px;
+$ios-font-size-lg: 18px;
+$ios-font-size-xl: 22px;
+$ios-font-weight-light: 300;
+$ios-font-weight-regular: 400;
+$ios-font-weight-medium: 500;
+$ios-font-weight-semibold: 600;
+$ios-font-weight-bold: 700;
+
+// 圆角变量
+$ios-radius-sm: 6px;
+$ios-radius-md: 8px;
+$ios-radius-lg: 12px;
+$ios-radius-xl: 16px;
+$ios-radius-full: 9999px;
+
+// 阴影变量
+$ios-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+$ios-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+$ios-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05);
+$ios-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+// 间距变量
+$ios-spacing-xs: 4px;
+$ios-spacing-sm: 8px;
+$ios-spacing-md: 12px;
+$ios-spacing-lg: 16px;
+$ios-spacing-xl: 20px;
+$ios-spacing-xxl: 24px;
+$ios-spacing-xxxl: 32px;
+
+// 动画变量
+$ios-animation-fast: 0.2s;
+$ios-animation-normal: 0.3s;
+$ios-animation-slow: 0.5s;
+$ios-animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
+
+// 交互反馈
+$ios-feedback-tap: transform 0.2s ease, box-shadow 0.2s ease;
+$ios-feedback-hover: transform 0.2s ease, box-shadow 0.2s ease;
+
+// iOS风格的滚动条
+$ios-scrollbar-width: 8px;
+$ios-scrollbar-track: $ios-background-secondary;
+$ios-scrollbar-thumb: $ios-text-tertiary;
+$ios-scrollbar-thumb-hover: $ios-text-secondary;

src/app/pages/designer/personal-board/personal-board.html

@@ -13,16 +13,17 @@
       
       <div class="skill-tags-container">
         <div *ngFor="let tag of skillTags" class="skill-tag" [class.level-high]="tag.level >= 4" [class.level-medium]="tag.level >= 2 && tag.level < 4">
-          <span class="tag-name">{{ tag.name }}</span>
+          <span class="tag-name">{{ tag?.name }}</span>
           <div class="tag-level">
             <div class="level-bar">
-              <div class="level-fill" [style.width.%]="(tag.level / 5) * 100"></div>
+              <div class="level-fill" [style.width.%]="tag?.level ? (tag.level / 5) * 100 : 0"></div>
             </div>
-            <span class="level-text">{{ tag.level }}/5</span>
+            <span class="level-text">{{ tag?.level }}/5</span>
           </div>
-          <span class="tag-count">{{ tag.count }}个项目</span>
+          <span class="tag-count">{{ tag?.count }}个项目</span>
         </div>
       </div>
+     
 
       <!-- 匹配订单推荐 -->
       <div class="matching-orders-section">

src/app/pages/designer/personal-board/personal-board.scss

@@ -1,22 +1,28 @@
+// 导入iOS主题变量
+@import '../ios-theme.scss';
+
 .personal-board-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
+  background-color: $ios-background;
+  min-height: 100vh;
 }
 
 .personal-board-header {
   margin-bottom: 30px;
   h1 {
-    font-size: 28px;
-    color: #333;
-    font-weight: 600;
+    font-size: 32px;
+    color: $ios-text-primary;
+    font-weight: $ios-font-weight-semibold;
+    font-family: $ios-font-family;
   }
 }
 
 .personal-board-main {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 30px;
+  gap: 24px;
   
   .skill-board-section,
   .settlement-section {
@@ -25,16 +31,17 @@
 }
 
 .section-header {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   h2 {
-    font-size: 20px;
-    color: #333;
-    font-weight: 500;
-    margin: 0 0 5px 0;
+    font-size: 22px;
+    color: $ios-text-primary;
+    font-weight: $ios-font-weight-medium;
+    margin: 0 0 4px 0;
+    font-family: $ios-font-family;
   }
   p {
     font-size: 14px;
-    color: #666;
+    color: $ios-text-secondary;
     margin: 0;
   }
 }
@@ -43,38 +50,41 @@
 .skill-tags-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 15px;
-  margin-bottom: 30px;
+  gap: 16px;
+  margin-bottom: 24px;
 }
 
 .skill-tag {
-  background: #f0f2f5;
-  border-radius: 8px;
-  padding: 15px 20px;
+  background: $ios-card-background;
+  border-radius: $ios-radius-lg;
+  padding: 16px 20px;
   min-width: 200px;
-  transition: all 0.3s ease;
+  transition: $ios-animation-normal $ios-animation-easing;
+  box-shadow: $ios-shadow-card;
+  border: 1px solid $ios-border;
   
   &:hover {
     transform: translateY(-2px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: $ios-shadow-md;
   }
   
   &.level-high {
-    background: #e6f7ff;
-    border: 1px solid #91d5ff;
+    background: $ios-primary-light;
+    border: 1px solid $ios-primary;
   }
   
   &.level-medium {
-    background: #f6ffed;
-    border: 1px solid #b7eb8f;
+    background: rgba(52, 199, 89, 0.1);
+    border: 1px solid $ios-success;
   }
   
   .tag-name {
     font-size: 16px;
-    font-weight: 500;
-    color: #333;
+    font-weight: $ios-font-weight-medium;
+    color: $ios-text-primary;
     display: block;
     margin-bottom: 10px;
+    font-family: $ios-font-family;
   }
   
   .tag-level {
@@ -84,54 +94,56 @@
     margin-bottom: 5px;
     
     .level-bar {
-      flex: 1;
-      height: 6px;
-      background: #d9d9d9;
-      border-radius: 3px;
-      overflow: hidden;
-      
-      .level-fill {
-        height: 100%;
-        background: #1890ff;
+        flex: 1;
+        height: 8px;
+        background: $ios-border;
+        border-radius: $ios-radius-full;
+        overflow: hidden;
+        
+        .level-fill {
+          height: 100%;
+          background: $ios-primary;
         transition: width 0.3s ease;
       }
     }
     
     .level-text {
       font-size: 12px;
-      color: #666;
+      color: $ios-text-secondary;
       min-width: 35px;
     }
   }
   
   .tag-count {
     font-size: 12px;
-    color: #999;
+    color: $ios-text-tertiary;
   }
 }
 
 .matching-orders-section {
   
   h3 {
-    font-size: 18px;
-    color: #333;
-    margin: 0 0 15px 0;
+    font-size: 20px;
+    color: $ios-text-primary;
+    margin: 0 0 16px 0;
+    font-family: $ios-font-family;
   }
   
   .order-list {
     display: grid;
-    gap: 15px;
+    gap: 16px;
   }
   
   .order-item {
-    background: #fff;
-    border-radius: 8px;
+    background: $ios-card-background;
+    border-radius: $ios-radius-lg;
     padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+    box-shadow: $ios-shadow-card;
+    transition: $ios-animation-normal $ios-animation-easing;
+    border: 1px solid $ios-border;
     
     &:hover {
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+      box-shadow: $ios-shadow-md;
       transform: translateY(-2px);
     }
     
@@ -139,31 +151,32 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 10px;
+      margin-bottom: 12px;
       
       h4 {
-        font-size: 16px;
-        color: #333;
+        font-size: 17px;
+        color: $ios-text-primary;
         margin: 0;
+        font-family: $ios-font-family;
       }
       
       .match-rate {
-        font-size: 14px;
-        padding: 4px 12px;
-        border-radius: 16px;
-        background-color: #f5f5f5;
-        color: #666;
+        font-size: 13px;
+        padding: 6px 14px;
+        border-radius: $ios-radius-full;
+        background-color: $ios-card-background;
+        color: $ios-text-secondary;
         
         &.high-match {
-          background-color: #f6ffed;
-          color: #52c41a;
-          border: 1px solid #b7eb8f;
+          background-color: rgba(52, 199, 89, 0.1);
+          color: $ios-success;
+          border: 1px solid $ios-success;
         }
         
         &.medium-match {
-          background-color: #fff7e6;
-          color: #fa8c16;
-          border: 1px solid #ffd591;
+          background-color: rgba(255, 149, 0, 0.1);
+          color: $ios-warning;
+          border: 1px solid $ios-warning;
         }
       }
     }
@@ -172,7 +185,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 15px;
+      margin-bottom: 16px;
       
       .required-skills {
         display: flex;
@@ -180,38 +193,47 @@
         
         .skill-badge {
           font-size: 12px;
-          padding: 2px 8px;
-          background: #f0f2f5;
-          color: #666;
-          border-radius: 12px;
+          padding: 4px 10px;
+          background: $ios-card-background;
+          color: $ios-text-secondary;
+          border-radius: $ios-radius-full;
+          border: 1px solid $ios-border;
         }
       }
       
       .customer-level {
         font-size: 14px;
-        color: #666;
+        color: $ios-text-secondary;
         
         &.premium {
-          color: #fa8c16;
-          font-weight: 500;
+          color: $ios-warning;
+          font-weight: $ios-font-weight-medium;
         }
       }
     }
     
     .btn-accept-order {
       width: 100%;
-      padding: 10px;
-      border: 1px solid #1890ff;
-      border-radius: 4px;
-      background-color: white;
-      color: #1890ff;
-      font-size: 14px;
+      padding: 12px 16px;
+      border: 1px solid $ios-primary;
+      border-radius: $ios-radius-md;
+      background-color: $ios-card-background;
+      color: $ios-primary;
+      font-size: 15px;
       cursor: pointer;
       transition: all 0.3s ease;
+        font-weight: $ios-font-weight-medium;
+        font-family: $ios-font-family;
       
       &:hover {
-        background-color: #1890ff;
+        background-color: $ios-primary;
         color: white;
+        transform: translateY(-1px);
+        box-shadow: $ios-shadow-md;
+      }
+      
+      &:active {
+        transform: translateY(0);
       }
     }
   }
@@ -219,54 +241,66 @@
 
 /* 结算统计样式 */
 .settlement-summary {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
+  background: $ios-card-background;
+  border-radius: $ios-radius-lg;
+  padding: 24px;
+  box-shadow: $ios-shadow-card;
+  margin-bottom: 24px;
   display: grid;
   grid-template-columns: 1fr 1fr auto;
-  gap: 30px;
+  gap: 32px;
   align-items: center;
+  border: 1px solid $ios-border;
   
   .summary-item {
     
     h3 {
       font-size: 16px;
-      color: #666;
-      margin: 0 0 5px 0;
+      color: $ios-text-secondary;
+      margin: 0 0 6px 0;
       font-weight: normal;
+      font-family: $ios-font-family;
     }
     
     .amount {
-      font-size: 24px;
+      font-size: 28px;
       font-weight: 600;
       margin: 0;
       
       &.total {
-        color: #333;
+        color: $ios-text-primary;
+        font-family: $ios-font-family;
       }
       
       &.pending {
-        color: #1890ff;
+        color: $ios-primary;
+        font-family: $ios-font-family;
       }
     }
   }
   
   .btn-view-details {
-    padding: 10px 20px;
-    border: 1px solid #1890ff;
-    border-radius: 4px;
-    background-color: white;
-    color: #1890ff;
-    font-size: 14px;
+    padding: 12px 24px;
+    border: 1px solid $ios-primary;
+    border-radius: $ios-radius-md;
+    background-color: $ios-card-background;
+    color: $ios-primary;
+    font-size: 15px;
     cursor: pointer;
     transition: all 0.3s ease;
     white-space: nowrap;
+    font-weight: $ios-font-weight-medium;
+    font-family: $ios-font-family;
     
     &:hover {
-      background-color: #1890ff;
+      background-color: $ios-primary;
       color: white;
+      transform: translateY(-1px);
+      box-shadow: $ios-shadow-md;
+    }
+    
+    &:active {
+      transform: translateY(0);
     }
   }
 }
@@ -274,67 +308,76 @@
 .settlement-details {
   
   h3 {
-    font-size: 18px;
-    color: #333;
-    margin: 0 0 15px 0;
+    font-size: 20px;
+    color: $ios-text-primary;
+    margin: 0 0 16px 0;
+    font-family: $ios-font-family;
   }
   
   .settlement-table {
     width: 100%;
     border-collapse: collapse;
-    background: #fff;
-    border-radius: 8px;
+    background: $ios-card-background;
+    border-radius: $ios-radius-lg;
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: $ios-shadow-card;
+    border: 1px solid $ios-border;
     
     thead {
-      background: #fafafa;
+      background: $ios-background-secondary;
       
       th {
-        padding: 12px 16px;
+        padding: 14px 16px;
         text-align: left;
         font-size: 14px;
-        font-weight: 500;
-        color: #666;
-        border-bottom: 1px solid #f0f0f0;
+        font-weight: $ios-font-weight-medium;
+        color: $ios-text-secondary;
+        border-bottom: 1px solid $ios-border;
+        font-family: $ios-font-family;
       }
     }
     
     tbody {
       
       td {
-        padding: 12px 16px;
+        padding: 14px 16px;
         font-size: 14px;
-        color: #333;
-        border-bottom: 1px solid #f0f0f0;
+        color: $ios-text-primary;
+        border-bottom: 1px solid $ios-border;
+        transition: background-color 0.2s ease;
         
         &:last-child {
-          color: #999;
+          color: $ios-text-secondary;
+        }
+        
+        &:hover {
+          background-color: $ios-background-secondary;
         }
       }
       
       .empty-row {
         text-align: center;
-        color: #999;
+        color: $ios-text-tertiary;
         font-style: italic;
-        padding: 40px;
+        padding: 48px;
+        background-color: $ios-card-background;
       }
       
       .status-badge {
-        padding: 2px 8px;
-        border-radius: 12px;
+        padding: 4px 12px;
+        border-radius: $ios-radius-full;
         font-size: 12px;
         
         &.settled {
-          background-color: #f6ffed;
-          color: #52c41a;
-          border: 1px solid #b7eb8f;
+          background-color: rgba($ios-success, 0.1);
+          color: $ios-success;
+          border: 1px solid $ios-success;
         }
         
         &:not(.settled) {
-          background-color: #fff1f0;
-          color: #f5222d;
-          border: 1px solid #ffccc7;
+          background-color: rgba($ios-danger, 0.1);
+          color: $ios-danger;
+          border: 1px solid $ios-danger;
         }
       }
     }
@@ -343,16 +386,17 @@
 
 /* 绩效趋势样式 */
 .performance-chart {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: $ios-card-background;
+  border-radius: $ios-radius-lg;
+  padding: 24px;
+  box-shadow: $ios-shadow-card;
+  border: 1px solid $ios-border;
   
   .chart-container {
     display: flex;
     align-items: flex-end;
     height: 300px;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
     
     .chart-labels {
       display: flex;
@@ -363,7 +407,7 @@
       
       span {
         font-size: 12px;
-        color: #999;
+        color: $ios-text-tertiary;
         padding: 5px 0;
       }
     }
@@ -379,11 +423,11 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 5px;
+        gap: 8px;
         
         .bar {
           position: relative;
-          width: 40px;
+          width: 44px;
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -395,28 +439,30 @@
           
           .bar-fill {
             width: 100%;
-            border-radius: 4px 4px 0 0;
+            border-radius: $ios-radius-md $ios-radius-md 0 0;
             transition: height 0.3s ease;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
           }
           
           .bar-value {
-            position: absolute;
-            top: -25px;
-            font-size: 12px;
-            color: #666;
-            white-space: nowrap;
-          }
+              position: absolute;
+              top: -28px;
+              font-size: 12px;
+              color: $ios-text-secondary;
+              white-space: nowrap;
+              font-weight: 500;
+            }
           
           &.completion-rate .bar-fill {
-            background: #1890ff;
+            background: $ios-primary;
           }
           
           &.satisfaction-rate .bar-fill {
-            background: #52c41a;
+            background: $ios-success;
           }
           
           &.ontime-rate .bar-fill {
-            background: #fa8c16;
+            background: $ios-warning;
           }
         }
       }
@@ -426,30 +472,30 @@
   .chart-legend {
     display: flex;
     justify-content: center;
-    gap: 30px;
+    gap: 32px;
     
     .legend-item {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 14px;
-      color: #666;
+      color: $ios-text-secondary;
       
       .legend-color {
-        width: 16px;
+        width: 18px;
         height: 4px;
-        border-radius: 2px;
+        border-radius: $ios-radius-full;
         
         &.completion-rate {
-          background: #1890ff;
+          background: $ios-primary;
         }
         
         &.satisfaction-rate {
-          background: #52c41a;
+          background: $ios-success;
         }
         
         &.ontime-rate {
-          background: #fa8c16;
+          background: $ios-warning;
         }
       }
     }
@@ -458,35 +504,81 @@
 
 .empty-state {
   text-align: center;
-  padding: 40px 20px;
-  color: #999;
-  background-color: #fafafa;
-  border-radius: 8px;
+  padding: 48px 24px;
+  color: $ios-text-tertiary;
+  background-color: $ios-background-secondary;
+  border-radius: $ios-radius-lg;
+  border: 1px dashed $ios-border;
 }
 
+/* iOS风格滚动条 */
+.personal-board-container {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: $ios-background-secondary;
+    border-radius: $ios-radius-full;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: $ios-scrollbar-thumb;
+    border-radius: $ios-radius-full;
+    border: 2px solid $ios-background-secondary;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: $ios-scrollbar-thumb-hover;
+  }
+}
+
+/* 响应式设计 */
 @media (max-width: 768px) {
+  .personal-board-container {
+    padding: 16px;
+  }
+  
   .personal-board-main {
     grid-template-columns: 1fr;
+    gap: 20px;
   }
   
   .skill-tags-container {
     justify-content: center;
+    gap: 12px;
   }
   
   .skill-tag {
     min-width: 100%;
+    padding: 14px 16px;
   }
   
   .settlement-summary {
     grid-template-columns: 1fr;
     gap: 20px;
+    padding: 20px;
     
     .btn-view-details {
       width: 100%;
     }
+    
+    .summary-item {
+      
+      h3 {
+        font-size: 15px;
+      }
+      
+      .amount {
+        font-size: 24px;
+      }
+    }
   }
   
   .performance-chart {
+    padding: 20px 16px;
+    
     .chart-container {
       flex-direction: column;
       height: auto;
@@ -497,6 +589,10 @@
         margin-right: 0;
         margin-bottom: 20px;
         justify-content: space-around;
+        
+        span {
+          font-size: 11px;
+        }
       }
       
       .chart-bars {
@@ -506,7 +602,7 @@
         .bar-group {
           flex-direction: row;
           width: 100%;
-          gap: 10px;
+          gap: 8px;
           justify-content: center;
           
           .bar {
@@ -514,19 +610,47 @@
             width: auto;
             
             .bar-fill {
-              border-radius: 0;
+              border-radius: $ios-radius-full;
               height: 100%;
-              width: 80px;
+              width: 60px;
             }
             
             .bar-value {
               top: -25px;
               left: 50%;
               transform: translateX(-50%);
+              font-size: 11px;
             }
           }
         }
       }
     }
+    
+    .chart-legend {
+      gap: 16px;
+      flex-wrap: wrap;
+      
+      .legend-item {
+        font-size: 13px;
+        gap: 6px;
+        
+        .legend-color {
+          width: 14px;
+        }
+      }
+    }
+  }
+  
+  .section-header {
+    h2 {
+      font-size: 20px;
+    }
+  }
+  
+  .matching-orders-section,
+  .settlement-details {
+    h3 {
+      font-size: 18px;
+    }
   }
 }

src/app/pages/designer/project-detail/project-detail.scss

@@ -1,8 +1,13 @@
+// 导入iOS主题变量
+@import '../ios-theme.scss';
+
 .project-detail-container {
-  padding: 20px;
+  padding: $ios-spacing-xl;
   max-width: 1200px;
   margin: 0 auto;
-  font-family: 'Arial', sans-serif;
+  font-family: $ios-font-family;
+  background-color: $ios-background-secondary;
+  min-height: 100vh;
 }
 
 /* 项目标题栏 */
@@ -10,37 +15,44 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 30px;
-  padding-bottom: 15px;
-  border-bottom: 2px solid #eee;
+  margin-bottom: $ios-spacing-xxl;
+  padding: $ios-spacing-xl;
+  background-color: $ios-background;
+  border-radius: $ios-radius-lg;
+  box-shadow: $ios-shadow-card;
 }
 
 .project-header h1 {
-  font-size: 28px;
-  color: #333;
+  font-size: $ios-font-size-xl;
+  color: $ios-text-primary;
   margin: 0;
+  font-weight: $ios-font-weight-semibold;
 }
 
 .project-id {
-  font-size: 14px;
-  color: #666;
-  background-color: #f5f5f5;
-  padding: 5px 10px;
-  border-radius: 4px;
+  font-size: $ios-font-size-sm;
+  color: $ios-text-secondary;
+  background-color: $ios-background-secondary;
+  padding: $ios-spacing-xs $ios-spacing-md;
+  border-radius: $ios-radius-full;
+  font-weight: $ios-font-weight-medium;
 }
 
-/* 提醒消息弹窗 */
+/* 提醒消息弹窗 - iOS风格 */
 .reminder-popup {
   position: fixed;
-  top: 20px;
-  right: 20px;
-  background-color: #4CAF50;
+  top: $ios-spacing-xl;
+  right: $ios-spacing-xl;
+  background-color: $ios-success;
   color: white;
-  padding: 15px 20px;
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: $ios-spacing-md $ios-spacing-lg;
+  border-radius: $ios-radius-lg;
+  box-shadow: $ios-shadow-md;
   z-index: 1000;
-  animation: slideInRight 0.3s ease-out;
+  animation: slideInRight $ios-animation-fast $ios-animation-easing;
+  font-family: $ios-font-family;
+  font-size: $ios-font-size-base;
+  font-weight: $ios-font-weight-medium;
 }
 
 @keyframes slideInRight {
@@ -54,7 +66,7 @@
   }
 }
 
-/* 通用区域样式 */
+/* 通用区域样式 - iOS卡片风格 */
 .project-info-section,
 .customer-profile-section,
 .requirement-section,
@@ -65,34 +77,50 @@
 .designer-change-section,
 .settlement-section,
 .stagnation-section {
-  background-color: white;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  background-color: $ios-card-background;
+  border-radius: $ios-radius-lg;
+  padding: $ios-spacing-xl;
+  margin-bottom: $ios-spacing-xl;
+  box-shadow: $ios-shadow-card;
+  transition: $ios-feedback-hover;
+}
+
+.project-info-section:hover,
+.customer-profile-section:hover,
+.requirement-section:hover,
+.process-section:hover,
+.render-progress-section:hover,
+.model-check-section:hover,
+.feedback-section:hover,
+.designer-change-section:hover,
+.settlement-section:hover,
+.stagnation-section:hover {
+  box-shadow: $ios-shadow-md;
 }
 
 h2 {
-  font-size: 20px;
-  color: #333;
+  font-size: $ios-font-size-lg;
+  color: $ios-text-primary;
   margin-top: 0;
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
+  margin-bottom: $ios-spacing-xl;
+  padding-bottom: $ios-spacing-md;
+  border-bottom: 1px solid $ios-border;
+  font-weight: $ios-font-weight-semibold;
 }
 
 h3 {
-  font-size: 16px;
-  color: #555;
+  font-size: $ios-font-size-base;
+  color: $ios-text-primary;
   margin-top: 0;
-  margin-bottom: 15px;
+  margin-bottom: $ios-spacing-lg;
+  font-weight: $ios-font-weight-medium;
 }
 
-/* 项目基本信息 */
+/* 项目基本信息 - iOS风格 */
 .info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 15px;
+  gap: $ios-spacing-lg;
 }
 
 .info-item {
@@ -101,40 +129,43 @@ h3 {
 }
 
 .info-item label {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 5px;
-  font-weight: bold;
+  font-size: $ios-font-size-sm;
+  color: $ios-text-secondary;
+  margin-bottom: $ios-spacing-xs;
+  font-weight: $ios-font-weight-medium;
 }
 
 .info-item span {
-  font-size: 16px;
-  color: #333;
+  font-size: $ios-font-size-base;
+  color: $ios-text-primary;
+  font-weight: $ios-font-weight-regular;
 }
 
 .stage-tag {
   display: inline-block;
-  padding: 5px 12px;
-  border-radius: 20px;
-  background-color: #e8f5e9;
-  color: #43a047;
-  font-size: 14px;
+  padding: $ios-spacing-xs $ios-spacing-lg;
+  border-radius: $ios-radius-full;
+  background-color: color-mix(in srgb, $ios-success 15%, transparent);
+  color: $ios-success;
+  font-size: $ios-font-size-sm;
+  font-weight: $ios-font-weight-medium;
 }
 
-/* 客户画像 */
+/* 客户画像 - iOS风格 */
 .skill-mismatch-warning {
-  background-color: #ffebee;
-  color: #c62828;
-  padding: 10px 15px;
-  border-radius: 4px;
-  margin-bottom: 20px;
-  border-left: 4px solid #c62828;
+  background-color: color-mix(in srgb, $ios-danger 10%, transparent);
+  color: $ios-danger;
+  padding: $ios-spacing-md $ios-spacing-lg;
+  border-radius: $ios-radius-md;
+  margin-bottom: $ios-spacing-xl;
+  border-left: 4px solid $ios-danger;
+  font-size: $ios-font-size-base;
 }
 
 .customer-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 15px;
+  gap: $ios-spacing-lg;
 }
 
 .tag-group {
@@ -144,62 +175,76 @@ h3 {
 }
 
 .tag-group label {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 8px;
-  font-weight: bold;
+  font-size: $ios-font-size-sm;
+  color: $ios-text-secondary;
+  margin-bottom: $ios-spacing-sm;
+  font-weight: $ios-font-weight-medium;
 }
 
 .tag {
   display: inline-block;
-  background-color: #e3f2fd;
-  color: #1976d2;
-  padding: 4px 10px;
-  border-radius: 15px;
-  font-size: 13px;
-  margin-right: 5px;
-  margin-bottom: 5px;
+  background-color: color-mix(in srgb, $ios-primary 15%, transparent);
+  color: $ios-primary;
+  padding: $ios-spacing-xs $ios-spacing-md;
+  border-radius: $ios-radius-full;
+  font-size: $ios-font-size-xs;
+  margin-right: $ios-spacing-xs;
+  margin-bottom: $ios-spacing-xs;
+  font-weight: $ios-font-weight-medium;
 }
 
 .priority-tag {
   display: inline-block;
-  background-color: #fff3e0;
-  color: #f57c00;
-  padding: 4px 10px;
-  border-radius: 15px;
-  font-size: 13px;
-  margin-right: 5px;
-  margin-bottom: 5px;
+  background-color: color-mix(in srgb, $ios-warning 15%, transparent);
+  color: $ios-warning;
+  padding: $ios-spacing-xs $ios-spacing-md;
+  border-radius: $ios-radius-full;
+  font-size: $ios-font-size-xs;
+  margin-right: $ios-spacing-xs;
+  margin-bottom: $ios-spacing-xs;
+  font-weight: $ios-font-weight-medium;
 }
 
-/* 需求确认清单 */
+/* 需求确认清单 - iOS风格 */
 .checklist {
-  margin-top: 15px;
+  margin-top: $ios-spacing-lg;
 }
 
 .checklist-item {
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: $ios-spacing-md;
+  padding: $ios-spacing-md;
+  border-radius: $ios-radius-md;
+  background-color: $ios-background-secondary;
+  transition: $ios-feedback-hover;
+}
+
+.checklist-item:hover {
+  background-color: color-mix(in srgb, $ios-background-secondary 80%, white);
 }
 
 .checklist-item input[type="checkbox"] {
-  margin-right: 10px;
-  width: 18px;
-  height: 18px;
+  margin-right: $ios-spacing-md;
+  width: 20px;
+  height: 20px;
+  accent-color: $ios-primary;
+  border-radius: $ios-radius-sm;
 }
 
 .checklist-item span {
-  color: #333;
+  color: $ios-text-primary;
+  font-size: $ios-font-size-base;
+  flex: 1;
 }
 
-/* 制作流程进度 */
+/* 制作流程进度 - iOS风格 */
 .stage-progress {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
-  padding: 0 10px;
+  padding: 0 $ios-spacing-md;
 }
 
 .stage-progress::before {
@@ -208,8 +253,8 @@ h3 {
   top: 50%;
   left: 50px;
   right: 50px;
-  height: 2px;
-  background-color: #e0e0e0;
+  height: 3px;
+  background-color: $ios-border;
   transform: translateY(-50%);
   z-index: 1;
 }
@@ -220,283 +265,379 @@ h3 {
   align-items: center;
   z-index: 2;
   position: relative;
+  transition: $ios-feedback-hover;
 }
 
 .stage-icon {
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
-  background-color: #e0e0e0;
-  color: #666;
+  background-color: $ios-border;
+  color: $ios-text-secondary;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-weight: bold;
-  margin-bottom: 10px;
-  transition: all 0.3s ease;
+  font-weight: $ios-font-weight-semibold;
+  margin-bottom: $ios-spacing-md;
+  transition: all $ios-animation-normal $ios-animation-easing;
+  border: 3px solid $ios-background;
+  box-shadow: $ios-shadow-sm;
 }
 
 .stage-name {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 10px;
+  font-size: $ios-font-size-sm;
+  color: $ios-text-secondary;
+  margin-bottom: $ios-spacing-md;
+  font-weight: $ios-font-weight-medium;
 }
 
 .stage.completed .stage-icon {
-  background-color: #4caf50;
+  background-color: $ios-success;
   color: white;
+  box-shadow: 0 0 0 3px color-mix(in srgb, $ios-success 20%, transparent);
 }
 
 .stage.completed .stage-name {
-  color: #4caf50;
-  font-weight: bold;
+  color: $ios-success;
+  font-weight: $ios-font-weight-semibold;
 }
 
 .stage-actions {
-  margin-top: 10px;
+  margin-top: $ios-spacing-md;
 }
 
 .stage-actions button {
-  background-color: #2196f3;
+  background-color: $ios-primary;
   color: white;
   border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-size: 14px;
+  padding: $ios-spacing-sm $ios-spacing-lg;
+  border-radius: $ios-radius-md;
+  font-size: $ios-font-size-base;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: $ios-feedback-tap;
+  font-weight: $ios-font-weight-medium;
+  box-shadow: $ios-shadow-sm;
 }
 
 .stage-actions button:hover:not(:disabled) {
-  background-color: #1976d2;
+  background-color: $ios-primary-light;
+  transform: translateY(-1px);
+  box-shadow: $ios-shadow-md;
+}
+
+.stage-actions button:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: $ios-shadow-sm;
 }
 
 .stage-actions button:disabled {
-  background-color: #ccc;
   cursor: not-allowed;
+  background-color: $ios-text-tertiary;
+  box-shadow: none;
 }
 
-/* 渲染进度 */
+/* 渲染进度 - iOS风格 */
 .loading {
   text-align: center;
-  padding: 20px;
-  color: #666;
+  padding: $ios-spacing-xl;
+  color: $ios-text-secondary;
+  font-size: $ios-font-size-base;
 }
 
 .error {
   text-align: center;
-  padding: 20px;
-  color: #c62828;
-  background-color: #ffebee;
-  border-radius: 4px;
+  padding: $ios-spacing-xl;
+  color: $ios-danger;
+  background-color: color-mix(in srgb, $ios-danger 10%, transparent);
+  border-radius: $ios-radius-md;
+  font-size: $ios-font-size-base;
 }
 
 .error button {
-  background-color: #c62828;
+  background-color: $ios-danger;
   color: white;
   border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-size: 14px;
+  padding: $ios-spacing-sm $ios-spacing-lg;
+  border-radius: $ios-radius-md;
+  font-size: $ios-font-size-base;
   cursor: pointer;
-  margin: 0 10px;
+  margin: 0 $ios-spacing-md;
+  transition: $ios-feedback-tap;
+  font-weight: $ios-font-weight-medium;
+}
+
+.error button:hover {
+  background-color: color-mix(in srgb, $ios-danger 90%, black);
+  transform: translateY(-1px);
 }
 
 .progress-content {
-  padding: 20px;
+  padding: $ios-spacing-xl;
 }
 
 .progress-bar {
   width: 100%;
-  height: 20px;
-  background-color: #e0e0e0;
-  border-radius: 10px;
+  height: 8px;
+  background-color: $ios-border;
+  border-radius: $ios-radius-full;
   overflow: hidden;
-  margin-bottom: 15px;
+  margin-bottom: $ios-spacing-lg;
+  position: relative;
 }
 
 .progress-fill {
   height: 100%;
-  background-color: #4caf50;
-  transition: width 0.3s ease;
+  background-color: $ios-primary;
+  transition: width $ios-animation-normal $ios-animation-easing;
+  border-radius: $ios-radius-full;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, white 30%, transparent),
+    transparent
+  );
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 .progress-info {
   display: flex;
   justify-content: space-between;
-  font-size: 16px;
-  color: #333;
+  font-size: $ios-font-size-base;
+  color: $ios-text-primary;
+  font-weight: $ios-font-weight-medium;
 }
 
-/* 模型检查清单 */
+/* 模型检查清单 - iOS风格 */
 .check-status {
   margin-left: auto;
-  font-weight: bold;
+  font-weight: $ios-font-weight-semibold;
+  font-size: $ios-font-size-sm;
+  padding: $ios-spacing-xs $ios-spacing-sm;
+  border-radius: $ios-radius-md;
 }
 
 .check-status.passed {
-  color: #4caf50;
+  color: $ios-success;
+  background-color: color-mix(in srgb, $ios-success 10%, transparent);
 }
 
 .check-status.failed {
-  color: #f44336;
+  color: $ios-danger;
+  background-color: color-mix(in srgb, $ios-danger 10%, transparent);
 }
 
-/* 客户反馈 */
+/* 客户反馈 - iOS风格 */
 .no-feedback,
 .no-changes,
 .no-settlements {
   text-align: center;
-  padding: 20px;
-  color: #999;
-  font-style: italic;
+  padding: $ios-spacing-xl;
+  color: $ios-text-secondary;
+  font-size: $ios-font-size-base;
 }
 
 .feedback-item {
-  border: 1px solid #eee;
-  border-radius: 8px;
-  padding: 15px;
-  margin-bottom: 15px;
+  border: 1px solid $ios-border;
+  border-radius: $ios-radius-lg;
+  padding: $ios-spacing-lg;
+  margin-bottom: $ios-spacing-lg;
+  background-color: $ios-background;
+  transition: $ios-feedback-hover;
+}
+
+.feedback-item:hover {
+  box-shadow: $ios-shadow-sm;
 }
 
 .feedback-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: $ios-spacing-md;
+  padding-bottom: $ios-spacing-md;
+  border-bottom: 1px solid $ios-border;
 }
 
 .feedback-customer {
-  font-weight: bold;
-  color: #333;
+  font-weight: $ios-font-weight-semibold;
+  color: $ios-text-primary;
+  font-size: $ios-font-size-base;
 }
 
 .feedback-date {
-  font-size: 12px;
-  color: #999;
+  font-size: $ios-font-size-xs;
+  color: $ios-text-tertiary;
 }
 
 .feedback-content {
-  margin-bottom: 15px;
+  margin-bottom: $ios-spacing-lg;
 }
 
 .feedback-status {
   display: inline-block;
-  background-color: #e3f2fd;
-  color: #1976d2;
-  padding: 4px 10px;
-  border-radius: 15px;
-  font-size: 13px;
-  margin-bottom: 10px;
+  background-color: color-mix(in srgb, $ios-primary 15%, transparent);
+  color: $ios-primary;
+  padding: $ios-spacing-xs $ios-spacing-md;
+  border-radius: $ios-radius-full;
+  font-size: $ios-font-size-xs;
+  margin-bottom: $ios-spacing-md;
+  font-weight: $ios-font-weight-medium;
 }
 
 .feedback-type {
-  color: #666;
-  margin-bottom: 10px;
-  font-size: 14px;
+  color: $ios-text-secondary;
+  margin-bottom: $ios-spacing-md;
+  font-size: $ios-font-size-sm;
 }
 
 .feedback-details {
-  background-color: #f5f5f5;
-  padding: 10px;
-  border-radius: 4px;
+  background-color: $ios-background-secondary;
+  padding: $ios-spacing-md;
+  border-radius: $ios-radius-md;
 }
 
 .feedback-details p {
-  margin: 5px 0;
-  font-size: 14px;
-  color: #333;
+  margin: $ios-spacing-xs 0;
+  font-size: $ios-font-size-sm;
+  color: $ios-text-primary;
 }
 
 .feedback-actions {
   display: flex;
-  gap: 10px;
+  gap: $ios-spacing-md;
 }
 
 .feedback-actions button {
-  padding: 8px 16px;
+  padding: $ios-spacing-sm $ios-spacing-lg;
   border: none;
-  border-radius: 4px;
-  font-size: 14px;
+  border-radius: $ios-radius-md;
+  font-size: $ios-font-size-base;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: $ios-feedback-tap;
+  font-weight: $ios-font-weight-medium;
+  flex: 1;
+  box-shadow: $ios-shadow-sm;
 }
 
 .feedback-actions button:first-child {
-  background-color: #2196f3;
+  background-color: $ios-primary;
   color: white;
 }
 
 .feedback-actions button:first-child:hover:not(:disabled) {
-  background-color: #1976d2;
+  background-color: $ios-primary-light;
+  transform: translateY(-1px);
+  box-shadow: $ios-shadow-md;
+}
+
+.feedback-actions button:first-child:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: $ios-shadow-sm;
 }
 
 .feedback-actions button:last-child {
-  background-color: #4caf50;
+  background-color: $ios-success;
   color: white;
 }
 
 .feedback-actions button:last-child:hover:not(:disabled) {
-  background-color: #43a047;
+  background-color: color-mix(in srgb, $ios-success 90%, black);
+  transform: translateY(-1px);
+  box-shadow: $ios-shadow-md;
+}
+
+.feedback-actions button:last-child:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: $ios-shadow-sm;
 }
 
 .feedback-actions button:disabled {
-  background-color: #ccc;
+  background-color: $ios-text-tertiary;
   cursor: not-allowed;
+  box-shadow: none;
 }
 
-/* 设计师变更记录 */
+/* 设计师变更记录 - iOS风格 */
 .change-item {
-  border: 1px solid #eee;
-  border-radius: 8px;
-  padding: 15px;
-  margin-bottom: 15px;
+  border: 1px solid $ios-border;
+  border-radius: $ios-radius-lg;
+  padding: $ios-spacing-lg;
+  margin-bottom: $ios-spacing-lg;
+  background-color: $ios-background;
+  transition: $ios-feedback-hover;
+}
+
+.change-item:hover {
+  box-shadow: $ios-shadow-sm;
 }
 
 .change-header {
-  margin-bottom: 15px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: $ios-spacing-lg;
+  padding-bottom: $ios-spacing-md;
+  border-bottom: 1px solid $ios-border;
 }
 
 .change-time {
-  font-size: 14px;
-  color: #666;
-  font-weight: bold;
+  font-size: $ios-font-size-sm;
+  color: $ios-text-secondary;
+  font-weight: $ios-font-weight-semibold;
 }
 
 .change-details {
-  margin-bottom: 15px;
+  margin-bottom: $ios-spacing-lg;
 }
 
 .change-details div {
-  margin-bottom: 8px;
-  color: #333;
+  margin-bottom: $ios-spacing-xs;
+  color: $ios-text-primary;
+  font-size: $ios-font-size-base;
 }
 
 .change-details ul {
-  margin: 8px 0;
-  padding-left: 20px;
+  margin: $ios-spacing-xs 0;
+  padding-left: $ios-spacing-xl;
 }
 
 .change-details li {
-  color: #333;
-  margin-bottom: 4px;
+  color: $ios-text-primary;
+  margin-bottom: $ios-spacing-xs;
+  font-size: $ios-font-size-sm;
 }
 
 .change-status {
-  font-size: 14px;
-  color: #666;
-  background-color: #f5f5f5;
-  padding: 8px;
-  border-radius: 4px;
+  font-size: $ios-font-size-sm;
+  color: $ios-text-secondary;
+  background-color: $ios-background-secondary;
+  padding: $ios-spacing-sm;
+  border-radius: $ios-radius-md;
 }
 
-/* 分阶段结算记录 */
+/* 分阶段结算记录 - iOS风格 */
 .settlement-table {
   overflow-x: auto;
+  border-radius: $ios-radius-lg;
+  background-color: $ios-background;
+  border: 1px solid $ios-border;
 }
 
 .settlement-table table {
@@ -506,63 +647,87 @@ h3 {
 
 .settlement-table th,
 .settlement-table td {
-  padding: 12px;
+  padding: $ios-spacing-lg;
   text-align: left;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid $ios-border;
+  font-size: $ios-font-size-base;
 }
 
 .settlement-table th {
-  background-color: #f5f5f5;
-  font-weight: bold;
-  color: #333;
+  background-color: $ios-background-secondary;
+  font-weight: $ios-font-weight-semibold;
+  color: $ios-text-primary;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
 .settlement-table td {
-  color: #666;
+  color: $ios-text-primary;
+  font-weight: $ios-font-weight-regular;
+}
+
+.settlement-table tr:last-child td {
+  border-bottom: none;
 }
 
-/* 停滞期管理 */
+.settlement-table tr:hover td {
+  background-color: color-mix(in srgb, $ios-background-secondary 50%, white);
+}
+
+/* 停滞期管理 - iOS风格 */
 .stagnation-section button {
-  background-color: #ff9800;
+  background-color: $ios-warning;
   color: white;
   border: none;
-  padding: 10px 20px;
-  border-radius: 4px;
-  font-size: 16px;
+  padding: $ios-spacing-md $ios-spacing-xl;
+  border-radius: $ios-radius-md;
+  font-size: $ios-font-size-base;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: $ios-feedback-tap;
+  font-weight: $ios-font-weight-medium;
+  box-shadow: $ios-shadow-sm;
 }
 
 .stagnation-section button:hover {
-  background-color: #f57c00;
+  background-color: color-mix(in srgb, $ios-warning 90%, black);
+  transform: translateY(-1px);
+  box-shadow: $ios-shadow-md;
+}
+
+.stagnation-section button:active {
+  transform: translateY(0);
+  box-shadow: $ios-shadow-sm;
 }
 
 .stagnation-section p {
-  margin-top: 10px;
-  color: #666;
-  font-size: 14px;
+  margin-top: $ios-spacing-md;
+  color: $ios-text-secondary;
+  font-size: $ios-font-size-sm;
 }
 
-/* 响应式设计 */
+/* 响应式设计 - iOS风格 */
 @media (max-width: 768px) {
   .project-detail-container {
-    padding: 10px;
+    padding: $ios-spacing-md;
   }
   
   .project-header {
     flex-direction: column;
     align-items: flex-start;
-    gap: 10px;
+    gap: $ios-spacing-md;
+    padding: $ios-spacing-lg;
   }
   
   .info-grid {
     grid-template-columns: 1fr;
+    gap: $ios-spacing-md;
   }
   
   .stage-progress {
     flex-direction: column;
     align-items: flex-start;
-    gap: 20px;
+    gap: $ios-spacing-xl;
   }
   
   .stage-progress::before {
@@ -572,11 +737,16 @@ h3 {
   .stage {
     flex-direction: row;
     align-items: center;
-    gap: 10px;
+    gap: $ios-spacing-md;
+    width: 100%;
+    justify-content: flex-start;
   }
   
   .stage-icon {
     margin-bottom: 0;
+    width: 36px;
+    height: 36px;
+    font-size: $ios-font-size-sm;
   }
   
   .feedback-actions {
@@ -585,11 +755,71 @@ h3 {
   
   .customer-tags {
     flex-direction: column;
-    gap: 10px;
+    gap: $ios-spacing-md;
   }
   
   .progress-info {
     flex-direction: column;
-    gap: 10px;
+    gap: $ios-spacing-md;
+  }
+  
+  .checklist-item {
+    padding: $ios-spacing-sm;
+  }
+  
+  .settlement-table th,
+  .settlement-table td {
+    padding: $ios-spacing-sm;
+    font-size: $ios-font-size-sm;
+  }
+  
+  .stage-actions button {
+    padding: $ios-spacing-sm $ios-spacing-md;
+    font-size: $ios-font-size-sm;
+  }
+  
+  .feedback-actions button {
+    padding: $ios-spacing-sm $ios-spacing-md;
+    font-size: $ios-font-size-sm;
+  }
+  
+  .stagnation-section button {
+    padding: $ios-spacing-sm $ios-spacing-lg;
+    font-size: $ios-font-size-sm;
+    width: 100%;
   }
+  
+  h2 {
+    font-size: $ios-font-size-base;
+    margin-bottom: $ios-spacing-lg;
+  }
+  
+  h3 {
+    font-size: $ios-font-size-sm;
+  }
+}
+
+/* iOS风格的滚动条 */
+::-webkit-scrollbar {
+  width: $ios-scrollbar-width;
+  height: $ios-scrollbar-width;
+}
+
+::-webkit-scrollbar-track {
+  background: $ios-scrollbar-track;
+  border-radius: $ios-radius-full;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $ios-scrollbar-thumb;
+  border-radius: $ios-radius-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: $ios-scrollbar-thumb-hover;
+}
+
+/* 平滑滚动 */
+html {
+  scroll-behavior: smooth;
 }