view busqueda

src/components/carrusel.vue

@@ -6,7 +6,15 @@
       data-ride="carousel"
     >
       <div class="carousel-inner">
-        <div class="carousel-item active">
+        <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
             src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
             class="d-block w-100 img-fluid"
@@ -19,14 +27,7 @@
             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
         class="carousel-control-prev"
@@ -51,7 +52,29 @@
 </template>
 
 <script>
-export default {};
+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"
+        }
+      ]
+    };
+  }
+};
 </script>
 
 <style scoped>

src/esteticas/nav.vue

@@ -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: {

src/routes.js

@@ -1,9 +1,13 @@
 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: "/panelAdmin", component: login, name: "Login" },
-  { path: "/desc", component: libroDescripcion, name: "LibroDesc" }
+  { 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 }
 ];

src/view/difusion.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <Header />
+    <Nav />
+    <!-- <div class="row">
+    <div class="col-10 offset-1"> -->
+    <Title title="Conoce mas" class="mt-5" />
+    <!-- </div>
+</div> -->
+    <div class="container">
+      <div class="row my-5" v-bind:key="de.id" v-for="de in des">
+        <div class="titulo col-12 mb-5">
+          <h1>{{ de.titulo }}</h1>
+        </div>
+        <div class="libro col-10 col-sm-5 col-md-5 col-lg-5 col-xl-5 offset-1">
+          <img
+            :src="de.img"
+            class=" figure-img img-fluid  rounded"
+            alt="libro"
+          />
+        </div>
+        <div
+          class="texto col-10 col-sm-5 col-md-5 col-lg-5 col-xl-5 d-flex align-items-center justify-content-center flex-column"
+        >
+          <h4>Descripcion:</h4>
+          <p class="scroll">
+            {{ de.descrip }}
+          </p>
+        </div>
+        <div class="video col-12 d-flex my-4 justify-content-center">
+          <iframe
+            width="560"
+            height="315"
+            :src="de.video"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </div>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "../components/header.vue";
+import Nav from "../esteticas/nav.vue";
+import Footer from "../components/footer.vue";
+import Title from "../components/titulo.vue";
+
+export default {
+  components: {
+    Header,
+    Nav,
+    Footer,
+    Title
+  },
+  data() {
+    return {
+      des: [
+        {
+          id: 0,
+          titulo: "Algebra lineal productos internos y teoremas de estructura",
+          img:
+            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg",
+          descrip: ` Los símbolos se encuentran relacionados a través de signos que
+            indican las operaciones que se necesitan efectuar, bien sea
+            multiplicación, suma, resta, entre otros, con el objetivo de
+            conseguir el resultado de las variables. En este sentido, los
+            términos se distinguen o separan por medio de signos, y en el caso
+            de estar separadas por el signo de igualdad se llama ecuación.`,
+          video: "https://www.youtube.com/embed/gOsM-DYAEhY"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style>
+.imgLibro {
+  height: 600px;
+}
+.scroll {
+  width: 100%;
+  height: 60%;
+  overflow: auto;
+}
+
+@media (max-width: 400px) {
+  .scroll {
+    height: 90%;
+  }
+}
+</style>

src/view/login.vue

@@ -0,0 +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>
+  </div>
+</template>
+
+<script>
+import Header from "./../components/header.vue";
+
+export default {
+  data() {
+    return {
+      data: {
+        email: "",
+        password: ""
+      }
+    };
+  },
+  methods: {
+    login() {
+      alert(this.data.email);
+    }
+  },
+  components: {
+    Header
+  }
+};
+</script>
+
+<style></style>

src/view/search.vue

@@ -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>