fix: 키오스크 세로 모니터 QR 코드 중앙 정렬
- portrait 모드 claim-left: row → column 레이아웃으로 변경 - QR 컨테이너, 결제 카드, 품목 카드 모두 중앙 정렬 - QR 이미지 크기 140px → 160px 조정 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
db5f6063ec
commit
da51f4bfd1
@ -396,16 +396,15 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.claim-left {
|
.claim-left {
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.claim-info-card { flex: 1; min-width: 200px; }
|
.claim-info-card { width: 100%; max-width: 480px; }
|
||||||
.qr-container { flex-shrink: 0; }
|
.qr-container { align-self: center; }
|
||||||
.items-card { width: 100%; max-height: 160px; }
|
.items-card { width: 100%; max-width: 480px; max-height: 160px; }
|
||||||
.qr-container img { width: 140px; height: 140px; }
|
.qr-container img { width: 160px; height: 160px; }
|
||||||
|
|
||||||
.divider { flex-direction: row; }
|
.divider { flex-direction: row; }
|
||||||
.divider-line { width: 60px; height: 2px; }
|
.divider-line { width: 60px; height: 2px; }
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user