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

feat: 2x2 그리드 레이아웃 적용

Browse Source
This commit is contained in:
청춘약국
2026-03-18 22:42:56 +09:00
parent a6725dace4
commit 25db8750cb
1 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
templates/medication_guide_v2.html
View File

@@ -68,11 +68,17 @@
color: #666; color: #666;
} }
/* 약품 카드 그리드 */
.drug-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3mm;
}
/* 약품 카드 공통 */ /* 약품 카드 공통 */
.drug-card { .drug-card {
border: 1px solid #E0E0E0; border: 1px solid #E0E0E0;
border-radius: 3mm; border-radius: 2mm;
margin-bottom: 4mm;
overflow: hidden; overflow: hidden;
page-break-inside: avoid; page-break-inside: avoid;
} }
@@ -80,21 +86,21 @@
.drug-card-header { .drug-card-header {
background: linear-gradient(135deg, #1565C0, #42A5F5); background: linear-gradient(135deg, #1565C0, #42A5F5);
color: white; color: white;
padding: 3mm; padding: 2mm;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 3mm; gap: 2mm;
} }
.drug-icon { .drug-icon {
width: 12mm; width: 8mm;
height: 12mm; height: 8mm;
background: white; background: white;
border-radius: 2mm; border-radius: 1.5mm;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 18pt; font-size: 12pt;
} }
.drug-title-area { .drug-title-area {
@@ -102,30 +108,32 @@
} }
.drug-name { .drug-name {
font-size: 12pt; font-size: 9pt;
font-weight: 700; font-weight: 700;
} }
.drug-subtitle { .drug-subtitle {
font-size: 7pt; font-size: 5pt;
opacity: 0.9; opacity: 0.9;
} }
.drug-badges { .drug-badges {
display: flex; display: flex;
gap: 1mm; gap: 0.5mm;
margin-top: 1mm; margin-top: 0.5mm;
flex-wrap: wrap;
} }
.badge { .badge {
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
padding: 0.5mm 2mm; padding: 0.3mm 1mm;
border-radius: 1mm; border-radius: 0.5mm;
font-size: 6pt; font-size: 5pt;
} }
.drug-card-body { .drug-card-body {
padding: 3mm; padding: 2mm;
font-size: 6pt;
} }
/* 구충제 전용 - 커버리지 표 */ /* 구충제 전용 - 커버리지 표 */
@@ -383,7 +391,8 @@
</div> </div>
</div> </div>
<!-- 약품 카드들 --> <!-- 약품 카드들 (2x2 그리드) -->
<div class="drug-cards-grid">
{% for drug in drugs %} {% for drug in drugs %}
<div class="drug-card"> <div class="drug-card">
<div class="drug-card-header"> <div class="drug-card-header">
@@ -557,6 +566,7 @@
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div>
<!-- 푸터 --> <!-- 푸터 -->
<div class="footer"> <div class="footer">