From b9e7cf483ba243e62887905f91d005d525c28f6f Mon Sep 17 00:00:00 2001
From: casnet1 <ne.castillo1607@gmail.com>
Date: Sun, 18 Oct 2020 14:43:06 -0500
Subject: [PATCH 1/2] vista descripcion, componente desc y title

---
 src/components/Description.vue | 414 +++++++++++++++++++++++++++++++++
 src/components/titulo.vue      |  46 ++++
 src/config/config.js           |  11 +
 src/routes.js                  |  14 +-
 src/view/Descrip.vue           |  25 ++
 5 files changed, 504 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Description.vue
 create mode 100644 src/components/titulo.vue
 create mode 100644 src/config/config.js
 create mode 100644 src/view/Descrip.vue

diff --git a/src/components/Description.vue b/src/components/Description.vue
new file mode 100644
index 0000000..ca1d0eb
--- /dev/null
+++ b/src/components/Description.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="container">
+    <div class="row ">
+      <div class="col-md-6 col-sm-12 py-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 ">
+        <img :src="src" alt="" class="smalll"   />
+        <img :src="src" alt="" class="smalll"   />
+        <img :src="src" alt="" class="smalll"   />
+      </div>
+
+       <div class="p-0 col-10 d-flex justify-content-center flex-column align-items-center">
+        <img :src="src" alt="" class="libro" />
+        <button class="button pre" @click="showModal()">
+          Previsualizar
+        </button>
+        </div>
+
+</div>
+
+        <modal 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>
+        </modal>
+        <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=""
+                alt="Facebook"
+            /></a>
+            <a href="" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src=""
+                alt="Instagram"
+            /></a>
+            <a href="" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src=""
+                alt="Youtube"
+            /></a>
+          </div>
+
+
+
+
+        </div>
+      </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>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import config from "../config/config.js";
+import Title from "../components/titulo.vue";
+//import modal from "../components/previsual.vue";
+
+export default {
+  components: {
+    Title
+    //modal
+  },
+
+  data() {
+    return {
+      inventario:5,
+      idLibro: "",
+      titulo: "",
+      autor: "",
+      paginas: "",
+      isbn: "",
+      edicion: "",
+      precio: "",
+      src: "",
+      version: "",
+      desc: ``,
+      boton2: "",
+      categoria: "",
+      Libros: [],
+      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
+      // "https://www.imprentanacional.go.cr/editorialdigital/libros/literatura%20infantil/el_principito_edincr.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;
+    }
+  },
+  async created() {
+    let path = `${config.api}`;
+    try {
+      this.idLibro = window.localStorage.getItem("idLibro");
+      let detalle = await axios.get(
+        `${config.api}/libroDetalle?idLibro=${this.idLibro}`
+      );
+
+      let detalleDatos = await detalle.data.datos;
+
+      this.titulo = detalleDatos.titulo;
+      this.autor = detalleDatos.autor;
+      this.paginas = detalleDatos.paginas;
+      this.isbn = detalleDatos.isbn;
+      this.edicion = detalleDatos.impresion;
+      this.precio = detalleDatos.precio;
+      this.version = detalleDatos.version;
+      this.desc = detalleDatos.descripcion;
+      this.categoria = detalleDatos.categoria;
+      //let path = `${config.api}/PDFget/?nombrePDF=${nombre}`;
+      this.PDF = `${config.api}/PDFget/?nombrePDF=${detalle.data.pdfVis}`;
+      //console.log(`datos: `,detalleDatos.data );
+      console.log(`Esta es el nombred el pdf ${this.PDF}`);
+
+      window.localStorage.setItem("pdfVis", this.PDF);
+
+      if (detalleDatos.precio !== "Gratis") this.boton2 = "Comprar";
+      else this.boton2 = "Descargar";
+    } catch (error) {
+      console.log(error);
+    }
+
+    try {
+      let config = {
+        // example url
+        url: `${path}/libroImagen?idLibro=${this.idLibro}`,
+        method: "GET",
+        responseType: "blob"
+      };
+      await axios(config).then(response => {
+        let reader = new FileReader();
+        reader.readAsDataURL(response.data);
+        reader.onload = () => {
+          this.src = reader.result;
+        };
+      });
+    } catch (error) {
+      console.log(error);
+    }
+    try {
+      let similares = await axios.get(
+        `${config.api}/librosSimilares?categoria=${this.categoria}`
+      );
+      similares = similares.data.data;
+      console.log(`${similares}`);
+      for (let i = 0; i < similares.length; i++) {
+        let config = {
+          // example url
+          url: `${path}/libroImagen?idLibro=${similares[i].idLibro}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        try {
+          await axios(config).then(response => {
+            let reader = new FileReader();
+            reader.readAsDataURL(response.data);
+            reader.onload = () => {
+              this.Libros.push({
+                id: similares[i].idLibro,
+                title: similares[i].titulo,
+                img: reader.result
+              });
+              //this.Libros[i].img = reader.result;
+            };
+          });
+        } catch (error) {
+          console.log(`Este libro no se encuentra: ${error}`);
+        }
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error ${error}`);
+    }
+  }
+};
+</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);
+}
+@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>
\ No newline at end of file
diff --git a/src/components/titulo.vue b/src/components/titulo.vue
new file mode 100644
index 0000000..0e0f047
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/config/config.js b/src/config/config.js
new file mode 100644
index 0000000..3fb94d9
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
index 158b1c9..dbc3878 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,12 +2,10 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
-<<<<<<< HEAD
 import PersonalData from './view/PersonalData.vue'
-=======
 import Cart from './view/Cart.vue'
->>>>>>> origin
 
+import Descrip from './view/Descrip.vue'
 const routes = [
     {
         path: '/',
@@ -20,15 +18,19 @@ const routes = [
         name: 'home'
     },
     {
-<<<<<<< HEAD
         path: '/datosPersonales',
         component: PersonalData,
         name: 'personalData'
-=======
+    },
+    {
         path: '/cart',
         component: Cart,
         name: 'cart'
->>>>>>> origin
+    },
+    {
+        path: '/descripcion',
+        component: Descrip,
+        name: 'descripcion'
     }
 ]
 
diff --git a/src/view/Descrip.vue b/src/view/Descrip.vue
new file mode 100644
index 0000000..c359d01
--- /dev/null
+++ b/src/view/Descrip.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <Header />
+
+
+    <Descrip />
+
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../components/Header.vue";
+import Descrip from "./../components/Description.vue";
+import Footer from "./../components/Footer.vue";
+
+export default {
+  name: "App",
+  components: {
+    Header,
+    Descrip,
+    Footer
+  }
+};
+</script>
\ No newline at end of file

From 325ab92f1667441a4d3cefd1239340b4e143d034 Mon Sep 17 00:00:00 2001
From: casnet1 <ne.castillo1607@gmail.com>
Date: Tue, 27 Oct 2020 19:06:14 -0600
Subject: [PATCH 2/2] descricion

---
 package-lock.json              |  40 ------
 src/components/Description.vue | 237 +++++++++++++--------------------
 src/view/Descrip.vue           |   8 +-
 3 files changed, 94 insertions(+), 191 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e794fe0..8c7d815 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10968,30 +10968,6 @@
       }
     },
     "vue-loader-v16": {
-<<<<<<< HEAD
-      "version": "npm:vue-loader@16.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-=======
       "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==",
@@ -11010,20 +10986,13 @@
           "dev": true,
           "optional": true,
           "requires": {
->>>>>>> origin
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-<<<<<<< HEAD
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-=======
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
           "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
->>>>>>> origin
           "dev": true,
           "optional": true,
           "requires": {
@@ -11055,14 +11024,6 @@
           "dev": true,
           "optional": true
         },
-<<<<<<< HEAD
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-=======
         "loader-utils": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
@@ -11074,7 +11035,6 @@
             "emojis-list": "^3.0.0",
             "json5": "^2.1.2"
           }
->>>>>>> origin
         },
         "supports-color": {
           "version": "7.2.0",
diff --git a/src/components/Description.vue b/src/components/Description.vue
index ca1d0eb..5a6e097 100644
--- a/src/components/Description.vue
+++ b/src/components/Description.vue
@@ -1,26 +1,29 @@
 <template>
   <div class="container">
     <div class="row ">
-      <div class="col-md-6 col-sm-12 py-5">
+      <div class="col-md-6 col-sm-12 pt-5">
        
-<div class="row p-0">
+        <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 ">
-        <img :src="src" alt="" class="smalll"   />
-        <img :src="src" alt="" class="smalll"   />
-        <img :src="src" alt="" class="smalll"   />
-      </div>
+            <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="src" alt="" class="libro" />
-        <button class="button pre" @click="showModal()">
-          Previsualizar
-        </button>
+             <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>
-
-        <modal v-if="Visible" @close="closeModal()">
+     
+        <div v-if="Visible" @close="closeModal()">
           <transition name="modal">
             <div class="modal-backdrop" @click.self="closeModal()">
               <div
@@ -40,39 +43,10 @@
               </div>
             </div>
           </transition>
-        </modal>
-        <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=""
-                alt="Facebook"
-            /></a>
-            <a href="" class="img"
-              ><img
-                style="width: 45px; height: 45px"
-                src=""
-                alt="Instagram"
-            /></a>
-            <a href="" class="img"
-              ><img
-                style="width: 45px; height: 45px"
-                src=""
-                alt="Youtube"
-            /></a>
-          </div>
-
-
-
-
         </div>
+        <br /><br />   
       </div>
+     
       <div class="col-md-6 col-sm-12 py-5 titulo">
         <b>Titulo:</b>
         <p>{{ titulo }}</p>
@@ -120,9 +94,10 @@
       </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
+        <!-- <div
           class="card m-3"
           style="width: 12rem;"
           v-bind:key="libro.id"
@@ -137,19 +112,36 @@
               </p>
             </div>
           </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 axios from "axios";
-import config from "../config/config.js";
+
+
 import Title from "../components/titulo.vue";
-//import modal from "../components/previsual.vue";
+
 
 export default {
+  
   components: {
     Title
     //modal
@@ -159,24 +151,46 @@ export default {
     return {
       inventario:5,
       idLibro: "",
-      titulo: "",
-      autor: "",
-      paginas: "",
-      isbn: "",
-      edicion: "",
-      precio: "",
-      src: "",
-      version: "",
-      desc: ``,
+      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: [],
+      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
-      // "https://www.imprentanacional.go.cr/editorialdigital/libros/literatura%20infantil/el_principito_edincr.pdf"
+      //PDF: "RUTA.pdf" //nombre del archivo de previsualizacion del libro
+      PDF: "https://venus.acatlan.unam.mx/portal/PDFget/?nombrePDF=espacio_semico_ambiental.pdf"
     };
   },
   methods: {
@@ -195,91 +209,9 @@ export default {
     closeModal() {
       this.Visible = false;
     }
-  },
-  async created() {
-    let path = `${config.api}`;
-    try {
-      this.idLibro = window.localStorage.getItem("idLibro");
-      let detalle = await axios.get(
-        `${config.api}/libroDetalle?idLibro=${this.idLibro}`
-      );
-
-      let detalleDatos = await detalle.data.datos;
-
-      this.titulo = detalleDatos.titulo;
-      this.autor = detalleDatos.autor;
-      this.paginas = detalleDatos.paginas;
-      this.isbn = detalleDatos.isbn;
-      this.edicion = detalleDatos.impresion;
-      this.precio = detalleDatos.precio;
-      this.version = detalleDatos.version;
-      this.desc = detalleDatos.descripcion;
-      this.categoria = detalleDatos.categoria;
-      //let path = `${config.api}/PDFget/?nombrePDF=${nombre}`;
-      this.PDF = `${config.api}/PDFget/?nombrePDF=${detalle.data.pdfVis}`;
-      //console.log(`datos: `,detalleDatos.data );
-      console.log(`Esta es el nombred el pdf ${this.PDF}`);
-
-      window.localStorage.setItem("pdfVis", this.PDF);
-
-      if (detalleDatos.precio !== "Gratis") this.boton2 = "Comprar";
-      else this.boton2 = "Descargar";
-    } catch (error) {
-      console.log(error);
-    }
-
-    try {
-      let config = {
-        // example url
-        url: `${path}/libroImagen?idLibro=${this.idLibro}`,
-        method: "GET",
-        responseType: "blob"
-      };
-      await axios(config).then(response => {
-        let reader = new FileReader();
-        reader.readAsDataURL(response.data);
-        reader.onload = () => {
-          this.src = reader.result;
-        };
-      });
-    } catch (error) {
-      console.log(error);
-    }
-    try {
-      let similares = await axios.get(
-        `${config.api}/librosSimilares?categoria=${this.categoria}`
-      );
-      similares = similares.data.data;
-      console.log(`${similares}`);
-      for (let i = 0; i < similares.length; i++) {
-        let config = {
-          // example url
-          url: `${path}/libroImagen?idLibro=${similares[i].idLibro}`,
-          method: "GET",
-          responseType: "blob"
-        };
-        try {
-          await axios(config).then(response => {
-            let reader = new FileReader();
-            reader.readAsDataURL(response.data);
-            reader.onload = () => {
-              this.Libros.push({
-                id: similares[i].idLibro,
-                title: similares[i].titulo,
-                img: reader.result
-              });
-              //this.Libros[i].img = reader.result;
-            };
-          });
-        } catch (error) {
-          console.log(`Este libro no se encuentra: ${error}`);
-        }
-      }
-    } catch (error) {
-      console.log(`Ocurrio un error ${error}`);
-    }
   }
 };
+
 </script>
 
 <style scoped>
@@ -388,6 +320,17 @@ p {
   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;
diff --git a/src/view/Descrip.vue b/src/view/Descrip.vue
index c359d01..307a6fa 100644
--- a/src/view/Descrip.vue
+++ b/src/view/Descrip.vue
@@ -3,7 +3,7 @@
     <Header />
 
 
-    <Descrip />
+    <Description />
 
     <Footer />
   </div>
@@ -11,14 +11,14 @@
 
 <script>
 import Header from "./../components/Header.vue";
-import Descrip from "./../components/Description.vue";
+import Description from "./../components/Description.vue";
 import Footer from "./../components/Footer.vue";
 
 export default {
-  name: "App",
+
   components: {
     Header,
-    Descrip,
+    Description,
     Footer
   }
 };