aula-virtual page

components/CardTool.vue

@@ -22,20 +22,15 @@
         />
         <!-- <img v-else src="" alt="imagen-error"> -->
         <!-- TODO: Add a fallback image -->
-         <p 
-          v-if="index"
-          class="w-full h-full rounded-full text-2xl font-bold"
-        >{{ index }}</p>
       </div>
       <div class="flex flex-col gap-4 items-center">
         <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
         <p class="text-center text-base" v-html="description"></p>
       </div>
     </NuxtLink>
-    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
-      <div class="h-25 w-25">
+    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center w-full">
+      <div v-if="image" class="h-25 w-25">
         <img 
-          v-if="image"
           :src="`/img/${image.src}`"
           :alt="image.alt"
           class="w-full h-full object-cover"
@@ -43,6 +38,10 @@
         <!-- <img v-else src="" alt="imagen-error"> -->
         <!-- TODO: Add a fallback image -->
       </div>
+      <div v-if="number" class="h-15 w-15">
+        <h3 class="w-full h-full rounded-full border font-bold flex items-center justify-center">
+        {{ number }}</h3>
+      </div>
       <div class="flex flex-col gap-4 items-center text-center">
         <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
         <p class="text-center text-base" v-html="description"></p>
@@ -68,12 +67,9 @@ export default {
     },
     image: {
         type: Object,
-        default: () => ({
-          src: "",
-          alt: "",
-        }),
+        default: null,
     },
-    index: {
+    number: {
         type: String,
         default: null
     },