Untitled
unknown
plain_text
a month ago
2.3 kB
1
Indexable
Never
<script setup> import { ref } from "vue"; import HideIcon from "./icons/HideIcon.vue"; const hbData = ref([]); const hbName = ref([ "Haemoglobin", "PCV", "Total WBC Count", "Total RBC Count", "Neutrophils", "Lymphocytes", "Monocytes", "Eosinophils", "Basophil", "Platelets Count", "MCV", "MCH", "MCHC", "ESR", "AEC (Absolute Eosinophils Count)", "Blood Group & RH", ]); const hbUnit = ref([ "g/dL", "%", "cells/cmm", "x10^6/uL", "%", "%", "%", "%", "%", "/cmm", "fL", "Pg", "g/dL", "mm/hr", "cells/cu mm", "", ]); const hbRange = ref([ "12-16.5", "34-48%", "4000-11000", "M4.5-6.0, F3.8-5.8 mill", "40-70", "20-45", "01-06", "01-06", "0-1", "150-400", "79-94", "27-32", "32-35", "M 0-15, F 0-20", "40-444", "", ]); let show = ref(false); const toggleHide = () => { show.value = !show.value; }; </script> <template> <main> <div class="mx-auto container"> <div class="mx-4 mt-2 p-2 border border-gray-400"> <div class="flex justify-between"> <h1 class="font-heading tracking-wider text-[15px] text-gray-800"> Haemotology </h1> <HideIcon @click="toggleHide" /> </div> <TransitionExpand> <div class="mx-auto container" v-if="show"> <div class="flex justify-between my-2 items-center"> <ul class="font-body text-xs space-y-3"> <li v-for="name in hbName" :key="name.id"> <p>{{ name }}</p> </li> </ul> <div class="flex flex-col space-y-1"> <div v-for="unit in hbUnit" :key="unit.id"> <input class="input-secondary" type="text" v-model="hbData" /><span class="font-body text-xs"> {{ unit }}</span> </div> </div> <ul class="font-body text-xs space-y-3 pr-64"> <li v-for="range in hbRange" :key="range.id"> <p>{{ range }}</p> </li> </ul> </div> </div> </TransitionExpand> </div> </div> </main> </template> <style scoped></style>
Leave a Comment