feet:customer6

src/app/pages/customer-service/consultation-order/consultation-order.html

@@ -1,5 +1,5 @@
 <div class="consultation-order-container">
-  <!-- 页面标题 -->
+  <!-- iOS风格页面标题 -->
   <div class="page-header">
     <h1>
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -238,7 +238,7 @@
     </form>
   </section>
 
-  <!-- 报价与案例匹配区域 -->
+  <!-- iOS风格报价与案例匹配区域 -->
   <section class="price-match-section">
     <div class="section-header">
       <h2>
@@ -291,7 +291,7 @@
     </div>
   </section>
 
-  <!-- 操作按钮区域 -->
+  <!-- iOS风格操作按钮区域 -->
   <section class="action-section">
     <button 
       class="primary-btn" 

src/app/pages/customer-service/consultation-order/consultation-order.scss

@@ -1,43 +1,49 @@
-// 全局变量定义 - 财务风格配色
-$primary-color: #1A73E8;
-$primary-dark: #1557B0;
-$secondary-color: #34A853;
-$success-color: #34A853;
-$warning-color: #FBBC05;
-$danger-color: #EA4335;
-$text-primary: #202124;
-$text-secondary: #5F6368;
-$text-tertiary: #80868B;
-$border-color: #DADCE0;
+// iOS风格变量定义
+$primary-color: #007AFF;
+$primary-dark: #0062CC;
+$secondary-color: #34C759;
+$success-color: #34C759;
+$warning-color: #FF9500;
+$danger-color: #FF3B30;
+$text-primary: #000000;
+$text-secondary: #3C3C43;
+$text-tertiary: #8E8E93;
+$border-color: #D1D1D6;
 $background-primary: #FFFFFF;
-$background-secondary: #F8F9FA;
-$background-tertiary: #F1F3F4;
-$shadow-sm: 0 1px 2px rgba(60,64,67,0.1);
-$shadow-md: 0 2px 8px rgba(60,64,67,0.15);
-$shadow-lg: 0 4px 12px rgba(60,64,67,0.2);
-$border-radius: 8px;
-$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-$main-font-family: 'Google Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-$heading-font-family: 'Google Sans Display', 'Segoe UI', Roboto, sans-serif;
-$grid-gap: 24px;
-$card-padding: 24px;
-
-// 主容器 - 财务风格布局
+$background-secondary: #F2F2F7;
+$background-tertiary: #E5E5EA;
+$shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
+$shadow-md: 0 4px 10px rgba(0,0,0,0.1);
+$shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
+$border-radius: 10px;
+$transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+$main-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
+$heading-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
+$grid-gap: 16px;
+$card-padding: 16px;
+
+// iOS风格主容器
 .consultation-order-container {
-  max-width: 1440px;
+  max-width: 100%;
   margin: 0 auto;
-  padding: 32px;
+  padding: 16px;
   color: $text-primary;
   font-family: $main-font-family;
-  font-size: 14px;
+  font-size: 17px;
   line-height: 1.5;
   min-height: 100vh;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: $grid-gap;
+  background-color: $background-secondary;
+  
+  @media (min-width: 768px) {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $grid-gap;
+  }
   
   @media (min-width: 1024px) {
-    grid-template-columns: 300px 1fr;
+    grid-template-columns: 280px 1fr;
+    max-width: 1200px;
   }
 }
 
@@ -115,22 +121,28 @@ $card-padding: 24px;
   }
 }
 
-// 卡片基础样式
+// iOS风格卡片
 .card {
   background-color: $background-primary;
   border-radius: $border-radius;
   padding: $card-padding;
-  box-shadow: $shadow-sm;
   margin-bottom: $grid-gap;
   transition: $transition;
+  border: 0.5px solid rgba(0,0,0,0.1);
   
   &:hover {
-    box-shadow: $shadow-md;
+    box-shadow: $shadow-sm;
   }
   
   &.highlight {
     border-left: 4px solid $primary-color;
   }
+  
+  + .card {
+    margin-top: -$grid-gap/2;
+    border-top: 0.5px solid $border-color;
+    border-radius: 0 0 $border-radius $border-radius;
+  }
 }
 
 // 客户信息区域
@@ -536,18 +548,37 @@ $card-padding: 24px;
   }
 }
 
-// 操作按钮区域 - 财务风格
+// iOS风格操作按钮区域
 .action-section {
-  @extend .card;
+  background-color: $background-tertiary;
+  padding: 16px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
   display: flex;
   gap: 16px;
-  justify-content: flex-end;
-  padding: 16px $card-padding;
-  background-color: $background-tertiary;
-  margin-top: $grid-gap;
-  position: sticky;
-  bottom: 32px;
-  z-index: 10;
+  justify-content: space-between;
+  border-top: 0.5px solid $border-color;
+  
+  @media (min-width: 768px) {
+    position: sticky;
+    bottom: 20px;
+    left: auto;
+    right: auto;
+    width: calc(100% - 40px);
+    max-width: 1200px;
+    margin: $grid-gap auto 0;
+    border-radius: $border-radius;
+    border: 0.5px solid rgba(0,0,0,0.1);
+    box-shadow: $shadow-sm;
+  }
+  
+  .primary-btn, .secondary-btn {
+    flex: 1;
+    text-align: center;
+  }
 }
 
 .primary-btn,