slcing registrasi awal

registration/components/form_pemeriksaan.vue

@@ -0,0 +1,71 @@
+<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>