view difusion

src/components/carrusel.vue

@@ -2,7 +2,7 @@
   <div class="divMaster row my-5">
     <div
       id="carouselExampleControls"
-      class="carousel slide col-10 offset-1"
+      class="carousel slide col-md-10 col-lg-10 col-xl-10  col-12 mx-auto"
       data-ride="carousel"
     >
       <div class="carousel-inner">

src/components/descripcion.vue

@@ -3,6 +3,34 @@
     <div class="row ">
       <div class="col-md-6 col-sm-12 py-5">
         <img v-bind:src="rutaIm" class="libro" />
+        <button class="button pre">
+          Previsualizar</button
+        ><br /><br />
+        <div class="container">
+          <div class="row izq">
+            <b style="font-size: 18px;" class="izq">Compartir</b><br />
+          </div>
+          <div class="container izq">
+            <a href="https://www.facebook.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/facebook.png"
+                alt="Facebook"
+            /></a>
+            <a href="https://www.instagram.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/Instagram.png"
+                alt="Instagram"
+            /></a>
+            <a href="https://www.youtube.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/YouTube.png"
+                alt="Youtube"
+            /></a>
+          </div>
+        </div>
       </div>
       <div class="col-md-6 col-sm-12 py-5 titulo">
         <b>Titulo:</b>
@@ -17,15 +45,45 @@
         <p>{{ edicion }}</p>
         <b>Precio: </b>
         <p>{{ precio }}</p>
-
         <b>Versión:</b>
+        <p>{{ version }}</p>
+        <b>Descripción:</b>
+        <div class="overflow-auto">{{ desc }}</div>
+        <button class="button ">
+          {{ boton2 }}
+        </button>
+      </div>
+    </div>
+    <Title title="Similares" />
+    <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="libro.id"
+          v-for="libro in Libros"
+        >
+          <router-link :to="{ path: 'home' }" class="textt">
+            <img :src="libro.img" class="card-img-top rounded" alt="libro" />
+            <div class="card-body cd textt">
+              <p class="card-text textt">
+                {{ libro.title }}
+              </p>
+            </div>
+          </router-link>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Title from "../components/titulo.vue";
 export default {
+  components: {
+    Title
+  },
+
   data() {
     return {
       titulo: "Competitive programing",
@@ -34,21 +92,97 @@ export default {
       isbn: "POSF-12-43",
       edicion: "Primera edicion",
       precio: "$3232.00",
-      rutaIm: `./${__dirname}src/assets/as.jpg`
+      rutaIm:
+        "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg",
+      version: "Electronica",
+      desc: `En relación al estudio del álgebra, las expresiones algebraicas son el conjunto de números, y por símbolos representados por letras que manifiestan un valor desconocido, siendo llamado como incógnita o variable.\n\nLos 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.`,
+      boton2: "Comprar",
+      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"
+        }
+      ]
     };
   }
 };
 </script>
 
 <style scoped>
+.divMaster {
+  height: auto;
+}
+.card {
+  border: none !important;
+  border-bottom: 5px solid #1b3d70 !important;
+}
+a {
+  text-decoration: none !important;
+  color: black;
+}
+.img {
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+.izq {
+  display: flex;
+  justify-content: flex-start;
+}
+.button {
+  background-color: rgb(187, 136, 0);
+  border: none;
+  color: white;
+  height: 4.5rem;
+  width: 15rem;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1.5rem;
+  border-radius: 1rem;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin-top: 2rem;
+}
+.button:hover {
+  background-color: #46c200;
+  color: white;
+}
+.pre {
+  background-color: #1e3c70;
+}
+.pre:hover {
+  background-color: rgb(187, 136, 0);
+}
+
 .titulo {
-  font-size: 1.3rem;
+  font-size: 1rem;
   text-align: left;
   color: balck;
 }
+p {
+  margin-bottom: 0.5rem;
+}
 
 .libro {
-  width: 360px;
+  width: 320px;
   height: 480px;
   margin-right: auto;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
@@ -60,5 +194,16 @@ export default {
     margin-right: auto;
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
   }
+  .button {
+    text-align: center;
+    margin-top: 3rem;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .button {
+    text-align: center;
+    margin-top: 3rem;
+  }
 }
 </style>

src/components/footer.vue

@@ -1,7 +1,7 @@
 <template>
   <footer class="container-fluid Azul-puma footer py-3 ">
     <container>
-      <div class="row">
+      <div row>
         <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
           Comité Editorial
         </button>

src/components/titulo.vue

@@ -33,7 +33,6 @@ export default {
   font-size: 30px;
 }
 
-
 @media screen and (max-width: 400px) {
   .pTitulo {
     font-size: 20px;

src/esteticas/nav.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="divMaster doradoUnam row d-flex justify-content-center">
     <div class="col-10 offset-1">
-      <nav class="navbar navbar-expand-sm navbar-light  ">
+      <nav class="navbar navbar-expand-sm navbar-dark  ">
         <button
-          class="navbar-toggler"
+          @click="method()"
+          class="navbar-toggler col-5"
           type="button"
           data-toggle="collapse"
           data-target="#navbarTogglerDemo02"
@@ -13,97 +14,124 @@
         >
           <span class="navbar-toggler-icon blanco"></span>
           <span class="mx-2">Menu</span>
-          
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
-          <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
+        <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
+          <ul
+            class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-around  mt-0 mt-lg-0"
+          >
             <li class="nav-item">
               <a class="nav-link text-white" href="#">Inicio</a>
             </li>
             <li class="nav-item">
               <a class="nav-link text-white" href="#">Presentacion</a>
             </li>
-            <li class="nav-item ">
-              <a
-                class="nav-link dropdown-toggle text-white "
-                id="navbarDropdown"
-                role="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-                href="#"
-                >Libros</a
-              >
-              <div
-                class="dropdown-menu azulUnam"
-                aria-labelledby="navbarDropdown"
-              >
-                <a class="dropdown-item text-white" href="#"
-                  >Ciencias Socioeconomicas</a
+
+            <li class="nav-item">
+              <div class="dropdown">
+                <a
+                  class="btn nav-link  dropdown-toggle text-white"
+                  href="#"
+                  role="button"
+                  id="dropdownMenuLink"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
                 >
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Diseño y Edificacion</a
-                >
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Enseñanza de Idiomas</a
-                >
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Estudios de Posgrado</a
-                >
-                <div class="dropdown-divider "></div>
-                <a class="dropdown-item text-white " href="#">Humanidades</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Matematicas e Ingenieria</a
+                  Libros
+                </a>
+
+                <div
+                  class="dropdown-menu azulUnam"
+                  aria-labelledby="navbarDropdown"
                 >
+                  <a class="dropdown-item text-white" href="#"
+                    >Ciencias Socioeconomicas</a
+                  >
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Diseño y Edificacion</a
+                  >
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Enseñanza de Idiomas</a
+                  >
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Estudios de Posgrado</a
+                  >
+                  <div class="dropdown-divider "></div>
+                  <a class="dropdown-item text-white " href="#">Humanidades</a>
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Matematicas e Ingenieria</a
+                  >
+                </div>
               </div>
             </li>
+
             <li class="nav-item">
               <a class="nav-link text-white" href="#">Difusion Editorial</a>
             </li>
           </ul>
-          <form class="form-inline  my-0 my-lg-0">
-            <div class="input-group input-group-sm mb-0">
-              <input
-                type="text"
-                class="form-control reIzq "
-                placeholder="Buscar"
-                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"
-                    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>
-              </div>
-            </div>
-          </form>
         </div>
+
+        <form
+          id="buscador"
+          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">
+            <input
+              type="text"
+              class="form-control reIzq "
+              placeholder="Buscar"
+              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>
+            </div>
+          </div>
+        </form>
       </nav>
     </div>
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      isExist: true
+    };
+  },
+  methods: {
+    method() {
+      this.isExist = !this.isExist;
+    }
+  }
+};
+</script>
+
 <style scoped>
 * {
   margin: 0;
@@ -125,27 +153,29 @@ nav {
 .doradoUnam {
   background-color: #bb8800;
 }
-.blanco {
-  color: white !important;
-}
 
 .dropdown-item:hover {
   background-color: #bb8800;
 }
 .nav-link:focus {
   background-color: #1e3c70;
-  border-radius:  2rem;
+  border-radius: 1rem;
 }
 
-.nav-link{
+.nav-link:hover {
+  background-color: #1e3c70;
+  color: white;
+}
+
+.nav-link {
   transition: 0.3s;
+  font-size: 20px;
 }
 
-.dropdown-item{
-  padding: 1rem;
+.dropdown-item {
+  padding: 0.3rem 1rem;
 }
 
-
 .menuText {
   display: none;
 }
@@ -161,8 +191,9 @@ nav {
 }
 
 @media (max-width: 450px) {
-  .menuText {
-    display: block;
+  .menuText,
+  .buscador {
+    display: block !important;
   }
 }
 </style>

src/routes.js

@@ -1,9 +1,11 @@
 import home from "./view/home.vue";
 import login from "./view/login.vue";
 import libroDescripcion from "./view/libroDescripcion.vue";
+import difusion from "./view/difusion.vue";
 
 export const routes = [
   { path: "/", component: home, name: "form" },
   { path: "/panelAdmin", component: login, name: "Login" },
-  { path: "/desc", component: libroDescripcion, name: "LibroDesc" }
+  { path: "/desc", component: libroDescripcion, name: "LibroDesc" },
+  { path: "/difusion", component: difusion, name: "difusion" }
 ];

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/home.vue

@@ -12,13 +12,14 @@
 <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 Carr from "../components/carrusel.vue";
 import Cart from "../components/cartLibro.vue";
 import Title from "../components/titulo.vue";
 
 export default {
-  name: "App",
+  name: "home",
   components: {
     Header,
     Nav,

src/view/libroDescripcion.vue

@@ -3,8 +3,8 @@
     <Header />
     <Nav />
 
-    <p>descripcion</p>
     <Descrip />
+
     <Footer />
   </div>
 </template>