fix:hr4

src/app/pages/hr/employee-detail/employee-detail.html

@@ -1,262 +1,308 @@
 <div class="employee-detail-container" *ngIf="employee() as emp">
-  <!-- 页面头部 -->
-  <div class="detail-header">
-    <button mat-icon-button (click)="goBack()" class="back-button">
-      <mat-icon>arrow_back_ios</mat-icon>
+  <!-- iOS风格导航栏 -->
+  <div class="ios-navbar">
+    <button class="nav-back-btn" (click)="goBack()">
+      <mat-icon>chevron_left</mat-icon>
+      <span>返回</span>
     </button>
-    <h1>员工详情</h1>
-    <div class="header-actions">
-      <button mat-icon-button (click)="shareEmployee()" class="action-button">
-        <mat-icon>share</mat-icon>
+    <h1 class="nav-title">员工详情</h1>
+    <button class="nav-more-btn" [matMenuTriggerFor]="headerMenu">
+      <mat-icon>more_horiz</mat-icon>
+    </button>
+    <mat-menu #headerMenu="matMenu" class="ios-action-menu">
+      <button mat-menu-item (click)="editEmployee()" class="ios-menu-item">
+        <mat-icon>edit</mat-icon>
+        <span>编辑信息</span>
       </button>
-      <button mat-icon-button [matMenuTriggerFor]="headerMenu" class="action-button">
-        <mat-icon>more_horiz</mat-icon>
+      <button mat-menu-item (click)="exportEmployee()" class="ios-menu-item">
+        <mat-icon>file_download</mat-icon>
+        <span>导出档案</span>
       </button>
-      <mat-menu #headerMenu="matMenu" class="ios-action-menu">
-        <button mat-menu-item (click)="editEmployee()" class="ios-menu-item">
-          <mat-icon>edit</mat-icon>
-          <span>编辑信息</span>
-        </button>
-        <button mat-menu-item (click)="exportEmployee()" class="ios-menu-item">
-          <mat-icon>file_download</mat-icon>
-          <span>导出档案</span>
-        </button>
-        <mat-divider></mat-divider>
-        <button mat-menu-item (click)="deleteEmployee()" class="ios-menu-item danger">
-          <mat-icon>delete</mat-icon>
-          <span>删除员工</span>
-        </button>
-      </mat-menu>
-    </div>
+      <mat-divider></mat-divider>
+      <button mat-menu-item (click)="deleteEmployee()" class="ios-menu-item danger">
+        <mat-icon>delete</mat-icon>
+        <span>删除员工</span>
+      </button>
+    </mat-menu>
   </div>
 
-  <!-- 员工头像和基本信息卡片 -->
-  <div class="profile-card">
-    <div class="avatar-section">
-      <div class="avatar-container">
-        <img [src]="emp.avatar || 'assets/images/default-avatar.svg'" alt="员工头像" class="avatar">
-        <div class="status-indicator" [ngClass]="getStatusClass(emp.status)"></div>
-      </div>
+  <!-- iOS风格员工头像区域 -->
+  <div class="ios-profile-header">
+    <div class="profile-avatar">
+      <img [src]="emp.avatar || 'assets/images/default-avatar.svg'" alt="员工头像" class="avatar-image">
+      <div class="status-dot" [ngClass]="getStatusClass(emp.status)"></div>
     </div>
-    <div class="basic-info">
-      <h2 class="employee-name">{{emp.name}}</h2>
-      <p class="employee-position">{{emp.position}} · {{emp.department}}</p>
-      <div class="employee-meta">
-        <span class="employee-id">工号: {{emp.employeeId}}</span>
-        <span class="join-date">入职: {{emp.hireDate | date:'yyyy年MM月dd日'}}</span>
-      </div>
+    <h2 class="profile-name">{{emp.name}}</h2>
+    <p class="profile-title">{{emp.position}} · {{emp.department}}</p>
+    <div class="profile-actions">
+      <button class="action-btn call-btn" (click)="callEmployee(emp.phone)">
+        <mat-icon>phone</mat-icon>
+      </button>
+      <button class="action-btn message-btn" (click)="emailEmployee(emp.email)">
+        <mat-icon>email</mat-icon>
+      </button>
+      <button class="action-btn share-btn" (click)="shareEmployee()">
+        <mat-icon>share</mat-icon>
+      </button>
     </div>
   </div>
 
-  <!-- 基础信息卡片 -->
-  <div class="info-card">
-    <div class="card-header">
+  <!-- iOS风格基础信息列表 -->
+  <div class="ios-section">
+    <div class="section-header">
       <h3>基础信息</h3>
-      <button mat-icon-button (click)="editBasicInfo()" class="edit-button">
-        <mat-icon>edit</mat-icon>
-      </button>
     </div>
-    <div class="info-grid">
-      <div class="info-item">
-        <div class="info-label">姓名</div>
-        <div class="info-value">{{emp.name}}</div>
+    <div class="ios-list">
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">姓名</span>
+          <span class="item-value">{{emp.name}}</span>
+        </div>
       </div>
-      <div class="info-item">
-        <div class="info-label">年龄</div>
-        <div class="info-value">{{calculateAge(emp.birthDate)}}岁</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">年龄</span>
+          <span class="item-value">{{calculateAge(emp.birthDate)}}岁</span>
+        </div>
       </div>
-      <div class="info-item">
-        <div class="info-label">学历</div>
-        <div class="info-value">{{emp.education || '未填写'}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">学历</span>
+          <span class="item-value">{{emp.education || '未填写'}}</span>
+        </div>
       </div>
-      <div class="info-item">
-        <div class="info-label">工作年限</div>
-        <div class="info-value">{{emp.workYears || '未填写'}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">工作年限</span>
+          <span class="item-value">{{emp.workYears || '未填写'}}</span>
+        </div>
       </div>
-      <div class="info-item">
-        <div class="info-label">求职岗位</div>
-        <div class="info-value">{{emp.position}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">求职岗位</span>
+          <span class="item-value">{{emp.position}}</span>
+        </div>
       </div>
-      <div class="info-item">
-        <div class="info-label">身份证号</div>
-        <div class="info-value">{{maskIdCard(emp.idCard)}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">身份证号</span>
+          <span class="item-value">{{maskIdCard(emp.idCard)}}</span>
+        </div>
       </div>
-      <div class="info-item">
-        <div class="info-label">银行卡号</div>
-        <div class="info-value">{{maskBankCard(emp.bankCard)}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">银行卡号</span>
+          <span class="item-value">{{maskBankCard(emp.bankCard)}}</span>
+        </div>
       </div>
-      <div class="info-item">
-        <div class="info-label">手机号码</div>
-        <div class="info-value">{{emp.phone}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">手机号码</span>
+          <span class="item-value">{{emp.phone}}</span>
+        </div>
       </div>
     </div>
   </div>
 
-  <!-- 审核初筛状态卡片 -->
-  <div class="screening-card">
-    <div class="card-header">
+  <!-- iOS风格审核初筛列表 -->
+  <div class="ios-section">
+    <div class="section-header">
       <h3>审核初筛</h3>
-      <div class="screening-status" [ngClass]="getScreeningStatusClass(emp.screeningStatus)">
-        <mat-icon>{{getScreeningStatusIcon(emp.screeningStatus)}}</mat-icon>
-        <span>{{getScreeningStatusText(emp.screeningStatus)}}</span>
+    </div>
+    <div class="ios-list">
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">审核状态</span>
+          <div class="status-badge" [ngClass]="getScreeningStatusClass(emp.screeningStatus)">
+            <mat-icon>{{getScreeningStatusIcon(emp.screeningStatus)}}</mat-icon>
+            <span>{{getScreeningStatusText(emp.screeningStatus)}}</span>
+          </div>
+        </div>
       </div>
+      @if (emp.screeningComment) {
+        <div class="list-item">
+          <div class="item-content">
+            <span class="item-label">审核备注</span>
+            <span class="item-value">{{emp.screeningComment}}</span>
+          </div>
+        </div>
+      }
+      @if (emp.screeningTime) {
+        <div class="list-item">
+          <div class="item-content">
+            <span class="item-label">审核时间</span>
+            <span class="item-value">{{emp.screeningTime | date:'yyyy-MM-dd HH:mm'}}</span>
+          </div>
+        </div>
+      }
     </div>
     
     @if (emp.screeningStatus === 'pending') {
-      <div class="screening-actions">
-        <button mat-raised-button color="primary" (click)="approveScreening()" class="approve-button">
+      <div class="ios-actions">
+        <button class="ios-btn primary" (click)="approveScreening()">
           <mat-icon>check_circle</mat-icon>
           通过初筛
         </button>
-        <button mat-stroked-button color="warn" (click)="rejectScreening()" class="reject-button">
+        <button class="ios-btn secondary" (click)="rejectScreening()">
           <mat-icon>cancel</mat-icon>
           不通过
         </button>
       </div>
-    } @else {
-      <div class="screening-result">
-        <div class="result-info">
-          <div class="result-label">审核结果:</div>
-          <div class="result-value" [ngClass]="getScreeningStatusClass(emp.screeningStatus)">
-            {{getScreeningStatusText(emp.screeningStatus)}}
-          </div>
-        </div>
-        @if (emp.screeningComment) {
-          <div class="result-comment">
-            <div class="comment-label">审核备注:</div>
-            <div class="comment-value">{{emp.screeningComment}}</div>
-          </div>
-        }
-        <div class="result-time">
-          审核时间: {{emp.screeningTime | date:'yyyy-MM-dd HH:mm'}}
-        </div>
-      </div>
     }
   </div>
 
-  <!-- 联系信息卡片 -->
-  <div class="contact-card">
-    <div class="card-header">
+  <!-- iOS风格联系信息列表 -->
+  <div class="ios-section">
+    <div class="section-header">
       <h3>联系信息</h3>
-      <button mat-icon-button (click)="editContactInfo()" class="edit-button">
-        <mat-icon>edit</mat-icon>
-      </button>
     </div>
-    <div class="contact-list">
-      <div class="contact-item">
-        <mat-icon>phone</mat-icon>
-        <div class="contact-info">
-          <div class="contact-label">手机号码</div>
-          <div class="contact-value">{{emp.phone}}</div>
+    <div class="ios-list">
+      <div class="list-item clickable" (click)="callEmployee(emp.phone)">
+        <div class="item-icon">
+          <mat-icon>phone</mat-icon>
+        </div>
+        <div class="item-content">
+          <span class="item-label">手机号码</span>
+          <span class="item-value">{{emp.phone}}</span>
+        </div>
+        <div class="item-action">
+          <mat-icon>chevron_right</mat-icon>
         </div>
-        <button mat-icon-button (click)="callEmployee(emp.phone)">
-          <mat-icon>call</mat-icon>
-        </button>
       </div>
-      <div class="contact-item">
-        <mat-icon>email</mat-icon>
-        <div class="contact-info">
-          <div class="contact-label">邮箱地址</div>
-          <div class="contact-value">{{emp.email || '未填写'}}</div>
+      <div class="list-item clickable" (click)="emailEmployee(emp.email)" [class.disabled]="!emp.email">
+        <div class="item-icon">
+          <mat-icon>email</mat-icon>
+        </div>
+        <div class="item-content">
+          <span class="item-label">邮箱地址</span>
+          <span class="item-value">{{emp.email || '未填写'}}</span>
+        </div>
+        <div class="item-action">
+          <mat-icon>chevron_right</mat-icon>
         </div>
-        <button mat-icon-button (click)="emailEmployee(emp.email)" [disabled]="!emp.email">
-          <mat-icon>send</mat-icon>
-        </button>
       </div>
-      <div class="contact-item">
-        <mat-icon>location_on</mat-icon>
-        <div class="contact-info">
-          <div class="contact-label">家庭住址</div>
-          <div class="contact-value">{{emp.address || '未填写'}}</div>
+      <div class="list-item">
+        <div class="item-icon">
+          <mat-icon>location_on</mat-icon>
+        </div>
+        <div class="item-content">
+          <span class="item-label">家庭住址</span>
+          <span class="item-value">{{emp.address || '未填写'}}</span>
         </div>
       </div>
     </div>
   </div>
 
-  <!-- 工作信息卡片 -->
-  <div class="work-card">
-    <div class="card-header">
+  <!-- iOS风格工作信息列表 -->
+  <div class="ios-section">
+    <div class="section-header">
       <h3>工作信息</h3>
-      <button mat-icon-button (click)="editWorkInfo()" class="edit-button">
-        <mat-icon>edit</mat-icon>
-      </button>
     </div>
-    <div class="work-grid">
-      <div class="work-item">
-        <div class="work-label">所属部门</div>
-        <div class="work-value">{{emp.department}}</div>
+    <div class="ios-list">
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">所属部门</span>
+          <span class="item-value">{{emp.department}}</span>
+        </div>
       </div>
-      <div class="work-item">
-        <div class="work-label">职位</div>
-        <div class="work-value">{{emp.position}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">职位</span>
+          <span class="item-value">{{emp.position}}</span>
+        </div>
       </div>
-      <div class="work-item">
-        <div class="work-label">员工状态</div>
-        <div class="work-value">
-          <span class="status-badge" [ngClass]="getStatusClass(emp.status)">
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">员工状态</span>
+          <div class="status-badge" [ngClass]="getStatusClass(emp.status)">
             {{emp.status}}
-          </span>
+          </div>
         </div>
       </div>
-      <div class="work-item">
-        <div class="work-label">入职日期</div>
-        <div class="work-value">{{emp.hireDate | date:'yyyy年MM月dd日'}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">入职日期</span>
+          <span class="item-value">{{emp.hireDate | date:'yyyy年MM月dd日'}}</span>
+        </div>
       </div>
-      <div class="work-item">
-        <div class="work-label">工作年限</div>
-        <div class="work-value">{{calculateWorkYears(emp.hireDate)}}年</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">工作年限</span>
+          <span class="item-value">{{calculateWorkYears(emp.hireDate)}}年</span>
+        </div>
       </div>
-      <div class="work-item">
-        <div class="work-label">直属上级</div>
-        <div class="work-value">{{emp.supervisor || '未指定'}}</div>
+      <div class="list-item">
+        <div class="item-content">
+          <span class="item-label">直属上级</span>
+          <span class="item-value">{{emp.supervisor || '未指定'}}</span>
+        </div>
       </div>
     </div>
   </div>
 
-  <!-- 底部操作按钮 -->
-  <div class="bottom-actions">
-    <button mat-raised-button color="primary" (click)="editEmployee()" class="action-btn">
+  <!-- iOS风格底部操作按钮 -->
+  <div class="ios-actions">
+    <button class="ios-action-button primary" (click)="editEmployee()">
       <mat-icon>edit</mat-icon>
-      编辑信息
+      <span>编辑员工</span>
     </button>
-    <button mat-stroked-button (click)="viewAttendance()" class="action-btn">
-      <mat-icon>event_note</mat-icon>
-      考勤记录
+    <button class="ios-action-button" (click)="viewAttendance()">
+      <mat-icon>schedule</mat-icon>
+      <span>考勤记录</span>
     </button>
-    <button mat-stroked-button (click)="viewSalary()" class="action-btn">
-      <mat-icon>account_balance_wallet</mat-icon>
-      薪资记录
+    <button class="ios-action-button" (click)="viewSalary()">
+      <mat-icon>attach_money</mat-icon>
+      <span>薪资记录</span>
     </button>
   </div>
 </div>
 
-<!-- 审核对话框 -->
-<ng-template #screeningDialog>
-  <div class="screening-dialog">
-    <h2 mat-dialog-title>审核初筛</h2>
-    <mat-dialog-content>
-      <form [formGroup]="screeningForm" class="screening-form">
-        <div class="form-group">
-          <label>审核结果</label>
-          <mat-button-toggle-group formControlName="status" class="status-toggle">
-            <mat-button-toggle value="approved">通过</mat-button-toggle>
-            <mat-button-toggle value="rejected">不通过</mat-button-toggle>
-          </mat-button-toggle-group>
+<!-- iOS风格审核对话框 -->
+<div class="ios-modal" [class.show]="showReviewDialog">
+  <div class="modal-backdrop" (click)="closeReviewDialog()"></div>
+  <div class="modal-content">
+    <div class="modal-header">
+      <h3>审核员工</h3>
+      <button class="close-button" (click)="closeReviewDialog()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="ios-section">
+        <div class="section-header">
+          <h4>审核结果</h4>
         </div>
-        
-        <div class="form-group">
-          <mat-form-field appearance="outline" class="full-width">
-            <mat-label>审核备注</mat-label>
-            <textarea matInput formControlName="comment" rows="4" placeholder="请输入审核备注或建议"></textarea>
-          </mat-form-field>
+        <div class="ios-list">
+          <div class="list-item clickable" [class.selected]="reviewResult === 'approved'" (click)="reviewResult = 'approved'">
+            <div class="item-content">
+              <span class="item-label">通过</span>
+            </div>
+            <div class="item-action" *ngIf="reviewResult === 'approved'">
+              <mat-icon>check</mat-icon>
+            </div>
+          </div>
+          <div class="list-item clickable" [class.selected]="reviewResult === 'rejected'" (click)="reviewResult = 'rejected'">
+            <div class="item-content">
+              <span class="item-label">拒绝</span>
+            </div>
+            <div class="item-action" *ngIf="reviewResult === 'rejected'">
+              <mat-icon>check</mat-icon>
+            </div>
+          </div>
         </div>
-      </form>
-    </mat-dialog-content>
-    <mat-dialog-actions align="end">
-      <button mat-button mat-dialog-close>取消</button>
-      <button mat-raised-button color="primary" (click)="submitScreening()" [disabled]="screeningForm.invalid">
-        提交审核
-      </button>
-    </mat-dialog-actions>
+      </div>
+      <div class="ios-section">
+        <div class="section-header">
+          <h4>审核备注</h4>
+        </div>
+        <div class="ios-textarea">
+          <textarea [(ngModel)]="reviewComment" rows="4" placeholder="请输入审核意见..."></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="modal-actions">
+      <button class="ios-button secondary" (click)="closeReviewDialog()">取消</button>
+      <button class="ios-button primary" (click)="submitReview()">提交审核</button>
+    </div>
   </div>
-</ng-template>
+</div>

src/app/pages/hr/employee-detail/employee-detail.scss

@@ -1,520 +1,581 @@
 // iOS风格员工详情页面样式
 .employee-detail-container {
+  background: #f2f2f7;
   min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-  padding: 20px;
-  
-  @media (max-width: 768px) {
-    padding: 16px;
-  }
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
-// 页面头部
-.page-header {
+// iOS风格导航栏
+.ios-navbar {
+  background: rgba(248, 248, 248, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+  padding: 12px 16px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 24px;
-  padding: 0 8px;
+  height: 44px;
 
-  .header-left {
+  .nav-left {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 12px;
 
     .back-button {
-      width: 40px;
-      height: 40px;
-      border-radius: 20px;
-      background: rgba(255, 255, 255, 0.9);
-      backdrop-filter: blur(10px);
+      background: none;
       border: none;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
+      padding: 8px;
+      border-radius: 8px;
+      color: #007AFF;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
 
       &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        background: rgba(0, 122, 255, 0.1);
       }
 
       mat-icon {
-        color: #333;
         font-size: 20px;
+        width: 20px;
+        height: 20px;
       }
     }
 
-    .page-title {
-      font-size: 28px;
-      font-weight: 700;
-      color: #1a1a1a;
+    .nav-title {
+      font-size: 17px;
+      font-weight: 600;
+      color: #000;
       margin: 0;
-      letter-spacing: -0.5px;
     }
   }
 
-  .header-actions {
-    display: flex;
-    gap: 12px;
-
-    .action-button {
-      width: 44px;
-      height: 44px;
-      border-radius: 22px;
-      background: rgba(255, 255, 255, 0.9);
-      backdrop-filter: blur(10px);
+  .nav-right {
+    .more-button {
+      background: none;
       border: none;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
+      padding: 8px;
+      border-radius: 8px;
+      color: #007AFF;
+      cursor: pointer;
+      transition: all 0.2s ease;
 
       &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        background: rgba(0, 122, 255, 0.1);
       }
 
       mat-icon {
-        color: #007AFF;
         font-size: 20px;
+        width: 20px;
+        height: 20px;
       }
     }
   }
 }
 
-// 员工头像和基本信息卡片
-.employee-header-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 24px;
-  padding: 32px;
-  margin-bottom: 24px;
-  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+// iOS风格头像区域
+.ios-avatar-section {
+  background: linear-gradient(135deg, #007AFF, #5856D6);
+  padding: 32px 16px;
+  text-align: center;
   color: white;
-  position: relative;
-  overflow: hidden;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-    pointer-events: none;
+  .avatar-container {
+    margin-bottom: 16px;
+
+    .employee-avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 40px;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      object-fit: cover;
+    }
   }
 
-  .employee-header-content {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    position: relative;
-    z-index: 1;
+  .employee-name {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
 
-    @media (max-width: 768px) {
-      flex-direction: column;
-      text-align: center;
-      gap: 20px;
-    }
+  .employee-position {
+    font-size: 16px;
+    opacity: 0.8;
+    margin-bottom: 20px;
+  }
 
-    .employee-avatar {
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
+  .quick-actions {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+
+    .quick-action {
       background: rgba(255, 255, 255, 0.2);
+      border: none;
+      border-radius: 20px;
+      padding: 8px 16px;
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
       display: flex;
       align-items: center;
-      justify-content: center;
-      border: 4px solid rgba(255, 255, 255, 0.3);
-      backdrop-filter: blur(10px);
+      gap: 6px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateY(-1px);
+      }
 
       mat-icon {
-        font-size: 48px;
-        width: 48px;
-        height: 48px;
-        color: rgba(255, 255, 255, 0.9);
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
       }
     }
+  }
+}
 
-    .employee-info {
-      flex: 1;
+// iOS风格分组
+.ios-section {
+  margin: 20px 16px;
 
-      .employee-name {
-        font-size: 32px;
-        font-weight: 700;
-        margin: 0 0 8px 0;
-        letter-spacing: -0.5px;
-      }
+  .section-header {
+    padding: 0 16px 8px 16px;
 
-      .employee-position {
-        font-size: 18px;
-        opacity: 0.9;
-        margin: 0 0 16px 0;
-        font-weight: 500;
-      }
+    h3, h4 {
+      font-size: 13px;
+      font-weight: 400;
+      color: #6d6d72;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin: 0;
+    }
+  }
+}
 
-      .employee-meta {
-        display: flex;
-        gap: 24px;
-        flex-wrap: wrap;
+// iOS风格列表
+.ios-list {
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
-        @media (max-width: 768px) {
-          justify-content: center;
-        }
+  .list-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 0.5px solid rgba(60, 60, 67, 0.1);
+    transition: background-color 0.2s ease;
 
-        .meta-item {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          font-size: 14px;
-          opacity: 0.9;
-
-          mat-icon {
-            font-size: 16px;
-            width: 16px;
-            height: 16px;
-          }
-        }
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+
+      &:active {
+        background: rgba(0, 0, 0, 0.08);
       }
     }
-  }
-}
 
-// 信息卡片通用样式
-.info-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  padding: 24px;
-  margin-bottom: 20px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  transition: all 0.3s ease;
+    &.selected {
+      background: rgba(0, 122, 255, 0.1);
 
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-  }
+      .item-label {
+        color: #007AFF;
+        font-weight: 500;
+      }
+    }
 
-  .card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
 
-    .card-title {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      font-size: 20px;
-      font-weight: 600;
-      color: #1a1a1a;
-      margin: 0;
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    .item-icon {
+      margin-right: 12px;
+      color: #007AFF;
 
       mat-icon {
-        color: #007AFF;
-        font-size: 24px;
-        width: 24px;
-        height: 24px;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
       }
     }
 
-    .card-action {
-      min-width: 36px;
-      height: 36px;
-      border-radius: 18px;
-      background: rgba(0, 122, 255, 0.1);
-      border: none;
+    .item-content {
+      flex: 1;
       display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
+      flex-direction: column;
+      gap: 2px;
 
-      &:hover {
-        background: rgba(0, 122, 255, 0.2);
-        transform: scale(1.1);
+      .item-label {
+        font-size: 17px;
+        color: #000;
+        font-weight: 400;
       }
 
+      .item-value {
+        font-size: 17px;
+        color: #8e8e93;
+        margin-left: auto;
+      }
+    }
+
+    .item-action {
+      margin-left: 8px;
+      color: #c7c7cc;
+
       mat-icon {
-        color: #007AFF;
         font-size: 18px;
         width: 18px;
         height: 18px;
       }
     }
-  }
 
-  .card-content {
-    .info-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 16px;
+    // 双行布局
+    &.two-line .item-content {
+      .item-label {
+        font-size: 17px;
+        color: #000;
+      }
 
-      @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+      .item-value {
+        font-size: 15px;
+        color: #8e8e93;
+        margin-left: 0;
       }
+    }
+  }
+}
 
-      .info-item {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
+// 状态徽章
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 
-        .info-label {
-          font-size: 14px;
-          color: #666;
-          font-weight: 500;
-        }
+  &.status-active {
+    background: #34c759;
+    color: white;
+  }
 
-        .info-value {
-          font-size: 16px;
-          color: #1a1a1a;
-          font-weight: 600;
-          word-break: break-all;
+  &.status-probation {
+    background: #ff9500;
+    color: white;
+  }
 
-          &.clickable {
-            color: #007AFF;
-            cursor: pointer;
-            transition: color 0.3s ease;
+  &.status-resigned {
+    background: #8e8e93;
+    color: white;
+  }
 
-            &:hover {
-              color: #0056b3;
-            }
-          }
-        }
-      }
-    }
+  &.screening-approved {
+    background: #34c759;
+    color: white;
+  }
+
+  &.screening-rejected {
+    background: #ff3b30;
+    color: white;
+  }
+
+  &.screening-pending {
+    background: #ff9500;
+    color: white;
   }
 }
 
-// 审核状态卡片
-.screening-card {
-  .screening-status {
+// iOS风格操作按钮
+.ios-actions {
+  padding: 20px 16px 32px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .ios-action-button {
+    background: white;
+    border: none;
+    border-radius: 10px;
+    padding: 16px;
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 16px;
-    border-radius: 16px;
-    margin-bottom: 16px;
-    font-weight: 600;
-
-    &.screening-approved {
-      background: linear-gradient(135deg, #4CAF50, #45a049);
-      color: white;
+    justify-content: center;
+    gap: 8px;
+    font-size: 17px;
+    font-weight: 500;
+    color: #007AFF;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+      transform: translateY(-1px);
     }
 
-    &.screening-rejected {
-      background: linear-gradient(135deg, #f44336, #d32f2f);
-      color: white;
+    &:active {
+      background: rgba(0, 0, 0, 0.08);
+      transform: translateY(0);
     }
 
-    &.screening-pending {
-      background: linear-gradient(135deg, #ff9800, #f57c00);
+    &.primary {
+      background: #007AFF;
       color: white;
+
+      &:hover {
+        background: #0056b3;
+      }
     }
 
     mat-icon {
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
     }
+  }
+}
+
+// iOS风格文本域
+.ios-textarea {
+  background: white;
+  border-radius: 10px;
+  padding: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
-    .status-text {
-      font-size: 18px;
+  textarea {
+    width: 100%;
+    border: none;
+    outline: none;
+    font-size: 17px;
+    font-family: inherit;
+    resize: vertical;
+    min-height: 80px;
+    background: transparent;
+
+    &::placeholder {
+      color: #c7c7cc;
     }
   }
+}
 
-  .screening-comment {
-    background: rgba(0, 122, 255, 0.05);
-    border-radius: 12px;
-    padding: 16px;
-    margin-bottom: 16px;
-    border-left: 4px solid #007AFF;
+// iOS风格模态框
+.ios-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-end;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
 
-    .comment-label {
-      font-size: 14px;
-      color: #666;
-      margin-bottom: 8px;
-      font-weight: 500;
-    }
+  &.show {
+    opacity: 1;
+    visibility: visible;
 
-    .comment-text {
-      font-size: 16px;
-      color: #1a1a1a;
-      line-height: 1.5;
+    .modal-content {
+      transform: translateY(0);
     }
   }
 
-  .screening-actions {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
+  .modal-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
 
-    .screening-button {
-      flex: 1;
-      min-width: 120px;
-      height: 48px;
-      border-radius: 24px;
-      font-weight: 600;
-      font-size: 16px;
-      border: none;
-      transition: all 0.3s ease;
+  .modal-content {
+    background: #f2f2f7;
+    border-radius: 20px 20px 0 0;
+    width: 100%;
+    max-height: 80vh;
+    overflow-y: auto;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+    position: relative;
+
+    .modal-header {
+      background: white;
+      padding: 16px;
+      border-bottom: 0.5px solid rgba(60, 60, 67, 0.1);
       display: flex;
       align-items: center;
-      justify-content: center;
-      gap: 8px;
+      justify-content: space-between;
+      border-radius: 20px 20px 0 0;
+
+      h3 {
+        font-size: 17px;
+        font-weight: 600;
+        margin: 0;
+        color: #000;
+      }
 
-      &.approve-button {
-        background: linear-gradient(135deg, #4CAF50, #45a049);
-        color: white;
+      .close-button {
+        background: none;
+        border: none;
+        padding: 8px;
+        border-radius: 8px;
+        color: #007AFF;
+        cursor: pointer;
 
         &:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
+          background: rgba(0, 122, 255, 0.1);
         }
-      }
-
-      &.reject-button {
-        background: linear-gradient(135deg, #f44336, #d32f2f);
-        color: white;
 
-        &:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
+        mat-icon {
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
         }
       }
+    }
 
-      mat-icon {
-        font-size: 20px;
-        width: 20px;
-        height: 20px;
-      }
+    .modal-body {
+      padding: 20px 0;
     }
-  }
-}
 
-// 底部操作按钮
-.bottom-actions {
-  display: flex;
-  gap: 16px;
-  margin-top: 32px;
-  flex-wrap: wrap;
-
-  .action-button {
-    flex: 1;
-    min-width: 140px;
-    height: 52px;
-    border-radius: 26px;
-    font-weight: 600;
-    font-size: 16px;
-    border: none;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
+    .modal-actions {
+      padding: 16px;
+      display: flex;
+      gap: 12px;
 
-    &.primary {
-      background: linear-gradient(135deg, #007AFF, #0056b3);
-      color: white;
+      .ios-button {
+        flex: 1;
+        background: white;
+        border: none;
+        border-radius: 10px;
+        padding: 16px;
+        font-size: 17px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
 
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
-      }
-    }
+        &.primary {
+          background: #007AFF;
+          color: white;
 
-    &.secondary {
-      background: rgba(0, 122, 255, 0.1);
-      color: #007AFF;
-      border: 2px solid rgba(0, 122, 255, 0.2);
+          &:hover {
+            background: #0056b3;
+          }
+        }
 
-      &:hover {
-        background: rgba(0, 122, 255, 0.2);
-        transform: translateY(-2px);
-      }
-    }
+        &.secondary {
+          color: #007AFF;
 
-    mat-icon {
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
+          &:hover {
+            background: rgba(0, 0, 0, 0.04);
+          }
+        }
+      }
     }
   }
 }
 
-// 状态徽章
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+// 三点菜单样式（调整透明度）
+:host ::ng-deep .mat-mdc-menu-panel {
+  background: rgba(255, 255, 255, 0.9) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 12px !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
 
-  &.status-active {
-    background: linear-gradient(135deg, #4CAF50, #45a049);
-    color: white;
+:host ::ng-deep .mat-mdc-menu-item {
+  padding: 12px 16px !important;
+  font-size: 17px !important;
+  color: #000 !important;
+  transition: background-color 0.2s ease !important;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04) !important;
   }
 
-  &.status-probation {
-    background: linear-gradient(135deg, #ff9800, #f57c00);
-    color: white;
+  .mat-icon {
+    margin-right: 12px !important;
+    color: #007AFF !important;
+    font-size: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
   }
 
-  &.status-resigned {
-    background: linear-gradient(135deg, #9e9e9e, #757575);
-    color: white;
+  &.delete-item {
+    color: #ff3b30 !important;
+
+    .mat-icon {
+      color: #ff3b30 !important;
+    }
   }
 }
 
 // 响应式设计
 @media (max-width: 768px) {
-  .employee-detail-container {
-    padding: 16px;
-  }
+  .ios-avatar-section {
+    padding: 24px 16px;
 
-  .page-header {
-    margin-bottom: 20px;
+    .employee-name {
+      font-size: 20px;
+    }
 
-    .header-left .page-title {
-      font-size: 24px;
+    .employee-position {
+      font-size: 14px;
     }
-  }
 
-  .employee-header-card {
-    padding: 24px;
-    
-    .employee-header-content {
-      .employee-info .employee-name {
-        font-size: 28px;
+    .quick-actions {
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+
+      .quick-action {
+        width: 100%;
+        max-width: 200px;
+        justify-content: center;
       }
     }
   }
 
-  .info-card {
-    padding: 20px;
-    margin-bottom: 16px;
+  .ios-section {
+    margin: 16px 12px;
   }
 
-  .bottom-actions {
-    flex-direction: column;
-    
-    .action-button {
-      min-width: 100%;
-    }
+  .ios-actions {
+    padding: 16px 12px 24px 12px;
   }
 }
 
 // 动画效果
-@keyframes fadeInUp {
+@keyframes slideInUp {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
@@ -522,26 +583,14 @@
   }
 }
 
-.info-card {
-  animation: fadeInUp 0.6s ease-out;
-}
-
-.employee-header-card {
-  animation: fadeInUp 0.6s ease-out 0.1s both;
-}
-
-// 对话框样式
-:host ::ng-deep .mat-mdc-dialog-container {
-  border-radius: 20px !important;
-  overflow: hidden;
-}
+.ios-section {
+  animation: slideInUp 0.4s ease-out;
 
-:host ::ng-deep .mat-mdc-dialog-content {
-  padding: 24px !important;
+  &:nth-child(2) { animation-delay: 0.1s; }
+  &:nth-child(3) { animation-delay: 0.2s; }
+  &:nth-child(4) { animation-delay: 0.3s; }
 }
 
-:host ::ng-deep .mat-mdc-dialog-actions {
-  padding: 16px 24px 24px !important;
-  justify-content: flex-end;
-  gap: 12px;
+.ios-avatar-section {
+  animation: slideInUp 0.4s ease-out;
 }