47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup>
|
|
import { onBeforeMount, onMounted, ref } from 'vue';
|
|
const steps = ref([
|
|
{
|
|
description:'1) Confirm Shipping details'
|
|
},
|
|
{
|
|
description:'2) Make the payment.'
|
|
},
|
|
{
|
|
description:'3) Schedule your visit.'
|
|
},
|
|
{
|
|
description:'4) Meet with your provider.'
|
|
}
|
|
]);
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
onBeforeMount(async () => {
|
|
})
|
|
onMounted(async () => {
|
|
|
|
window.addEventListener('resize', checkIfMobile);
|
|
});
|
|
</script>
|
|
<template>
|
|
<VCard class="bg-transparent d-flex flex-column justify-center align-center" :class="isMobile ? '' : 'auth-card pa-2 plan-card'" style="min-width: 90%;border: none;box-shadow: none;" color="">
|
|
<v-card-text class="text-center">
|
|
<h4 style="text-decoration: underline;font-weight: 700;">NEXT STEPS</h4>
|
|
<v-list class="bg-transparent text-yellow-theme-button">
|
|
<v-list-item-group>
|
|
<v-list-item v-for="step in steps" :key="step.id">
|
|
<v-list-item-content>
|
|
<v-list-item-title class="text-left">
|
|
{{ step.description }}
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list-item-group>
|
|
</v-list>
|
|
</v-card-text>
|
|
</VCard>
|
|
|
|
</template>
|