home responsivo terminado

This commit is contained in:
2020-08-14 01:25:28 -05:00
parent f2e6840ffa
commit 6863cf7306
7 changed files with 86 additions and 153 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="shortcut icon" type="image/png" href="assets/icono.png">
<title>Portal Editorial Acatlán</title>
</head>
<body>
<noscript>
+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 });
};
});
}
+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>
+1 -2
View File
@@ -7,6 +7,5 @@ export const routes = [
{ path: "/", component: home, name: "form" },
{ path: "/login", component: login, name: "Login" },
{ path: "/desc", component: libroDescripcion, name: "LibroDesc" },
{ path: "/difusion", component: difusion, name: "difusion" },
{ path: "/difusion", component: difusion, name: "difusion" }
];
+47 -30
View File
@@ -1,42 +1,59 @@
<template>
<div>
<Header></Header>
<h1 class="my-5">Inicia Sesion</h1>
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-8 col-lg-6 col-xl-6">
<form class="row d-flex justify-content-center">
<input type="text" v-model="data.email" id="login" class="form-control col-8" name="login" placeholder="Usuario">
<input type="password" v-model="data.password" id="password" class="form-control col-8 my-3" name="login" placeholder="Contraseña">
<input type="button" @click="login" class="btn bg-primary text-white col-5" value="Ingresar">
</form>
</div>
</div>
<Header></Header>
<h1 class="my-5">Inicia Sesion</h1>
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-8 col-lg-6 col-xl-6">
<form class="row d-flex justify-content-center">
<input
type="text"
v-model="data.email"
id="login"
class="form-control col-8"
name="login"
placeholder="Usuario"
/>
<input
type="password"
v-model="data.password"
id="password"
class="form-control col-8 my-3"
name="login"
placeholder="Contraseña"
/>
<input
type="button"
@click="login"
class="btn bg-primary text-white col-5"
value="Ingresar"
/>
</form>
</div>
</div>
</div>
</template>
<script>
import Header from "./../components/header.vue";
export default {
data(){
return{
data:{
email:'',
password:''
}}
},
methods:{
login(){
alert(this.data.email)
}
},
components: {
Header
data() {
return {
data: {
email: "",
password: ""
}
};
},
methods: {
login() {
alert(this.data.email);
}
}
},
components: {
Header
}
};
</script>
<style>
</style>
<style></style>