Files
westone-ui/registration/components/form_pemeriksaan.vue
2024-10-31 15:54:41 +07:00

71 lines
2.8 KiB
Vue

<template>
<div>
<v-card class="pa-4 rounded-lg" elevation="0">
<v-toolbar color="amber-lighten-5 rounded-md" density="compact">
<v-toolbar-title class="text-title-1 font-weight-bold">PEMERIKSAAN</v-toolbar-title>
</v-toolbar>
<v-text-field
append-inner-icon="mdi-magnify" hide-details="auto" variant="outlined"
class="my-4" density="compact" label="Pemeriksaan" color="primary"
></v-text-field>
<v-row no-gutters class="mt-2">
<v-col v-for="x in pemeriksaan" cols="6" class="pa-1">
<v-btn block color="primary" variant="tonal" style="justify-content: start;">
{{ x.name }}
</v-btn>
</v-col>
</v-row>
<v-divider class="mt-4 border-opacity-25"></v-divider>
<v-row no-gutters class="mt-4">
<v-col cols="10" align-self="center">
<p class="text-secondary-darken font-weight-medium">Apakah persyaratan dipenuhi?</p>
</v-col>
<v-col cols="2" class="d-flex">
<v-spacer/>
<v-btn color="error" variant="tonal" class="mr-2">
<iconify-icon style="font-size: 1.5rem;" icon="fluent:dismiss-24-regular"></iconify-icon>
</v-btn>
<v-btn color="success" variant="tonal">
<iconify-icon style="font-size: 1.5rem;" icon="fluent:checkmark-24-regular"></iconify-icon>
</v-btn>
</v-col>
</v-row>
<v-row no-gutters class="mt-4">
<v-col class="pa-1" cols="6" v-for="syarat in persyaratan">
<p class="font-weight-medium">{{ syarat.name }}</p>
</v-col>
</v-row>
<v-switch inset color="success" label="Hanya terima sample" class="mt-2"></v-switch>
</v-card>
</div>
</template>
<script>
export default {
name: "formpemeriksaancomp",
components: {},
mounted() {},
data() {
return {
pemeriksaan: [
{ id: 1, name: "SGOT" },
{ id: 2, name: "SGPT" },
{ id: 3, name: "Asam Urat" },
{ id: 4, name: "Panel Creatinin" },
],
persyaratan: [
{ id: 1, name: "Aktifitas Fisik" },
{ id: 2, name: "Hamil" },
{ id: 3, name: "Vitamin C" },
{ id: 4, name: "Alkohol" },
]
}
},
computed: {
},
methods: {
},
}
</script>