Compare commits
1 Commits
desplegable
...
search
| Author | SHA1 | Date | |
|---|---|---|---|
 eithan
|
fa96ab86b1 |
+28
-21
@@ -6,15 +6,13 @@
|
||||
data-ride="carousel"
|
||||
>
|
||||
<div class="carousel-inner">
|
||||
<div 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
|
||||
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
|
||||
@@ -54,20 +52,29 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
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"}
|
||||
]
|
||||
|
||||
}
|
||||
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"
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
+27
-21
@@ -81,34 +81,39 @@
|
||||
v-if="isExist"
|
||||
class="form-inline my-0 my-lg-0 buscador col-4 d-flex justify-content-end"
|
||||
>
|
||||
<div class="input-group input-group-sm mb-0">
|
||||
<div class="input-group input-group-sm mb-0 ver">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control reIzq "
|
||||
placeholder="Buscar"
|
||||
v-model="search"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="basic-addon2"
|
||||
/>
|
||||
<div class="input-group-append reDer bg-white">
|
||||
<button class="btn my-0" type="submit">
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 16 16"
|
||||
class="bi bi-search blanco"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<router-link
|
||||
:to="{ name: 'search', params: { searchProp: search } }"
|
||||
>
|
||||
<button class="btn my-0" type="submit">
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 16 16"
|
||||
class="bi bi-search blanco"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -121,7 +126,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isExist: true
|
||||
isExist: true,
|
||||
search: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
+2
-1
@@ -2,11 +2,12 @@ import home from "./view/home.vue";
|
||||
import login from "./view/login.vue";
|
||||
import libroDescripcion from "./view/libroDescripcion.vue";
|
||||
import difusion from "./view/difusion.vue";
|
||||
import search from "./view/search.vue";
|
||||
|
||||
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: "/search", component: search, name: "search", props: true }
|
||||
];
|
||||
|
||||
+47
-30
@@ -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>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<Nav></Nav>
|
||||
|
||||
<!-- <div class="wrapper">
|
||||
<div class="card" v-bind:key="post.id" v-for="post in filteredList">
|
||||
<a v-bind:href="post.link" ta rget="_blank">
|
||||
<img v-bind:src="post.img" width="45px" />
|
||||
<small>posted by: {{ post.title }}</small>
|
||||
{{ post.title }}
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="search-wrapper m-4">
|
||||
<input type="text" v-model="searchProp" placeholder="buscar libro" />
|
||||
</div>
|
||||
<div v-if="searchProp">
|
||||
<Title title="Resultados" />
|
||||
|
||||
<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="post.id"
|
||||
v-for="post in ListaFiltrada"
|
||||
>
|
||||
<router-link :to="{ path: 'home' }" class="textt">
|
||||
<img :src="post.img" class="card-img-top rounded" alt="libro" />
|
||||
<div class="card-body cd textt">
|
||||
<p class="card-text textt">
|
||||
{{ post.title }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>Ingresa un Titulo en el buscador</h1>
|
||||
</div>
|
||||
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./../components/header.vue";
|
||||
import Nav from "./../esteticas/nav.vue";
|
||||
//import Nav from "./../components/navPrincipal.vue";
|
||||
import Footer from "./../components/footer.vue";
|
||||
import Title from "../components/titulo.vue";
|
||||
|
||||
export default {
|
||||
props: ["searchProp"],
|
||||
components: {
|
||||
Header,
|
||||
Nav,
|
||||
Footer,
|
||||
Title
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: "",
|
||||
postLista: [
|
||||
{
|
||||
id: 0,
|
||||
title: "titu",
|
||||
img:
|
||||
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
title: "papa",
|
||||
img:
|
||||
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
title: "titu2",
|
||||
img:
|
||||
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
title: "he",
|
||||
img:
|
||||
"https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ListaFiltrada() {
|
||||
return this.postLista.filter(post => {
|
||||
return post.title.toLowerCase().includes(this.searchProp.toLowerCase());
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.divMaster {
|
||||
height: auto;
|
||||
}
|
||||
.card {
|
||||
border: none !important;
|
||||
border-bottom: 5px solid #1b3d70 !important;
|
||||
}
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
color: black;
|
||||
}
|
||||
.ver {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user