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
public/assets/icono.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

public/assets/icono.svg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

public/index.html
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="shortcut icon" type="image/png" href="assets/icono.png">
<title><%= htmlWebpackPlugin.options.title %></title> <title>Portal Editorial Acatlán</title>
</head> </head>
<body> <body>
<noscript> <noscript>
src/components/carrusel.vue
+3 -33
View File
@@ -7,27 +7,13 @@
> >
<div class="carousel-inner"> <div class="carousel-inner">
<div <div
class="carousel-item " class="carousel-item"
v-bind:key="libro.id" v-bind:key="libro.id"
v-for="(libro, idx) in Libros" v-for="(libro, idx) in Libros"
:class="{ active: idx == 0 }" :class="{ active: idx == 0 }"
> >
<img :src="libro.img" class="d-block w-100 img-fluid" alt="img" /> <img :src="libro.img" class="d-block w-100 img-fluid" alt="img" />
</div> </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> </div>
<a <a
class="carousel-control-prev" class="carousel-control-prev"
@@ -58,23 +44,7 @@ import config from "../config/config.js";
export default { export default {
data() { data() {
return { return {
Libros: [ 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"
}
]
}; };
}, },
async created() { async created() {
@@ -93,7 +63,7 @@ export default {
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(response.data); reader.readAsDataURL(response.data);
reader.onload = () => { 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> </template>
<script> <script>
import axios from "axios";
import config from "../config/config.js";
export default { export default {
data() { data() {
return { return {
Libros: [ 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"
}
]
}; };
},
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> </script>
src/routes.js
+1 -2
View File
@@ -7,6 +7,5 @@ export const routes = [
{ path: "/", component: home, name: "form" }, { path: "/", component: home, name: "form" },
{ path: "/login", component: login, name: "Login" }, { path: "/login", component: login, name: "Login" },
{ path: "/desc", component: libroDescripcion, name: "LibroDesc" }, { path: "/desc", component: libroDescripcion, name: "LibroDesc" },
{ path: "/difusion", component: difusion, name: "difusion" }, { path: "/difusion", component: difusion, name: "difusion" }
]; ];
src/view/login.vue
+47 -30
View File
@@ -1,42 +1,59 @@
<template> <template>
<div> <div>
<Header></Header> <Header></Header>
<h1 class="my-5">Inicia Sesion</h1> <h1 class="my-5">Inicia Sesion</h1>
<div class="row d-flex justify-content-center"> <div class="row d-flex justify-content-center">
<div class="col-12 col-md-8 col-lg-6 col-xl-6"> <div class="col-12 col-md-8 col-lg-6 col-xl-6">
<form class="row d-flex justify-content-center"> <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
<input type="password" v-model="data.password" id="password" class="form-control col-8 my-3" name="login" placeholder="Contraseña"> type="text"
<input type="button" @click="login" class="btn bg-primary text-white col-5" value="Ingresar"> v-model="data.email"
</form> id="login"
</div> class="form-control col-8"
</div> 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> </div>
</template> </template>
<script> <script>
import Header from "./../components/header.vue"; import Header from "./../components/header.vue";
export default { export default {
data(){ data() {
return{ return {
data:{ data: {
email:'', email: "",
password:'' password: ""
}} }
}, };
methods:{ },
login(){ methods: {
alert(this.data.email) login() {
} alert(this.data.email);
},
components: {
Header
} }
} },
components: {
Header
}
};
</script> </script>
<style> <style></style>
</style>