flexJobMiniApp.git

New file
			@@ -0,0 +1,78 @@
			<template>
			<div class="payroll-manage-detail-card-wrapper">
			<FlexJobTopView :avatar="avatar" :name="name" :gender="gender" :isReal="isReal">
			<template #detail>
			<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">{{ 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">
			{{ `¥${toThousand(settlementAmount)}` }}
			</div>
			</div>
			<slot name="actions"></slot>
			</div>
			</template>
			</FlexJobTopView>
			</div>
			</template>

			<script setup lang="ts">
			import { FlexJobTopView } from '@12333/components';
			import { EnumUserGender } from '@12333/constants';
			import { toThousand } from '@12333/utils';

			defineOptions({
			name: 'PayrollManageDetailCard',
			});

			type Props = {
			avatar?: string;
			name?: string;
			gender?: EnumUserGender;
			isReal?: boolean;
			totalWorkHours: number;
			settlementAmount?: number;
			};

			const props = withDefaults(defineProps<Props>(), {});
			</script>

			<style lang="scss">
			@import '@/styles/common.scss';

			.payroll-manage-detail-card-wrapper {
			background: #ffffff;
			border-radius: 12px;
			padding: 40px;
			padding-right: 26px;
			margin-bottom: 24px;

			.payroll-manage-detail-card-container {
			display: flex;
			flex-direction: column;
			margin-top: 14px;

			.payroll-manage-detail-card-item {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 24px;
			line-height: 32px;
			flex: 1;
			min-width: 0;

			.payroll-manage-detail-card-item-label {
			color: boleGetCssVar('text-color', 'regular');
			}

			.payroll-manage-detail-card-item-text {
			color: boleGetCssVar('text-color', 'secondary');
			}
			}
			}
			}
			</style>