Merge pull request 'description' (#12) from description into master

Reviewed-on: #12

package-lock.json

@@ -1786,6 +1786,16 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1812,6 +1822,34 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1833,6 +1871,25 @@
             "path-exists": "^4.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1897,6 +1954,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1913,6 +1980,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.8",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -4533,6 +4612,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5689,6 +5773,15 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -7266,6 +7359,14 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -7533,9 +7634,9 @@
       "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
     },
     "node-forge": {
-      "version": "0.9.0",
+      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
     "node-ipc": {
@@ -8821,8 +8922,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
-      "dev": true
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -9418,12 +9518,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.7",
+      "version": "1.10.8",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "dev": true,
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {
@@ -10909,6 +11009,23 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-carousel": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
+      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
+      "requires": {
+        "global": "^4.3.2",
+        "regenerator-runtime": "^0.12.1",
+        "vue": "^2.5.17"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "jquery": "^3.5.1",
     "sweetalert2": "^10.1.0",
     "vue": "^2.6.11",
+    "vue-carousel": "^0.18.0",
     "vue-router": "^3.4.3"
   },
   "devDependencies": {

src/App.vue

@@ -27,6 +27,9 @@ export default {
 .row {
   margin: 0 !important;
 }
+.VueCarousel-wrapper{
+  overflow:inherit  !important;
+}
 
 
 </style>

src/components/Carrousel.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="divMaster row ">
+    <div
+      id="carouselExampleControls"
+      class="carousel slide col-12 mx-auto"
+      data-ride="carousel"
+    >
+      <div class="carousel-inner">
+        <div
+          class="carousel-item"
+          v-bind:key="img.id"
+          v-for="(img, idx) in imgs"
+          :class="{ active: idx == 0 }"
+        >
+          <img :src="img" class="d-block w-100 img-fluid" alt="img" />
+        </div>
+      </div>
+      <a
+        class="carousel-control-prev"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="prev"
+      >
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a
+        class="carousel-control-next"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="next"
+      >
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgs: [
+        'https://www.acatlan.unam.mx/images/1410.jpg',
+        'https://www.acatlan.unam.mx/images/1402.jpg',
+        'https://www.acatlan.unam.mx/images/1421.jpg', 
+        'https://www.acatlan.unam.mx/images/1330.jpg'
+
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.divMaster {
+  height: auto;
+}
+</style>

src/components/Description.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="container">
+    <div class="row ">
+      <div class="col-md-6 col-sm-12 pt-5">
+       
+        <div class="row p-0">
+
+            <div class=" p-0 col-12 col-md-12 col-lg-2 col-xl-2 d-flex align-items-center  justify-content-start    flex-row  flex-lg-column flex-xl-column ">
+              <div v-bind:key="src.id"
+          v-for="src in src"
+          @click="src2 = src">
+          
+              <img :src="src" alt="" class="smalll"   />
+       </div>
+        
+            </div>
+
+             <div class="p-0 col-10 d-flex justify-content-center flex-column align-items-center">
+            <img :src="src2" alt="" class="libro" />
+            <button class="button pre" @click="showModal()">
+              Previsualizar
+            </button>
+             </div>
+        </div>
+     
+        <div v-if="Visible" @close="closeModal()">
+          <transition name="modal">
+            <div class="modal-backdrop" @click.self="closeModal()">
+              <div
+                class="modal"
+                role="dialog"
+                aria-labelledby="modalTitle"
+                aria-describedby="modalDescription"
+              >
+                <section class="modal-body rounded" id="modalDescription">
+                  <iframe
+                    :src="PDF"
+                    width="100%"
+                    height="100%"
+                    frameborder="0"
+                  ></iframe>
+                </section>
+              </div>
+            </div>
+          </transition>
+        </div>
+        <br /><br />   
+      </div>
+     
+      <div class="col-md-6 col-sm-12 py-5 titulo">
+        <b>Titulo:</b>
+        <p>{{ titulo }}</p>
+        <b>Autor: </b>
+        <p>{{ autor }}</p>
+        <b>Paginas: </b>
+        <p>{{ paginas }}</p>
+        <b>ISBN: </b>
+        <p>{{ isbn }}</p>
+        <b>Año de Impresión: </b>
+        <p>{{ edicion }}</p>
+        
+        <b>Versión:</b>
+        <p>{{ version }}</p>
+        <b>Descripción:</b>
+        <div class="overflow-auto">{{ desc }}</div>
+        <b>Precio: </b>
+        <p>${{ precio }}</p>
+
+        <b>Cantidad:</b>
+<div class="row d-flex align-items-center" >
+
+  <div class="col-2 ">
+
+  <select name="num" id="num">
+    <option value="volvo"
+    v-for="n in inventario"
+    :key="n"
+    >
+    {{n}}
+    </option>
+ 
+  </select>
+  </div>
+  <div class="col-10">
+        <a
+          href="https://demo-tienda.acatlan.unam.mx/"
+          class="button text-white d-flex justify-content-center align-items-center"
+          id="buttonC"
+        >
+          <p class="text-center">Agregar al carrito</p>
+        </a>
+        </div>
+</div>
+      </div>
+    </div>
+    <Title title="Similares" />
+   
+    <div class="divMaster row ">
+      <div class="col-10 offset-1 d-flex flex-wrap justify-content-center mb-5">
+        <!-- <div
+          class="card m-3"
+          style="width: 12rem;"
+          v-bind:key="libro.id"
+          v-for="libro in Libros"
+          @click="descripcion(libro.id)"
+        >
+          <div 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>
+          </div>
+        </div> -->
+
+<div  class="carousel-items card m-3  shadow"
+style="width: 12rem;"
+                v-bind:key="item.id"
+          v-for="item in Libros"
+          @click="descripcion(libro.id)"
+          
+                  >
+                      <img :src="item.img" class="card-img-top" alt="img"  />
+                      <div class="card-body ">
+                        <h5 class="text-center"> <b >${{item.precio}}</b></h5>
+                        <p class="card-text overflow-clip">{{item.descripcion}}</p>
+                      </div>
+  
+                </div>  
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+import Title from "../components/titulo.vue";
+
+
+export default {
+  
+  components: {
+    Title
+    //modal
+  },
+
+  data() {
+    return {
+      inventario:5,
+      idLibro: "",
+      titulo: "Procesos sociopolíticos y el espacio urbano. El desarrollo histórico urbano de San José Río Hondo, Naucalpan de Juárez (1700 a.C al 2000 d.C.)",
+      autor: "Mario Camacho Cardona",
+      paginas: "250",
+      isbn: "978-607-02-8433-5",
+      edicion: "Primera edición 2016",
+      precio: "324",
+      src: [ "https://demo-tienda.acatlan.unam.mx/55-large_default/metodos-numericos-para-sistemas-de-ecuaciones-no-lineales-interpolacion-y-ajuste-de-curvas.jpg",
+      "https://tienda.acatlan.unam.mx/365-large_default/ganz-toll-breves-apuntes-sobre-la-sintaxis-alemana.jpg",
+      "https://tienda.acatlan.unam.mx/363-large_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg"],
+     
+     src2:"https://tienda.acatlan.unam.mx/363-large_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg",
+     version: "Impresa",
+      desc: `La obra valora la generación y las trasformaciones de la configuración espacial urbano-regional a través del suceder del desarrollo urbano-regional, provocadas por los modelos económico-políticos, administrativos. El sitio de estudio fue: San José Rio Hondo, ubicado en el Estado de México.`,
+      boton2: "",
+      categoria: "",
+      Libros: [
+{
+      img:'https://tienda.acatlan.unam.mx/330-home_default/taza-ceramica-.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       } ,
+       {
+      img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       },
+         {
+      img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }   
+      
+
+      ],
+      Visible: false,
+
+      isModalVisible: false,
+      //PDF: "http://www.ataun.eus/bibliotecagratuita/Cl%C3%A1sicos%20en%20Espa%C3%B1ol/Nicol%C3%A1s%20Maquiavelo/El%20pr%C3%ADncipe.pdf#toolbar=0&navpanes=0&scrollbar=0&zoom=80"
+      //PDF: "RUTA.pdf" //nombre del archivo de previsualizacion del libro
+      PDF: "https://venus.acatlan.unam.mx/portal/PDFget/?nombrePDF=espacio_semico_ambiental.pdf"
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+
+    async descripcion(idLibro) {
+      localStorage.clear();
+      window.localStorage.setItem("idLibro", idLibro);
+      location.reload();
+    },
+    showModal() {
+      this.Visible = true;
+    },
+    closeModal() {
+      this.Visible = false;
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background: #ffffff;
+  box-shadow: 2px 2px 20px 1px;
+  /* overflow-x: auto; */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  width: 90%;
+  height: 90%;
+}
+
+.modal-body {
+  /* position: relative; */
+  padding: 20px 10px;
+}
+.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: 2.5rem;
+  width: 15rem;
+  text-align: center;
+
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1.5rem;
+  border-radius: .5rem;
+  -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;
+}
+#buttonC{
+   margin-top: 0rem;
+}
+#buttonC p{
+  margin: 0;
+  font-size: 80%;
+}
+
+.button:hover {
+  background-color: #46c200;
+  color: white;
+}
+.pre {
+  background-color: #1e3c70;
+}
+.pre:hover {
+  background-color: rgb(187, 136, 0);
+}
+
+.titulo {
+  font-size: 1rem;
+  text-align: left;
+  color: balck;
+}
+p {
+  margin-bottom: 0.5rem;
+}
+
+.libro {
+  width: 320px;
+  height: 480px;
+  margin-right: 0;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
+}
+.smalll {
+  width: 80px;
+ margin: .7rem;
+
+  margin-right: 0;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
+}
+
+.modal-backdrop{
+  opacity: 1;
+}
+
+.shadow{
+  -webkit-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
+-moz-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
+box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
+}
+
+@media (max-width: 450px) {
+  .libro {
+    width: 270px;
+    height: 380px;
+    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;
+  }
+  #buttonC{
+   margin-top: 0rem;
+   width: 12rem;
+}
+}
+</style>

src/components/titulo.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="divMaster">
+    <div class="row">
+      <div class="col-10 offset-1 bor d-flex justify-content-center">
+        <div class="bgAzul">
+          <p class="text-white pTitulo">{{ title }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["title"]
+};
+</script>
+
+<style>
+.bor {
+  border: none !important;
+  border-bottom: 5px solid #1b3d70 !important;
+}
+.bgAzul {
+  background-color: #1b3d70;
+  width: 40%;
+
+  border-top-right-radius: 20px 20px !important;
+  border-top-left-radius: 20px 20px !important;
+}
+.pTitulo {
+  margin: 0;
+  font-size: 30px;
+  text-align: center;
+}
+
+@media screen and (max-width: 450px) {
+  .pTitulo {
+    font-size: 20px;
+    padding: 0px 3px;
+  }
+  .bgAzul {
+    width: 60%;
+  }
+}
+</style>

src/config/config.js

@@ -0,0 +1,11 @@
+const config = {
+    //ngrok
+    //api: "https://f8d86328e778.ngrok.io"
+  
+    //Local
+    //api: "http://localhost:3000"
+  
+    //Pruebas
+    api: "https://venus.acatlan.unam.mx/portal"
+  };
+  module.exports = config;

src/routes.js

@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import Home from './view/Home.vue'
 import PersonalData from './view/PersonalData.vue'
 
+import Descrip from './view/Descrip.vue'
 const routes = [
     {
         path: '/',

src/view/Descrip.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <Header />
+
+
+    <Description />
+
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../components/Header.vue";
+import Description from "./../components/Description.vue";
+import Footer from "./../components/Footer.vue";
+
+export default {
+
+  components: {
+    Header,
+    Description,
+    Footer
+  }
+};
+</script>

src/view/Home.vue

@@ -1,11 +1,80 @@
 <template>
-<div>
+    <div  class="body">
-<Header></Header>
+        <Header></Header>
-<div class="container my-5">
+     
-  <h1 class="text-center">Home</h1>
+        <div class="row ">
-</div>
+          <div class="col-12 col-md-10 col-lg-10 col-xl-10  mx-auto">
-<Footer></Footer>
+            <CarruselImg />
-</div>
+          </div>
+        </div>
+
+<!-- lo mas vendido -->
+        <div class="row ">
+          <div class="col-12  smx-auto">
+            <div class="my-5">
+                <h5 class="text-center font-weight-bold">Lo más vendido</h5> 
+                <carousel 
+                  :autoplay="true" 
+                  :perPage=2 
+                  :perPageCustom="[[480, 3],[900, 4]]" 
+                  :resistanceCoef=20
+                  :autoplayHoverPause=true
+                  :minSwipeDistance=200
+                >
+                <slide  class="carousel-items card mx-2  shadow"
+                  v-bind:key="item.id"
+                  v-for="(item, idx) in items"
+                  :class="{ active: idx == 0 }">
+                  
+                      <img :src="item.img" class="card-img-top" alt="img"  />
+                      <div class="card-body">
+                        <h5 class="text-center"> <b >${{item.precio}}</b></h5>
+                        <p class="card-text overflow-clip">{{item.descripcion}}</p>
+                      </div>
+  
+                </slide>  
+                <slide  class="carousel-items card mx-2  shadow"></slide>
+                </carousel>
+            </div>
+           </div>
+        </div>
+
+
+
+<!-- lo mas reciente  -->
+        <div class="row ">
+          <div class="col-12  smx-auto">
+            <div class="my-5">
+                <h5 class="text-center font-weight-bold">Lo más reciente</h5> 
+                <carousel 
+                  :autoplay="true" 
+                  :perPage=2 
+                  :perPageCustom="[[480, 3],[900, 4]]" 
+                  :resistanceCoef=20
+                  :autoplayHoverPause=true
+                  :minSwipeDistance=200
+                >
+                <slide  class="carousel-items card mx-2  shadow"
+                  v-bind:key="item.id"
+                  v-for="(item, idx) in items"
+                  :class="{ active: idx == 0 }">
+
+                      <img :src="item.img" class="card-img-top" alt="img"  />
+                      <div class="card-body ">
+                        <h5 class="text-center"> <b >${{item.precio}}</b></h5>
+                        <p class="card-text overflow-clip">{{item.descripcion}}</p>
+                      </div>
+  
+                </slide>  
+                <slide  class="carousel-items card mx-2  shadow"></slide>
+                </carousel>
+            </div>
+           </div>
+        </div>
+
+
+        <Footer></Footer>
+    </div>
 </template>
 
 <script>
@@ -13,11 +82,96 @@
 import Header from '../components/Header'
 import Footer from '../components/Footer'
 
+import { Carousel, Slide } from 'vue-carousel'
+import CarruselImg from '../components/Carrousel'
+
+
+        
 export default {
 components: {
         Header,
         Footer,
+        Carousel,
+        CarruselImg,
+
+        Slide
+    },
+    data(){
+      return{
+        items:[
+      {
+      img:'https://tienda.acatlan.unam.mx/330-home_default/taza-ceramica-.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       } ,
+       {
+      img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }  ,
+       {
+      img:'https://tienda.acatlan.unam.mx/361-home_default/las-pasiones-en-la-prensa-mexicana-siglos-xix-xxi.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }  ,
+       {
+      img:'https://tienda.acatlan.unam.mx/362-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-1-livello.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }  ,
+       {
+      img:'https://tienda.acatlan.unam.mx/363-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }  ,
+       {
+      img:'https://tienda.acatlan.unam.mx/364-home_default/herramientas-tic-guia-de-inicio.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }  ,
+       {
+      img:'https://tienda.acatlan.unam.mx/365-home_default/ganz-toll-breves-apuntes-sobre-la-sintaxis-alemana.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }  ,
+       {
+      img:'https://tienda.acatlan.unam.mx/366-home_default/espacio-semico-ambiental.jpg',
+       precio:199.00,
+       descripcion:'esta es la descripcion del articulo'
+       }  
+      
+        ]
+      }
 
     }
 }
 </script>
+<style scoped>
+.overflow-clip {
+white-space: nowrap; 
+  width: 90%; 
+  overflow: hidden;
+  text-overflow: ellipsis; 
+}
+.VueCarousel-dot:active{
+  border: none;
+
+}
+.body{
+  /* background-color: #E5E5E5; */
+      overflow-x: hidden; 
+
+}
+.card-body{
+  border-top: 1px solid black !important;
+}
+.VueCarousel-wrapper{
+  overflow-x:inherit ;
+  overflow-y:inherit ;
+}
+.shadow{
+  -webkit-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
+-moz-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
+box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
+}
+</style>