58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<v-card class="bg-transparent" :class="isMobile ? '' : 'auth-card pa-4'" color="transparent" elevation="0">
|
|
<v-card-text class="text-center">
|
|
<v-avatar color="#e0f2f1" size="120" class="mb-4">
|
|
<span class="text-h5 text-green-darken-2">{{ getInitials() }}</span>
|
|
</v-avatar>
|
|
<h2 class="text-h5 font-weight-bold mb-2">Dr. {{ doctorName }}, <span>{{ doctorSpecialty }}</span></h2>
|
|
<!-- <p class="text-body-1 mb-4">{{ doctorSpecialty }}</p> -->
|
|
<p class="text-body-2 text-grey-darken-1">
|
|
Dr. {{ doctorName }} is a dedicated medical professional with
|
|
extensive experience in {{ doctorSpecialty.toLowerCase() }}. Known for his patient-
|
|
centered approach, he strives to provide personalized care and
|
|
ensure the best outcomes for his patients. Dr. {{ lastName }} stays at the
|
|
forefront of medical advancements to offer the highest quality
|
|
treatment.
|
|
</p>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
|
|
const doctorName = ref('Jonathan Hines');
|
|
const doctorSpecialty = ref('MD');
|
|
|
|
const lastName = computed(() => {
|
|
return doctorName.value.split(' ').pop();
|
|
});
|
|
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
|
|
const getInitials = () => {
|
|
return doctorName.value
|
|
.split(' ')
|
|
.map(name => name[0])
|
|
.join('');
|
|
};
|
|
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
|
|
onMounted(() => {
|
|
checkIfMobile();
|
|
window.addEventListener('resize', checkIfMobile);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', checkIfMobile);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-card {
|
|
background-color: #f5f5f5 !important;
|
|
}
|
|
</style> |