danielGe/PortaFront
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

home responsivo terminado

Browse Source
This commit is contained in:
DanielRamirezGe
2020-08-14 01:25:28 -05:00
parent f2e6840ffa
commit 6863cf7306
7 changed files with 86 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/carrusel.vue
+3 -33
View File
@@ -7,27 +7,13 @@
>
<div class="carousel-inner">
<div
class="carousel-item "
class="carousel-item"
v-bind:key="libro.id"
v-for="(libro, idx) in Libros"
:class="{ active: idx == 0 }"
>
<img :src="libro.img" class="d-block w-100 img-fluid" alt="img" />
</div>
<!-- <div class="carousel-item">
<img
src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
class="d-block w-100 img-fluid"
alt="img"
/>
</div>
<div class="carousel-item">
<img
src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
class="d-block w-100 img-fluid"
alt="img"
/>
</div> -->
</div>
<a
class="carousel-control-prev"
@@ -58,23 +44,7 @@ import config from "../config/config.js";
export default {
data() {
return {
Libros: [
{
id: 0,
img:
"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
},
{
id: 1,
img:
"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
},
{
id: 2,
img:
"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
}
]
Libros: []
};
},
async created() {
@@ -93,7 +63,7 @@ export default {
let reader = new FileReader();
reader.readAsDataURL(response.data);
reader.onload = () => {
this.imagenes.push({ id: i, img: reader.result });
this.Libros.push({ id: i, img: reader.result });
};
});
}
src/components/cartLibro.vue
+33 -86
View File
@@ -21,96 +21,43 @@
</template>
<script>
import axios from "axios";
import config from "../config/config.js";
export default {
data() {
return {
Libros: [
{
id: 0,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 0,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
},
{
id: 1,
title:
"Some quick example text to build on the card title and make up the bulk of the cards content.",
img:
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
}
]
Libros: []
};
},
async created() {
try {
let novedades = await axios.get(`${config.api}/librosNovedades`);
novedades = novedades.data.data;
console.log(`${novedades}`);
for (let i = 0; i < novedades.length; i++) {
//alert(novedades[i].titulo);
//this.Libros[i].title = novedades[i].titulo;
let config = {
// example url
url: `http://localhost:3000/libroImagen?idLibro=${(i % 3) + 1}`,
method: "GET",
responseType: "blob"
};
await axios(config).then(response => {
let reader = new FileReader();
reader.readAsDataURL(response.data);
reader.onload = () => {
this.Libros.push({
id: i,
title: novedades[i].titulo,
img: reader.result
});
};
});
}
} catch (error) {
console.log(`Ocurrio un error ${error}`);
}
}
};
</script>