arie.bagus.2905/web-antrean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perubahan loket antrean

Browse Source
This commit is contained in:
Fanrouver
2026-01-21 15:18:35 +07:00
parent 0542757afa
commit 9bd4c51d65
1 changed files with 140 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
pages/Anjungan/AntreanMasuk/[id].vue
View File

@@ -578,7 +578,7 @@ onUnmounted(() => {
width: 100vw;
height: 100vh;
min-height: 100vh;
padding: 24px;
padding: 16px;
font-family: 'Roboto', sans-serif;
overflow: auto;
display: flex;
@@ -611,9 +611,9 @@ onUnmounted(() => {
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
border-radius: 16px;
padding: 24px 40px;
margin-bottom: 20px;
border-radius: 12px;
padding: 20px 32px;
margin-bottom: 16px;
box-shadow: 0 8px 24px rgba(25, 118, 210, 0.3);
flex-shrink: 0;
box-sizing: border-box;
@@ -622,13 +622,13 @@ onUnmounted(() => {
.header-left {
display: flex;
align-items: center;
gap: 24px;
gap: 20px;
}
.logo-circle {
background: rgba(255, 255, 255, 0.95);
width: 80px;
height: 80px;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
@@ -638,8 +638,8 @@ onUnmounted(() => {
}
.header-logo {
width: 64px;
height: 64px;
width: 56px;
height: 56px;
object-fit: contain;
padding: 4px;
}
@@ -649,13 +649,13 @@ onUnmounted(() => {
}
.hospital-name {
font-size: 48px;
font-size: 32px;
font-weight: 800;
color: var(--color-neutral-100);
margin: 0;
letter-spacing: 2px;
letter-spacing: 1px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
line-height: 1;
line-height: 1.1;
}
.display-subtitle {
@@ -692,7 +692,7 @@ onUnmounted(() => {
}
.time-large {
font-size: 56px;
font-size: 64px;
font-weight: 900;
color: var(--color-neutral-100);
letter-spacing: 2px;
@@ -701,28 +701,31 @@ onUnmounted(() => {
}
.date-small {
font-size: 18px;
font-size: 14px;
color: var(--color-neutral-100);
margin-top: 8px;
margin-top: 6px;
font-weight: 500;
opacity: 0.95;
}
/* ========== LOKET GRID CONTAINER ========== */
.loket-grid-container {
flex: 1 1 auto;
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 24px;
min-height: 0;
box-sizing: border-box;
overflow: hidden;
}
.lokets-grid {
display: grid;
gap: 16px;
gap: 12px;
width: 100%;
flex: 1;
min-height: 0;
box-sizing: border-box;
overflow: hidden;
/* grid-template-columns is set dynamically via :style binding */
}
@@ -734,16 +737,15 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 400px;
/* Calculate: viewport - header (~120px) - footer (100px) - container padding (48px) - margins (44px) */
max-height: calc(100vh - 312px);
min-height: 200px;
/* Tidak set max-height untuk allow card fleksibel */
}
/* Loket Header */
.loket-header-bar {
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
color: var(--color-neutral-100);
padding: 16px 20px;
padding: 14px 18px;
box-shadow: 0 2px 8px rgba(58, 97, 201, 0.2);
border-radius: 8px 8px 0 0;
flex-shrink: 0;
@@ -772,7 +774,7 @@ onUnmounted(() => {
color: var(--color-neutral-100) !important;
font-weight: 700;
font-size: 16px;
height: 36px !important;
height: 32px !important;
padding: 0 16px !important;
min-width: auto !important;
}
@@ -784,19 +786,15 @@ onUnmounted(() => {
/* Queue Display - Vertical Scrollable */
.queue-display {
flex: 1;
padding: 20px;
padding-bottom: 120px; /* Extra padding to prevent footer overlap */
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
padding-bottom: 100px;
overflow: hidden;
background: #FFFFFF;
min-height: 0;
box-sizing: border-box;
position: relative;
/* Smooth scrolling untuk menghindari jitter */
scroll-behavior: auto;
/* Hardware acceleration */
transform: translateZ(0);
-webkit-overflow-scrolling: touch;
perspective: 1000px;
transform-style: preserve-3d;
}
.queue-display.has-scroll {
@@ -836,15 +834,15 @@ onUnmounted(() => {
background: var(--color-neutral-400, #E1E5EA);
border: 1px solid var(--color-neutral-500, #CDD4DC);
border-radius: 8px;
padding: 16px 20px;
padding: 20px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
gap: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
min-height: 90px;
min-height: 100px;
position: relative;
cursor: default;
}
@@ -868,7 +866,7 @@ onUnmounted(() => {
}
.ticket-number {
font-size: 22px;
font-size: 40px;
font-weight: 800;
color: var(--color-primary-600, #3A61C9);
letter-spacing: 1px;
@@ -890,15 +888,13 @@ onUnmounted(() => {
right: 6px;
background: var(--color-danger-600, #DE473B);
border-radius: 50%;
width: 28px;
height: 28px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(222, 71, 59, 0.4);
z-index: 1;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
@@ -920,6 +916,7 @@ onUnmounted(() => {
.ticket-fast-track .v-icon {
color: #E53935 !important;
transition: all 0.2s ease;
font-size: 16px !important;
}
.ticket-fast-track:hover .v-icon {
@@ -931,7 +928,7 @@ onUnmounted(() => {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
padding: 60px 20px;
text-align: center;
min-height: 300px;
color: var(--color-neutral-600, #89939E);
@@ -941,6 +938,7 @@ onUnmounted(() => {
margin-bottom: 20px;
opacity: 0.6;
transition: all 0.3s ease;
font-size: 64px !important;
}
.empty-queue:hover .empty-icon {
@@ -949,14 +947,14 @@ onUnmounted(() => {
}
.empty-text {
font-size: 20px;
font-size: 18px;
font-weight: 600;
color: var(--color-neutral-700, #717171);
margin-bottom: 8px;
}
.empty-subtext {
font-size: 14px;
font-size: 13px;
font-weight: 400;
color: var(--color-neutral-600, #89939E);
opacity: 0.8;
@@ -966,29 +964,19 @@ onUnmounted(() => {
.footer-stats-bar {
background: #FFFFFF;
border: 2px solid var(--color-primary-200);
border-radius: 20px;
padding: 24px 40px;
border-radius: 14px;
padding: 20px 40px;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 32px;
gap: 24px;
box-shadow: 0 4px 16px rgba(25, 118, 210, 0.08);
flex: 0 0 100px;
flex-shrink: 0;
flex-grow: 0;
height: 100px;
order: 999;
min-height: 100px;
max-height: 100px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
position: relative;
overflow: visible;
visibility: visible !important;
opacity: 1 !important;
z-index: 10;
margin-top: auto;
min-height: 90px;
height: auto;
}
.stat-item {
@@ -998,15 +986,15 @@ onUnmounted(() => {
flex-shrink: 0;
min-width: fit-content;
width: auto;
height: 64px;
height: 70px;
}
.stat-icon {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
border-radius: 16px;
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
@@ -1027,37 +1015,37 @@ onUnmounted(() => {
flex-shrink: 0;
min-width: fit-content;
width: auto;
height: 64px;
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
.stat-value {
font-size: 42px;
font-size: 52px;
font-weight: 900;
color: #212121;
line-height: 1;
white-space: nowrap;
height: 42px;
height: auto;
display: flex;
align-items: center;
}
.stat-label {
font-size: 15px;
font-size: 14px;
color: #717171;
font-weight: 600;
margin-top: 4px;
height: 18px;
line-height: 18px;
margin-top: 6px;
height: auto;
line-height: 1.2;
}
.stat-divider {
width: 2px;
height: 64px;
height: 70px;
min-width: 2px;
min-height: 64px;
min-height: 70px;
background: var(--color-primary-200);
flex-shrink: 0;
}
@@ -1076,8 +1064,8 @@ onUnmounted(() => {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 64px;
padding-left: 32px;
height: 70px;
padding-left: 24px;
}
/* ========== RESPONSIVE ========== */
@@ -1246,6 +1234,83 @@ onUnmounted(() => {
}
}
/* Untuk layar SANGAT BESAR (55" dan lebih) - 2560px+ */
@media (min-width: 2560px) {
.antrian-display-container {
padding: clamp(32px, 2.5vw, 48px);
}
.hospital-name {
font-size: clamp(48px, 6vw, 96px);
}
.time-large {
font-size: clamp(56px, 8vw, 120px);
}
.loket-name {
font-size: clamp(32px, 5vw, 80px);
}
.loket-header-chip {
font-size: clamp(16px, 2.5vw, 36px);
height: clamp(40px, 4vw, 72px) !important;
padding: 0 clamp(16px, 2.5vw, 40px) !important;
}
.ticket-number {
font-size: clamp(48px, 6.5vw, 104px);
}
.ticket-card {
min-height: clamp(100px, 12.5vh, 220px);
padding: clamp(16px, 2.2vw, 40px) clamp(24px, 3vw, 56px);
}
.queue-display {
padding-bottom: clamp(160px, 18vh, 240px);
}
.stat-value {
font-size: clamp(64px, 8vw, 128px);
}
.stat-label {
font-size: clamp(18px, 2.5vw, 40px);
}
.footer-message {
font-size: clamp(28px, 4vw, 56px);
height: clamp(80px, 10vh, 160px);
}
.stat-item {
height: clamp(80px, 10vh, 160px);
gap: clamp(16px, 2.5vw, 40px);
}
.stat-icon {
width: clamp(80px, 10vh, 160px);
height: clamp(80px, 10vh, 160px);
min-width: clamp(80px, 10vh, 160px);
min-height: clamp(80px, 10vh, 160px);
}
.stat-divider {
height: clamp(80px, 10vh, 160px);
min-height: clamp(80px, 10vh, 160px);
}
.stat-info {
height: clamp(80px, 10vh, 160px);
}
.footer-stats-bar {
padding: clamp(24px, 3.5vw, 48px) clamp(40px, 5vw, 80px);
gap: clamp(24px, 3vw, 48px);
}
}
@media (max-width: 768px) {
.hospital-name {
font-size: 28px;