Zoom al ticket

components/admin/ticket.vue

@@ -1,12 +1,28 @@
 <template>
   <div class="columns">
-    <div class="column py-5">
-      <b-image
-        class="img"
-        :src="this.urlTicket"
-        alt="Imagen del ticket"
-      ></b-image>
+    <div class="column is-one-third py-5">
+      <figure class="containerImg">
+        <b-image class="img" :src="urlTicket" alt="Imagen del ticket">
+        </b-image>
+        <div class="overlay" @click="isImageModalActive = true">
+          <b-icon
+            class="icon"
+            icon="magnify-plus"
+            size="is-small"
+            type="is-black"
+          />
+        </div>
+      </figure>
     </div>
+
+    <b-modal v-model="isImageModalActive">
+      <p class="image">
+        <img :src="urlTicket" />
+      </p>
+    </b-modal>
+
+    <div class="column is-1"></div>
+
     <div class="column mt-6">
       <p>
         Administrador por favor revisa que todos los datos sean correctos, en
@@ -66,18 +82,22 @@ export default {
     return {
       token: '',
 
+      isImageModalActive: false,
       urlTicket: '',
       validado: null,
     }
   },
   methods: {
     traerTicket() {
+      this.updateIsLoading(true)
       axios
         .get(`${process.env.api}/admin/ticket?folio=${this.$route.query.folio}`)
         .then((res) => {
+          this.updateIsLoading(false)
           this.urlTicket = res.config.url
         })
         .catch((err) => {
+          this.updateIsLoading(false)
           this.imprimirError(err.response.data)
         })
     },
@@ -127,4 +147,35 @@ export default {
   width: 350px;
   padding-bottom: 470px;
 }
+
+.overlay {
+  position: absolute;
+  top: 4%;
+  bottom: 0;
+  left: 0;
+  right: 40%;
+  height: 470px;
+  width: 350px;
+  opacity: 0;
+  transition: 0.5s ease;
+  background-color: white;
+}
+
+/* When you mouse over the container, fade in the overlay icon*/
+.containerImg:hover .overlay {
+  opacity: 0.3;
+}
+
+/* The icon inside the overlay is positioned in the middle vertically and horizontally */
+.icon {
+  color: black;
+  font-size: 100px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 2;
+}
 </style>