Steps

components/registro/CapturaDatos.vue

@@ -35,6 +35,34 @@
           >
           </b-datepicker>
         </b-field>
+
+        <b-field>
+          <b-upload v-model="dropFiles" multiple drag-drop expanded>
+            <section class="section">
+              <div class="content has-text-centered">
+                <p>
+                  <b-icon icon="upload" size="is-large"> </b-icon>
+                </p>
+                <p>Adjunta foto de tu ticket</p>
+              </div>
+            </section>
+          </b-upload>
+        </b-field>
+
+        <div class="tags">
+          <span
+            v-for="(file, index) in dropFiles"
+            :key="index"
+            class="tag is-primary"
+          >
+            {{ file.name }}
+            <button
+              class="delete is-small"
+              type="button"
+              @click="deleteDropFile(index)"
+            ></button>
+          </span>
+        </div>
       </div>
 
       <b-image
@@ -55,12 +83,17 @@ export default {
       selected: new Date(),
       showWeekNumber: false,
       locale: undefined, // Browser locale
+
+      dropFiles: [],
     }
   },
   methods: {
     clearDate() {
       this.selected = null
     },
+    deleteDropFile(index) {
+      this.dropFiles.splice(index, 1)
+    },
   },
 }
 </script>

components/registro/DatosUsuario.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="columns">
-    <div class="column box">
+    <div class="column box mr-5">
       <p>Cuenta: {{ datosUsuario.numeroCuenta }}</p>
       <p>Nombre: {{ datosUsuario.nombre }}</p>
       <p>Correo: {{ datosUsuario.numeroCuenta }}@pcpuma.unam.acatlan.mx</p>
       <p>Carrera: {{ datosUsuario.carrera }}</p>
     </div>
 
-    <div class="column box">
-      <b-table :data="data" :columns="columns"></b-table>
-    </div>
+    <b-table class="column box tabla" :data="data" :columns="columns"></b-table>
   </div>
 </template>
 
@@ -29,6 +27,11 @@ export default {
           tiempo: 3600,
           status: 'Si',
         },
+        {
+          inscrito: 'Windows',
+          tiempo: 3600,
+          status: 'Si',
+        },
       ],
       columns: [
         {
@@ -49,4 +52,10 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.table,
+.table td {
+  padding: 0.2em;
+  text-align: center;
+}
+</style>

package-lock.json

@@ -3361,9 +3361,13 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001214",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz",
-      "integrity": "sha512-O2/SCpuaU3eASWVaesQirZv1MSjUNOvmugaD8zNSJqw6Vv5SGwoOpA9LJs3pNPfM745nxqPvfZY3MQKY4AKHYg=="
+      "version": "1.0.30001299",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
+      "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/browserslist"
+      }
     },
     "node_modules/chalk": {
       "version": "2.4.2",
@@ -15539,9 +15543,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001214",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz",
-      "integrity": "sha512-O2/SCpuaU3eASWVaesQirZv1MSjUNOvmugaD8zNSJqw6Vv5SGwoOpA9LJs3pNPfM745nxqPvfZY3MQKY4AKHYg=="
+      "version": "1.0.30001299",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
+      "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw=="
     },
     "chalk": {
       "version": "2.4.2",

pages/registro/index.vue

@@ -1,7 +1,44 @@
 <template>
   <div class="container">
     <p class="title is-2">Instrucciones</p>
-    <div>Aqui van las instrucciones</div>
+
+    <b-steps
+      v-model="activeStep"
+      :animated="isAnimated"
+      :rounded="isRounded"
+      :has-navigation="hasNavigation"
+    >
+      <b-step-item
+        step="1"
+        label="Registro"
+        type="is-success"
+        :clickable="isStepsClickable"
+      >
+        <h1 class="title has-text-centered">Registro</h1>
+        Selecciona el área y captura la información de tu ticket.
+      </b-step-item>
+
+      <b-step-item
+        step="2"
+        label="Confirmación"
+        type="is-success"
+        :clickable="isStepsClickable"
+      >
+        <h1 class="title has-text-centered">Confirmación</h1>
+        Ingresa a Kalinga.com para confirmar tu registro.
+      </b-step-item>
+
+      <b-step-item
+        step="3"
+        label="Terminado"
+        type="is-success"
+        :clickable="isStepsClickable"
+      >
+        <h1 class="title has-text-centered">Terminado</h1>
+        Listo ahora puedes hacer uso de las instalaciones de CEDETEC.
+      </b-step-item>
+    </b-steps>
+
     <p class="title is-2">Registro</p>
     <DatosUsuario />
 
@@ -18,6 +55,14 @@ export default {
     DatosUsuario,
     CapturaDatos,
   },
+  data() {
+    return {
+      activeStep: 2,
+
+      hasNavigation: false,
+      isStepsClickable: false,
+    }
+  },
 }
 </script>