Reacomodo del crud

components/registro/CapturaDatos.vue

@@ -1,12 +1,48 @@
 <template>
   <div>
-    <p class="subtitle is-3">Seleccione el área</p>
+    <p class="subtitle is-4"><b>Seleccione el área.</b></p>
 
     <div class="block">
       <b-radio v-model="area" native-value="1">Windows</b-radio>
       <b-radio v-model="area" native-value="2">Macintosh</b-radio>
       <b-radio v-model="area" native-value="3">Linux</b-radio>
     </div>
+
+    <p class="subtitle is-4">
+      <b
+        >Captura la siguiente información la cual se muestra en tu ticket de
+        CEDETEC entregado en cajas.</b
+      >
+    </p>
+
+    <p class="subtitle is-5">Recuerda que la aportación es voluntaria</p>
+
+    <div class="columns">
+      <div class="column pr-5">
+        <b-field label="Folio"> <b-input type="text"></b-input> </b-field>
+        <b-field label="Monto"> <b-input type="text"></b-input> </b-field>
+        <b-field label="Fecha">
+          <b-datepicker
+            v-model="selected"
+            :show-week-number="showWeekNumber"
+            :locale="locale"
+            placeholder="Click to select..."
+            icon="calendar-today"
+            :icon-right="selected ? 'close-circle' : ''"
+            icon-right-clickable
+            @icon-right-click="clearDate"
+            trap-focus
+          >
+          </b-datepicker>
+        </b-field>
+      </div>
+
+      <b-image
+        class="column pl-5"
+        :src="require('@/assets/ticket.png')"
+        alt="The Buefy Logo"
+      ></b-image>
+    </div>
   </div>
 </template>
 
@@ -15,8 +51,17 @@ export default {
   data() {
     return {
       area: '',
+
+      selected: new Date(),
+      showWeekNumber: false,
+      locale: undefined, // Browser locale
     }
   },
+  methods: {
+    clearDate() {
+      this.selected = null
+    },
+  },
 }
 </script>