PortaFront/src/components/descripcion.vue

<template>
  <div class="container">
    <div class="row ">
      <div class="col-md-6 col-sm-12 py-5">
        <img :src="src" alt="" 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>
        <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>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 axios from "axios";
import config from "../config/config.js";
import Title from "../components/titulo.vue";
export default {
  components: {
    Title
  },

  data() {
    return {
      idLibro: "",
      titulo: " programing",
      autor: "HALIM",
      paginas: "300",
      isbn: "POSF-12-43",
      edicion: "Primera edicion",
      precio: "$3232.00",
      src: "",
      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"
        }
      ]
    };
  },
  async created() {
    try {
      //this.idLibro = window.localStorage.getItem("idLibro");
      this.idLibro = 1;

      let detalle = await axios.get(
        `${config.api}/libroDetalle?idLibro=${this.idLibro}`
      );

      detalle = await detalle.data.datos;

      this.titulo = detalle.titulo;
      this.autor = detalle.autor;
      this.paginas = detalle.paginas;
      this.isbn = detalle.isbn;
      this.edicion = detalle.impresion;
      this.precio = detalle.precio;
      this.version = detalle.version;
      this.desc = detalle.descripcion;
    } catch (error) {
      console.log(error);
    }

    try {
      let config = {
        // example url
        url: `http://localhost:3000/libroImagen?idLibro=${this.idLibro}`,
        method: "GET",
        responseType: "blob"
      };
      axios(config).then(response => {
        let reader = new FileReader();
        reader.readAsDataURL(response.data);
        reader.onload = () => {
          this.src = reader.result;
        };
      });
    } catch (error) {
      console.log(error);
    }
  }
};
</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: 1rem;
  text-align: left;
  color: balck;
}
p {
  margin-bottom: 0.5rem;
}

.libro {
  width: 320px;
  height: 480px;
  margin-right: auto;
  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;
  }
}
</style>