|  |  | 
 |  |  |         <div class="payroll-manage-detail-card-container"> | 
 |  |  |           <div class="payroll-manage-detail-card-item"> | 
 |  |  |             <div class="payroll-manage-detail-card-item-label">工时:</div> | 
 |  |  |             <div class="payroll-manage-detail-card-item-text">{{ contactPhoneNumber }}</div> | 
 |  |  |             <div class="payroll-manage-detail-card-item-text">{{ totalWorkHours }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="payroll-manage-detail-card-item"> | 
 |  |  |             <div class="payroll-manage-detail-card-item-label">结算金额:</div> | 
 |  |  |             <div class="payroll-manage-detail-card-item-text">{{ contactPhoneNumber }}</div> | 
 |  |  |             <div class="payroll-manage-detail-card-item-text"> | 
 |  |  |               {{ `¥${toThousand(settlementAmount)}` }} | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <slot name="actions"></slot> | 
 |  |  |         </div> | 
 |  |  |       </template> | 
 |  |  |     </FlexJobTopView> | 
 |  |  |     <slot name="actions"></slot> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup lang="ts"> | 
 |  |  | import { FlexJobTopView } from '@12333/components'; | 
 |  |  | import { EnumUserGender } from '@12333/constants'; | 
 |  |  | import { toThousand } from '@12333/utils'; | 
 |  |  |  | 
 |  |  | defineOptions({ | 
 |  |  |   name: 'PayrollManageDetailCard', | 
 |  |  | 
 |  |  |   name?: string; | 
 |  |  |   gender?: EnumUserGender; | 
 |  |  |   isReal?: boolean; | 
 |  |  |   contactPhoneNumber?: string; | 
 |  |  |   totalWorkHours: number; | 
 |  |  |   settlementAmount?: number; | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | const props = withDefaults(defineProps<Props>(), {}); |