fix: [payroll] PDF 급여명세서 레이아웃 수정
- 사원정보 테이블 colgroup으로 너비 고정 (오버플로우 해결) - footer를 table 기반으로 변경 (dompdf float 미지원) - 회사명 문자 인코딩 수정
This commit is contained in:
@@ -7,20 +7,18 @@
|
||||
body { font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; margin: 0; padding: 20px; background: #fff; }
|
||||
.container { max-width: 720px; margin: 0 auto; background: #fff; padding: 40px 36px; }
|
||||
h1 { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 2px; margin: 0 0 28px; border-bottom: 3px solid #333; padding-bottom: 16px; }
|
||||
.info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
|
||||
.info-table td { padding: 6px 10px; font-size: 13px; border: 1px solid #999; }
|
||||
.info-table .label { font-weight: bold; background: #f0f0f0; width: 70px; white-space: nowrap; }
|
||||
.info-table .value { min-width: 100px; }
|
||||
.info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; }
|
||||
.info-table td { padding: 6px 8px; font-size: 12px; border: 1px solid #999; overflow: hidden; }
|
||||
.info-table .label { font-weight: bold; background: #f0f0f0; text-align: center; }
|
||||
.payslip-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
|
||||
.payslip-table th, .payslip-table td { border: 1px solid #999; padding: 7px 12px; font-size: 13px; }
|
||||
.payslip-table th { background: #e8e8e8; font-weight: 700; text-align: center; letter-spacing: 4px; }
|
||||
.payslip-table .item-name { text-align: center; }
|
||||
.payslip-table .item-amount { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.payslip-table .item-amount { text-align: right; }
|
||||
.payslip-table .total-row td { font-weight: 700; background: #f8f8f8; }
|
||||
.payslip-table .net-row td { font-weight: 800; font-size: 14px; background: #f0f7ff; }
|
||||
.footer { margin-top: 20px; padding-top: 12px; font-size: 12px; color: #666; overflow: hidden; }
|
||||
.footer .left { float: left; }
|
||||
.footer .right { float: right; }
|
||||
.footer-table { width: 100%; margin-top: 20px; padding-top: 12px; border: none; }
|
||||
.footer-table td { font-size: 12px; color: #666; border: none; padding: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -29,21 +27,29 @@
|
||||
|
||||
{{-- 사원 정보 --}}
|
||||
<table class="info-table">
|
||||
<colgroup>
|
||||
<col style="width: 13%;">
|
||||
<col style="width: 20%;">
|
||||
<col style="width: 13%;">
|
||||
<col style="width: 20%;">
|
||||
<col style="width: 13%;">
|
||||
<col style="width: 21%;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td class="label">사원코드</td>
|
||||
<td class="value">{{ $payslipData['employee_code'] ?? '-' }}</td>
|
||||
<td>{{ $payslipData['employee_code'] ?? '-' }}</td>
|
||||
<td class="label">사원명</td>
|
||||
<td class="value">{{ $payslipData['employee_name'] ?? '-' }}</td>
|
||||
<td>{{ $payslipData['employee_name'] ?? '-' }}</td>
|
||||
<td class="label">입사일</td>
|
||||
<td class="value">{{ $payslipData['hire_date'] ?? '-' }}</td>
|
||||
<td>{{ $payslipData['hire_date'] ?? '-' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">부 서</td>
|
||||
<td class="value">{{ $payslipData['department'] ?? '-' }}</td>
|
||||
<td class="label">직 급</td>
|
||||
<td class="value">{{ $payslipData['position'] ?? '-' }}</td>
|
||||
<td class="label">호 봉</td>
|
||||
<td class="value">{{ $payslipData['grade'] ?? '-' }}</td>
|
||||
<td class="label">부서</td>
|
||||
<td>{{ $payslipData['department'] ?? '-' }}</td>
|
||||
<td class="label">직급</td>
|
||||
<td>{{ $payslipData['position'] ?? '-' }}</td>
|
||||
<td class="label">호봉</td>
|
||||
<td>{{ $payslipData['grade'] ?? '-' }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -100,10 +106,12 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="footer">
|
||||
<span class="left">귀하의 노고에 감사드립니다.</span>
|
||||
<span class="right">㍎코드브릿지엑스(CodebridgeX)</span>
|
||||
</div>
|
||||
<table class="footer-table">
|
||||
<tr>
|
||||
<td style="text-align: left;">귀하의 노고에 감사드립니다.</td>
|
||||
<td style="text-align: right;">(주)코드브릿지엑스(CodebridgeX)</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user