<div class="divMaster row mb-5"> <div class="col-10 offset-1 d-flex flex-wrap justify-content-center"> <div class="card m-3" style="width: 12rem;" v-bind:key="libro.id" v-for="libro in Libros" @click="descripcion(libro.id)" > <div class="textt"> <img :src="libro.img" class="card-img-top rounded" alt="libro" /> <div class="card-body cd textt"> <p class="card-text textt"> {{ libro.title }} </p> </div> </div> </div> </div> </div> </div> </template> <script> import axios from "axios"; import config from "../config/config.js"; import Title from "../components/titulo.vue"; export default { components: { Title }, data() { return { idLibro: "", titulo: "", autor: "", paginas: "", isbn: "", edicion: "", precio: "", src: "", version: "", desc: ``, boton2: "", categoria: "", Libros: [] }; }, methods: { async descripcion(idLibro) { localStorage.clear(); window.localStorage.setItem("idLibro", idLibro); location.reload(); } }, async created() { let path = `${config.api}`; try { this.idLibro = window.localStorage.getItem("idLibro"); let detalle = await axios.get( `${config.api}/libroDetalle?idLibro=${this.idLibro}` ); detalle = await detalle.data.datos; this.titulo = detalle.titulo; this.autor = detalle.autor; this.paginas = detalle.paginas; this.isbn = detalle.isbn; this.edicion = detalle.impresion; this.precio = detalle.precio; this.version = detalle.version; this.desc = detalle.descripcion; this.categoria = detalle.categoria; if (detalle.precio !== "Gratis") this.boton2 = "Comprar"; else this.boton2 = "Descargar"; } catch (error) { console.log(error); } this.idLibro = 1; try { let config = { // example url url: `${path}/libroImagen?idLibro=${this.idLibro}`, method: "GET", responseType: "blob" }; await axios(config).then(response => { let reader = new FileReader(); reader.readAsDataURL(response.data); reader.onload = () => { this.src = reader.result; }; }); } catch (error) { console.log(error); } try { let similares = await axios.get( `${config.api}/librosSimilares?categoria=${this.categoria}` ); similares = similares.data.data; console.log(`${similares}`); for (let i = 0; i < similares.length; i++) { let config = { // example url url: `${path}/libroImagen?idLibro=${i + 2}`, method: "GET", responseType: "blob" }; await axios(config).then(response => { let reader = new FileReader(); reader.readAsDataURL(response.data); reader.onload = () => { this.Libros.push({ id: similares[i].idLibro, title: similares[i].titulo, img: reader.result }); //this.Libros[i].img = reader.result; }; }); } } catch (error) { console.log(`Ocurrio un error ${error}`); } } }; </script> <style scoped> .divMaster { height: auto; } .card { border: none !important; border-bottom: 5px solid #1b3d70 !important; } a { text-decoration: none !important; color: black; } .img { margin-left: 1rem; margin-top: 1rem; } .izq { display: flex; justify-content: flex-start; } .button { background-color: rgb(187, 136, 0); border: none; color: white; height: 4.5rem; width: 15rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1.5rem; border-radius: 1rem; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-top: 2rem; } .button:hover { background-color: #46c200; color: white; } .pre { background-color: #1e3c70; } .pre:hover { background-color: rgb(187, 136, 0); } .titulo { font-size: 1rem; text-align: left; color: balck; } p { margin-bottom: 0.5rem; } .libro { width: 320px; height: 480px; margin-right: auto; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57); } @media (max-width: 450px) { .libro { width: 270px; height: 380px; margin-right: auto; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57); } .button { text-align: center; margin-top: 3rem; } } @media screen and (max-width: 380px) { .button { text-align: center; margin-top: 3rem; } } </style>