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

Update Theme

Browse Source
This commit is contained in:
bagus-arie05
2025-09-24 11:18:02 +07:00
parent a66f883372
commit 1b1d7e331a
11 changed files with 368 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/default.vue
+23 -25
View File
@@ -1,31 +1,26 @@
<template>
<!-- Root component for the entire Vuetify application -->
<v-app>
<!-- App bar di bagian atas layout -->
<v-app-bar app color=#ff9248 dark>
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
<v-toolbar-title class="ml-2" style="color: white;">Antrean RSSA</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon color="white">mdi-account-circle</v-icon>
</v-btn>
<span class="mr-2" style="color:white">Adam Sulfat</span>
</v-app-bar>
<v-app-bar app color="#ff9248" dark>
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
<v-toolbar-title class="ml-2" style="color: white"
>Antrean RSSA</v-toolbar-title
>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon color="white">mdi-account-circle</v-icon>
</v-btn>
<span class="mr-2" style="color: white">Adam Sulfat</span>
</v-app-bar>
<!-- Komponen sidebar (v-navigation-drawer) yang Anda berikan -->
<v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
<!-- Komponen untuk menampilkan item daftar menu -->
<v-list density="compact" nav>
<!-- Loop melalui setiap item di array 'items' -->
<template v-for="item in items" :key="item.title">
<!-- V-menu untuk item yang memiliki sub-menu (children) -->
<v-menu
v-if="item.children"
open-on-hover
location="end"
:nudge-right="8"
>
<!-- Slot untuk mengaktifkan menu saat diklik/hover -->
<template v-slot:activator="{ props }">
<v-list-item
v-bind="props"
@@ -71,10 +66,8 @@
</v-list>
</v-navigation-drawer>
<!-- Area konten utama aplikasi -->
<v-main>
<v-container fluid class="pa-0">
<!-- Di sini, konten halaman akan di-render oleh Nuxt -->
<slot></slot>
</v-container>
</v-main>
@@ -83,7 +76,8 @@
<v-row no-gutters align="center">
<v-col cols="12" md="6">
<span class="text-caption text-grey-darken-2">
RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2 Malang | Telp : 0341- 362101 | Fax : 0341-369384
RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2
Malang | Telp : 0341- 362101 | Fax : 0341-369384
</span>
</v-col>
<v-col cols="12" md="6" class="text-right">
@@ -100,13 +94,12 @@
<script setup>
import { ref, computed } from "vue";
import { useRoute } from 'vue-router';
import AntrianKlinik from "~/pages/Anjungan/AntrianKlinik.vue";
// Data untuk item-item sidebar
const items = ref([
{ title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
{
title: "Setting",
icon: "mdi-cog",
{ title: "Setting", icon: "mdi-cog",
children: [
{ title: "Hak Akses", to: "/setting/hak-akses" },
{ title: "User Login", to: "/setting/user-login" },
@@ -120,10 +113,15 @@ const items = ref([
{ title: "Ranap Admin", icon: "mdi-bed", to: "/ranap-admin" },
{ title: "Klinik Admin", icon: "mdi-hospital-box", to: "/klinik-admin" },
{ title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/klinik-ruang-admin" },
{ title: "Anjungan", icon: "mdi-account-box-multiple", to: "/anjungan" },
{ title: "Anjungan", icon: "mdi-account-box-multiple",
children: [
{ title: "Anjungan", to: "/anjungan/anjungan" },
{ title: "Klinik Ruang", to: "/anjungan/AntrianKlinik"},
],
},
{ title: "Fast Track", icon: "mdi-clock-fast", to: "/fast-track" },
{ title: "Data Pasien", icon: "mdi-account-multiple", to: "/data-pasien" },
{ title: "Screen", icon: "mdi-monitor", to: "/screen" },
{ title: "Screen", icon: "mdi-monitor", to: "/setting/screen" },
{ title: "List Pasien", icon: "mdi-format-list-bulleted", to: "/list-pasien" },
]);
@@ -155,4 +153,4 @@ const currentActiveMenu = computed(() => {
background-color: #ffffff;
color: #000000 !important;
}
</style>
</style>
pages/Anjungan/Anjungan.vue
+4 -4
View File
@@ -23,7 +23,7 @@
</div>
<!-- Controls Section -->
<v-card class="controls-card mb-4" elevation="2">
<!-- <v-card class="controls-card mb-4" elevation="2">
<v-card-text class="py-3">
<v-row align="center">
<v-col cols="12" md="6">
@@ -67,14 +67,14 @@
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-card> -->
<!-- Clinic Cards -->
<v-card elevation="2" class="main-content-card">
<v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
<!-- <v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
<v-icon class="mr-2">mdi-hospital-marker</v-icon>
<span>Daftar Klinik - {{ filteredClinics.length }} dari {{ totalClinics }} klinik</span>
</v-card-title>
</v-card-title> -->
<v-card-text class="pa-6">
<v-row>
pages/Screen/AntrianKlinik.vue → pages/Anjungan/AntrianKlinik.vue
+5 -5
View File
@@ -210,30 +210,30 @@
<v-card-text class="pa-4">
<v-row>
<v-col cols="6" md="3" class="text-center">
<v-col cols="8" md="4" class="text-center">
<div class="stat-item">
<div class="stat-number text-primary">{{ statistics.total }}</div>
<div class="stat-label">Total Antrian</div>
</div>
</v-col>
<v-col cols="6" md="3" class="text-center">
<v-col cols="8" md="4" class="text-center">
<div class="stat-item">
<div class="stat-number text-success">{{ statistics.completed }}</div>
<div class="stat-label">Selesai</div>
</div>
</v-col>
<v-col cols="6" md="3" class="text-center">
<v-col cols="8" md="4" class="text-center">
<div class="stat-item">
<div class="stat-number text-warning">{{ statistics.waiting }}</div>
<div class="stat-label">Menunggu</div>
</div>
</v-col>
<v-col cols="6" md="3" class="text-center">
<!-- <v-col cols="6" md="3" class="text-center">
<div class="stat-item">
<div class="stat-number text-error">{{ statistics.avgWaitTime }}</div>
<div class="stat-label">Rata-rata Tunggu (menit)</div>
</div>
</v-col>
</v-col> -->
</v-row>
</v-card-text>
</v-card>
pages/Fast-Track.vue
+2 -2
View File
@@ -22,7 +22,7 @@
<v-icon start>{{ isLiveMode ? 'mdi-circle' : 'mdi-circle-outline' }}</v-icon>
{{ isLiveMode ? 'Live Mode' : 'Offline Mode' }}
</v-chip> -->
<v-btn
<!-- <v-btn
color="white"
variant="flat"
prepend-icon="mdi-qrcode-scan"
@@ -30,7 +30,7 @@
class="text-primary"
>
Scan Barcode
</v-btn>
</v-btn> -->
</div>
</div>
</div>
pages/Loket-Admin.vue
+6 -6
View File
@@ -139,9 +139,12 @@
height="8"
rounded
></v-progress-linear>
<v-card-text class="call-controls-card align-center py-4">
<div> <span class="text-subtitle-1 font-weight-medium"
>Panggil Pasien:</span> </div>
</div>
</v-card-text>
</v-card>
<v-card-text class="call-controls-card align-center py-4">
<div class="text-subtitle-1 font-weight-medium"
>Panggil Pasien:</div>
<div class="d-flex align-center flex-wrap mb-3">
<v-btn
color="success"
@@ -181,9 +184,6 @@
</v-btn>
</div>
</v-card-text>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
pages/Setting/Master-Loket.vue
+116 -21
View File
@@ -1,18 +1,40 @@
<template>
<v-container>
<v-card>
<v-card-title class="d-flex justify-space-between align-center">
<!-- <v-card-title class="d-flex justify-space-between align-center">
<span>Master Loket</span>
<v-btn color=#ff9248 @click="tambahLoket" style="color:white;">Tambah Baru</v-btn>
</v-card-title>
</v-card-title> -->
<div class="page-header">
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-view-dashboard</v-icon>
</div>
<div class="header-text">
<h1 class="page-title">Master Loket</h1>
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
</div>
</div>
</div>
</div>
<TabelData
:headers="loketHeaders"
:items="loketData"
title="Master Loket"
>
<template #actions="{ item }">
<v-btn small color=#ff9248 @click="editLoket(item)" class="mr-2" style="color:white;">Edit</v-btn>
<v-btn small color="grey-lighten-4" @click="deleteLoket(item)">Delete</v-btn>
<v-btn
small
color="#ff9248"
@click="editLoket(item)"
class="mr-2"
style="color: white"
>Edit</v-btn
>
<v-btn small color="grey-lighten-4" @click="deleteLoket(item)"
>Delete</v-btn
>
</template>
</TabelData>
</v-card>
@@ -20,28 +42,60 @@
</template>
<script setup>
import { ref } from 'vue';
import TabelData from '../../components/TabelData.vue';
import { useRouter } from 'vue-router';
import { ref } from "vue";
import TabelData from "../../components/TabelData.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const loketHeaders = ref([
{ title: 'No', value: 'no' },
{ title: 'Nama Loket', value: 'namaLoket' },
{ title: 'Kuota', value: 'kuota' },
{ title: 'Pelayanan', value: 'pelayanan' },
{ title: 'Pembayaran', value: 'pembayaran' },
{ title: 'Keterangan', value: 'keterangan' },
{ title: 'Aksi', value: 'aksi', sortable: false }, // 'value' harus 'actions'
{ title: "No", value: "no" },
{ title: "Nama Loket", value: "namaLoket" },
{ title: "Kuota", value: "kuota" },
{ title: "Pelayanan", value: "pelayanan" },
{ title: "Pembayaran", value: "pembayaran" },
{ title: "Keterangan", value: "keterangan" },
{ title: "Aksi", value: "aksi", sortable: false }, // 'value' harus 'actions'
]);
// Master-Loket.vue
const loketData = ref([
{ id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{
id: 1,
no: 1,
namaLoket: "Loket 1",
kuota: 500,
pelayanan: ["RADIOTERAPI", "REHAB MEDIK", "TINDAKAN"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
{
id: 2,
no: 2,
namaLoket: "Loket 2",
kuota: 666,
pelayanan: ["JIWA", "SARAF"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
{
id: 3,
no: 3,
namaLoket: "Loket 3",
kuota: 666,
pelayanan: ["ANESTESI", "JANTUNG"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
{
id: 4,
no: 4,
namaLoket: "Loket 4",
kuota: 3676,
pelayanan: ["KULIT KELAMIN", "PARU"],
pembayaran: "JKN",
keterangan: "ONLINE",
},
]);
const editLoket = (item) => {
@@ -49,13 +103,54 @@ const editLoket = (item) => {
};
const deleteLoket = (item) => {
const index = loketData.value.findIndex(loket => loket.id === item.id);
const index = loketData.value.findIndex((loket) => loket.id === item.id);
if (index !== -1) {
loketData.value.splice(index, 1);
}
};
const tambahLoket = () => {
router.push({ path: '/Setting/Tambah-Loket' });
router.push({ path: "/Setting/Tambah-Loket" });
};
</script>
</script>
<style scoped>
.page-header {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
border-radius: 16px;
margin-bottom: 24px;
box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px;
color: white;
}
.header-left {
display: flex;
align-items: center;
}
.header-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 16px;
margin-right: 20px;
backdrop-filter: blur(10px);
}
.page-title {
font-size: 32px;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-subtitle {
margin: 4px 0 0 0;
opacity: 0.9;
font-size: 16px;
}
</style>
pages/Setting/Screen/edit/[id].vue
+1 -1
View File
@@ -190,7 +190,7 @@ onMounted(() => {
.screen-card.active {
border-color: #1976d2;
background-color: #f3f7ff;
background-color: #d4d4d4;
}
.screen-card .v-card-title {
pages/Setting/Screen/index.vue
+128 -27
View File
@@ -1,7 +1,28 @@
<template>
<div class="screen-list">
<!-- Header -->
<div class="d-flex justify-space-between align-center mb-4">
<div class="page-header">
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-monitor</v-icon>
</div>
<div class="header-text">
<h1 class="page-title">Screen</h1>
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
</div>
</div>
<div class="header-right">
<!-- <v-chip color="success" variant="flat" class="mr-2">
Total {{ totalPasien }} Pasien
</v-chip> -->
<v-chip color="white" variant="flat" class="text-primary" to="/Setting/screen/edit/1">
Edit Screen
</v-chip>
</div>
</div>
</div>
<!-- <div class="d-flex justify-space-between align-center mb-4">
<h2>Screen</h2>
<div class="d-flex gap-2">
<v-btn color="primary" variant="outlined" prepend-icon="mdi-eye">
@@ -11,7 +32,7 @@
Edit
</v-btn>
</div>
</div>
</div> -->
<!-- Controls -->
<div class="d-flex justify-space-between align-center mb-4">
@@ -22,11 +43,11 @@
:items="[10, 25, 50, 100]"
density="compact"
variant="outlined"
style="width: 80px;"
style="width: 80px"
></v-select>
<span>entries</span>
</div>
<div class="d-flex align-center gap-2">
<span>Search:</span>
<v-text-field
@@ -34,7 +55,7 @@
density="compact"
variant="outlined"
hide-details
style="width: 200px;"
style="width: 200px"
></v-text-field>
</div>
</div>
@@ -50,7 +71,7 @@
<template v-slot:item.no="{ index }">
{{ index + 1 }}
</template>
<template v-slot:item.klinik="{ item }">
<div class="klinik-tags">
<v-chip
@@ -70,9 +91,9 @@
<v-btn
icon="mdi-pencil"
size="small"
color=#ff9248
color="#ff9248"
@click="editScreen(item)"
style="color:white;"
style="color: white"
></v-btn>
</template>
</v-data-table>
@@ -80,9 +101,10 @@
<!-- Footer -->
<div class="d-flex justify-space-between align-center mt-4">
<div>
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
Showing {{ currentPageStart }} to {{ currentPageEnd }} of
{{ totalItems }} entries
</div>
<v-pagination
v-model="currentPage"
:length="totalPages"
@@ -93,43 +115,75 @@
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, computed } from "vue";
// Data
const search = ref('');
const search = ref("");
const itemsPerPage = ref(10);
const currentPage = ref(1);
const headers = [
{ title: 'No', key: 'no', sortable: false, width: '60px' },
{ title: 'Nama Screen', key: 'nama_screen', sortable: true },
{ title: 'Klinik', key: 'klinik', sortable: false },
{ title: 'Actions', key: 'actions', sortable: false, width: '100px' }
{ title: "No", key: "no", sortable: false, width: "60px" },
{ title: "Nama Screen", key: "nama_screen", sortable: true },
{ title: "Klinik", key: "klinik", sortable: false },
{ title: "Actions", key: "actions", sortable: false, width: "100px" },
];
const screenItems = ref([
{
id: 1,
nama_screen: 'Layar Screen 1',
klinik: ['ANAK', 'ANESTESI', 'BEDAH', 'GIGI DAN MULUT', 'GERIATRI', 'GIZI', 'IPD', 'JANTUNG']
nama_screen: "Layar Screen 1",
klinik: [
"ANAK",
"ANESTESI",
"BEDAH",
"GIGI DAN MULUT",
"GERIATRI",
"GIZI",
"IPD",
"JANTUNG",
],
},
{
id: 2,
nama_screen: 'Layar Screen 2',
klinik: ['JIWA', 'KUL KEL', 'KOMPLEMENTER', 'MATA', 'SARAF', 'KANDUNGAN', 'ONKOLOGI', 'PARU']
nama_screen: "Layar Screen 2",
klinik: [
"JIWA",
"KUL KEL",
"KOMPLEMENTER",
"MATA",
"SARAF",
"KANDUNGAN",
"ONKOLOGI",
"PARU",
],
},
{
id: 3,
nama_screen: 'Layar Screen 3',
klinik: ['RADIOTERAPI', 'REHAB MEDIK', 'THT', 'MCU', 'KEMOTERAPI', 'R. TINDAKAN', 'HOM']
}
nama_screen: "Layar Screen 3",
klinik: [
"RADIOTERAPI",
"REHAB MEDIK",
"THT",
"MCU",
"KEMOTERAPI",
"R. TINDAKAN",
"HOM",
],
},
]);
// Computed
const totalItems = computed(() => screenItems.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
const totalPages = computed(() =>
Math.ceil(totalItems.value / itemsPerPage.value)
);
const currentPageStart = computed(
() => (currentPage.value - 1) * itemsPerPage.value + 1
);
const currentPageEnd = computed(() =>
Math.min(currentPage.value * itemsPerPage.value, totalItems.value)
);
// Methods
const editScreen = (item) => {
@@ -138,6 +192,53 @@ const editScreen = (item) => {
</script>
<style scoped>
.page-header {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
border-radius: 16px;
margin-bottom: 24px;
box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px;
color: white;
}
.header-left {
display: flex;
align-items: center;
}
.header-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 16px;
margin-right: 20px;
backdrop-filter: blur(10px);
}
.page-title {
font-size: 32px;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-subtitle {
margin: 4px 0 0 0;
opacity: 0.9;
font-size: 16px;
}
.header-right {
display: flex;
align-items: center;
}
.screen-list {
padding: 20px;
}
@@ -149,4 +250,4 @@ const editScreen = (item) => {
.gap-2 {
gap: 8px;
}
</style>
</style>
pages/data-pasien/edit/[id].vue
+1 -1
View File
@@ -230,7 +230,7 @@ const mockPasienData = {
no_rekammedik: '11555500',
klinik: 'IPD',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: 'FINGATMANA ONLINE',
keterangan: 'PENDAFTARAN ONLINE',
pembayaran: 'JKN'
},
2: {
pages/data-pasien/index.vue
+1 -1
View File
@@ -271,7 +271,7 @@ const pasienItems = ref([
no_rekammedik: "11555500",
klinik: "IPD",
shift: "Shift 1 = Mulai Pukul 07:00",
keterangan: "FINGATMANA ONLINE",
keterangan: "PENDAFTARAN ONLINE",
pembayaran: "JKN",
},
},
pages/index.vue
+81 -7
View File
@@ -1,6 +1,18 @@
<template>
<v-container fluid class="bg-grey-lighten-4 pa-4">
<p class="mb-4">Admin Anjungan</p>
<div class="page-header">
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-view-dashboard</v-icon>
</div>
<div class="header-text">
<h1 class="page-title">Admin Anjungan</h1>
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
</div>
</div>
</div>
</div>
<v-card flat>
<v-card-text>
<v-row align="center">
@@ -20,7 +32,9 @@
</v-chip>
</v-col>
<v-col cols="12" md="2">
<v-btn block color=#ff9248 style="color:white;">Pendaftaran Online</v-btn>
<v-btn block color="#ff9248" style="color: white"
>Pendaftaran Online</v-btn
>
</v-col>
</v-row>
</v-card-text>
@@ -42,15 +56,27 @@
>
<template v-slot:actions="{ item }">
<div class="d-flex ga-1">
<v-btn small color=#ff9248 class="d-flex flex-row" variant="flat" style="color:white;">PASIEN</v-btn>
<v-btn small color="grey-lighten-3" class="d-flex flex-row" variant="flat"
<v-btn
small
color="#ff9248"
class="d-flex flex-row"
variant="flat"
style="color: white"
>PASIEN</v-btn
>
<v-btn
small
color="grey-lighten-3"
class="d-flex flex-row"
variant="flat"
>PENGANTAR</v-btn
>
<v-btn small color="info" class="d-flex flex-row" variant="flat">ByPass</v-btn>
<v-btn small color="info" class="d-flex flex-row" variant="flat"
>ByPass</v-btn
>
</div>
</template>
</TabelData>
</v-card>
</v-container>
</template>
@@ -165,4 +191,52 @@ const items = ref([
{ title: "Screen", icon: "mdi-monitor" },
{ title: "List Pasien", icon: "mdi-format-list-bulleted" },
]);
</script>
</script>
<style scoped>
.page-header {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
border-radius: 16px;
margin-bottom: 24px;
box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px;
color: white;
}
.header-left {
display: flex;
align-items: center;
}
.header-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 16px;
margin-right: 20px;
backdrop-filter: blur(10px);
}
.page-title {
font-size: 32px;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-subtitle {
margin: 4px 0 0 0;
opacity: 0.9;
font-size: 16px;
}
.header-right {
display: flex;
align-items: center;
}
</style>