thug0bin/animal-medication-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 페이지당 4개씩 정확히 배치 (2x2 그리드)

Browse Source
This commit is contained in:
청춘약국
2026-03-18 23:15:54 +09:00
parent 1c5758d9d5
commit 72ce6d9f05
1 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
templates/medication_guide_v2.html
View File

@@ -20,11 +20,20 @@
.container {
width: 210mm;
min-height: 297mm;
padding: 6mm;
padding: 5mm;
}
.page {
width: 200mm;
height: 287mm;
page-break-after: always;
position: relative;
}
.page:last-child {
page-break-after: avoid;
}
/* 헤더 */
.header {
display: flex;
@@ -372,28 +381,27 @@
</head>
<body>
<div class="container">
<!-- 헤더 -->
<div class="header">
<div class="header-left">
<div class="patient-name">{{ patient_name }} 보호자님</div>
<div class="patient-info">
🐾 {{ pet_name }} ({{ pet_species }}, {{ pet_age }})<br>
📅 {{ issue_date }}
</div>
</div>
<div class="header-center">
<div class="pharmacy-name">🏥 {{ pharmacy_name }}</div>
<div class="pharmacy-slogan">반려동물을 위한 전문 복약안내</div>
</div>
<div class="header-right">
{{ pharmacy_tel }}<br>
{{ pharmacy_address }}
</div>
</div>
<!-- 약품 카드들 (2x2 그리드) -->
<div class="drug-cards-grid">
<!-- 약품 카드들 (페이지당 4개, 2x2 그리드) -->
{% for drug in drugs %}
{% if loop.index0 % 4 == 0 %}
<div class="page">
{% if loop.index0 == 0 %}
<!-- 헤더 (첫 페이지만) -->
<div class="header">
<div class="header-left">
<div class="patient-name">{{ patient_name }} 보호자님</div>
<div class="patient-info">
🐾 {{ pet_name }} ({{ pet_species }}, {{ pet_age }}) | 📅 {{ issue_date }}
</div>
</div>
<div class="header-center">
<div class="pharmacy-name">🏥 {{ pharmacy_name }}</div>
</div>
<div class="header-right">{{ pharmacy_tel }}</div>
</div>
{% endif %}
<div class="drug-cards-grid">
{% endif %}
<div class="drug-card">
<div class="drug-card-header">
<div class="drug-icon">💊</div>
@@ -590,14 +598,20 @@
{% endif %}
</div>
</div>
{% if loop.index % 4 == 0 or loop.last %}
</div><!-- drug-cards-grid -->
{% if loop.last %}
<!-- 푸터 (마지막 페이지만) -->
<div class="footer">
<div class="footer-logo">🐾 동물약 복약안내 시스템 v2</div>
※ 본 안내문은 참고용입니다.
</div>
{% endif %}
</div><!-- page -->
{% endif %}
{% endfor %}
</div>
<!-- 푸터 -->
<div class="footer">
<div class="footer-logo">🐾 동물약 복약안내 시스템 v2</div>
※ 본 안내문은 참고용입니다. 정확한 투약은 반드시 수의사의 지시에 따라 주세요.
</div>
<!-- 푸터 제거됨 (위에서 처리) -->
</div>
</body>
</html>