descricion2

Reviewed-on: #6

package-lock.json

@@ -1392,16 +1392,6 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
       "dev": true
     },
-    "@types/mini-css-extract-plugin": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/webpack": "*"
-      }
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -10978,35 +10968,31 @@
       }
     },
     "vue-loader-v16": {
-      "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==",
+      "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": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
+        "chalk": "^4.1.0",
         "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
+        "loader-utils": "^2.0.0"
       },
       "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==",
+          "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": {
-            "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-          "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==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -11038,12 +11024,17 @@
           "dev": true,
           "optional": true
         },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+        "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
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
         },
         "supports-color": {
           "version": "7.2.0",

src/components/Cart.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="my-5">
+        <div class="container d-flex flex-wrap justify-content-between">
+            <div class="cont-resum-shop py-2 mb-4">
+                <h2 class="ml-3">Carrito</h2>
+                <hr>
+                
+                    <div class="d-flex justify-content-between mx-4 my-4">
+                        <div class="d-flex">
+                            <!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
+                            <img v-bind:src="infoResume[0].img" alt="Logo" style="height: 150px">
+                            <p class="mx-4">
+                                {{productInfo[0].descripcion}}<br><span class="price-style"><b>${{productInfo[0].precio}}</b></span>
+                            </p>
+                        </div>
+                        <div class="d-flex flex-wrap flex-column align-items-center">
+                            <div>
+                                <input type="number" class="inp-number p-1 d-inline-block" name="" id="" v-bind:value="infoResume[0].cantidad">
+                            </div>
+                            <span class="my-4"><b>${{infoResume[0].cantidad * productInfo[0].precio}}</b></span>
+                            <div>
+                                <a href="#" class="text-dark">
+                                    <font-awesome-icon icon="trash" class=""/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="d-flex justify-content-between mx-4 my-4">
+                        <div class="d-flex">
+                            <!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
+                            <img v-bind:src="infoResume[1].img" alt="Logo" style="height: 150px">
+                            <p class="mx-4">
+                                {{productInfo[1].descripcion}}<br><span class="price-style"><b>${{productInfo[1].precio}}</b></span>
+                            </p>
+                        </div>
+                        <div class="d-flex flex-wrap flex-column align-items-center">
+                            <div>
+                                <input type="number" class="inp-number p-1 d-inline-block" name="" id="" v-bind:value="infoResume[1].cantidad">
+                            </div>
+                            <span class="my-4"><b>${{infoResume[1].cantidad * productInfo[1].precio}}</b></span>
+                            <div>
+                                <a href="#" class="text-dark">
+                                    <font-awesome-icon icon="trash" class=""/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+
+            </div>
+            <div class="g-sec bg-light py-4 px-4 d-flex flex-column align-self-start align-items-center" style="">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">{{infoResume[0].cantidad}} Artículos<br>Envío</p>
+                    <p>${{infoResume[0].cantidad * productInfo[0].precio}}<br>{{infoResume[0].envioStatus}}</p>
+                </div>
+                <hr style="width:100%">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">Total(IVA incluido)<br>${{infoResume[0].cantidad * productInfo[0].precio}}</p>
+                </div>
+                <hr style="width:100%">
+                <button class="btn btn-primary mx-auto"><b>IR A LA CAJA</b></button>
+            </div>
+        </div>
+        <div class="container mt-3">
+            <div class="d-inline-block">
+                <a href="#">
+                    <p>
+                        Continuar la compra
+                    </p>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            productInfo: [
+                {
+                    id: 1,
+                    descripcion: 'Invitacion al psicoanálisis y lazos con la política, Lorem ipsum',
+                    precio: 10
+                },
+                 {
+                    id: 2,
+                    descripcion: 'Invitacion al derrocamiento de la burguesía, camarada.',
+                    precio: 2
+                }
+            ],
+            infoResume:[
+                    {
+                        cantidad: 4,
+                        envioStatus: 'pendiente',
+                        img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg',
+                    },
+                    {
+                        cantidad: 17,
+                        envioStatus: 'pendiente',
+                        img: 'https://images-na.ssl-images-amazon.com/images/I/51vHCno0a4L._SY291_BO1,204,203,200_QL40_ML2_.jpg',
+                    }
+                ],
+        }
+    }
+}
+</script>
+
+<style>
+.cont-resum-shop {
+    /* background-color: skyblue; */
+    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    /* border-radius: 5px; */
+    /* font-size: 15px; */
+}
+.inp-number {
+    width: 55px;
+    border-radius: 5px;
+    border: 0.3px solid lightgray;
+}
+.price-style {
+    color: #6C59FE;
+}
+.g-sec {
+    -webkit-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    -moz-box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+    box-shadow: -3px 3px 6px 0.2px rgba(0,0,0,0.2);
+}
+</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/Directions.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+
+<form class="mt-4" role="form" data-toggle="validator" >
+  
+  <div class="my-3">
+  
+  
+  <div class="row tipoComprobante">
+  <div class="form-check col-4 ">
+  <label class="form-check-label" >
+    Tipo de Comprobante:
+  </label>
+</div>
+<div class="form-check col-4">
+  <input class="form-check-input" type="radio"  id="exampleRadios1" v-model="select" value="ticket">
+  <label class="form-check-label" for="exampleRadios1">
+    Ticket
+  </label>
+</div>
+<div class="form-check col-4">
+  <input class="form-check-input" type="radio"  id="exampleRadios2" v-model="select" value="factura">
+  <label class="form-check-label" for="exampleRadios2">
+   Factura
+  </label>
+</div>
+</div>
+
+
+<div class=" datosFactura" v-if="select == 'factura'">
+    <h3 class="my-5">Direccion de Facturacion</h3>
+    <div class="form-group">
+    <label for="InputNombre1">RFC</label>
+    <input type="text" class="form-control" id="InputRFC"   v-model="Facturacion.RFC">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Nombres</label>
+    <input type="text" class="form-control" id="InputNombres"   v-model="Facturacion.nombres">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Apellidos</label>
+    <input type="email" class="form-control" id="InputApellidos"   v-model="Facturacion.apellidos">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Empresa</label>
+    <input type="text" class="form-control" id="InputEmpresa"   v-model="Facturacion.empresa">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">calle</label>
+    <input type="text" class="form-control" id="InputCalle"   v-model="Facturacion.calle">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Numero Exterior</label>
+    <input type="email" class="form-control" id="InputExterior"   v-model="Facturacion.exterior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Numero Interior</label>
+    <input type="text" class="form-control" id="InputInterior"   v-model="Facturacion.interior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Colonia</label>
+    <input type="text" class="form-control" id="InputColonia"   v-model="Facturacion.colonia">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Provincia o estado</label>
+    <input type="email" class="form-control" id="InputEstado"   v-model="Facturacion.estado">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Pais</label>
+    <input type="text" class="form-control" id="InputPais"   v-model="Facturacion.pais">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Telefono</label>
+    <input type="text" class="form-control" id="InputTelefono"   v-model="Facturacion.telefono">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Correo</label>
+    <input type="email" class="form-control" id="InputCorreo"   v-model="Facturacion.correo">
+  </div>
+</div>
+
+
+
+<div class="row direccionIgual" v-if="select == 'factura'">
+  <div class="form-check col-8 ">
+  <label class="form-check-label" >
+    ¿La direccion de facturacion es la misma a la de envio?
+  </label>
+</div>
+<div class="form-check col-2">
+  <input class="form-check-input" type="radio"  id="exampleRadios3" v-model="sameDirection" value="true">
+  <label class="form-check-label" for="exampleRadios3">
+    Si
+  </label>
+</div>
+<div class="form-check col-2">
+  <input class="form-check-input" type="radio"  id="exampleRadios4" v-model="sameDirection" value="false">
+  <label class="form-check-label" for="exampleRadios4">
+   No
+  </label>
+</div>
+</div>
+
+
+
+<div class=" datosEnvio" v-if="select == 'ticket' || (sameDirection == 'false' && select == 'factura')">
+    <h3 class="my-5">Direccion de Envio</h3>
+    
+
+  <div class="form-group">
+    <label for="InputApellido1">Nombres</label>
+    <input type="text" class="form-control" id="InputNombres2"   v-model="Envio.nombres">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Apellidos</label>
+    <input type="email" class="form-control" id="InputApellidos2"   v-model="Envio.apellidos">
+  </div>
+
+ <div class="form-group">
+    <label for="InputCorreo1">Correo</label>
+    <input type="email" class="form-control" id="InputCorreo2"   v-model="Envio.correo">
+  </div>
+
+
+  <div class="form-group">
+    <label for="InputApellido1">calle</label>
+    <input type="text" class="form-control" id="InputCalle2"   v-model="Envio.calle">
+  </div>
+
+  <div class="form-group">
+    <label for="InputCorreo1">Numero Exterior</label>
+    <input type="email" class="form-control" id="InputExterior2"   v-model="Envio.exterior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Numero Interior</label>
+    <input type="text" class="form-control" id="InputInterior2"   v-model="Envio.interior">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Colonia</label>
+    <input type="text" class="form-control" id="InputColonia2"   v-model="Envio.colonia">
+  </div>
+
+<div class="form-group">
+    <label for="InputApellido1">Codigo Postal</label>   
+    <input type="text" class="form-control" id="InputPostal"   v-model="Envio.postal">
+  </div>
+
+
+  <div class="form-group">
+    <label for="InputCorreo1">Provincia o estado</label>
+    <input type="email" class="form-control" id="InputEstado2"   v-model="Envio.estado">
+  </div>
+
+  <div class="form-group">
+    <label for="InputNombre1">Pais</label>
+    <input type="text" class="form-control" id="InputPais2"   v-model="Envio.pais">
+  </div>
+
+  <div class="form-group">
+    <label for="InputApellido1">Telefono</label>
+    <input type="text" class="form-control" id="InputTelefono2"   v-model="Envio.telefono">
+  </div>
+  
+</div>
+
+
+
+  </div>
+</form>
+</div>
+
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            sameDirection:'',
+            select:'',
+
+            Facturacion:
+                {
+                    RFC:'',
+                    nombres:'',
+                    apellidos:'',
+                    empresa:'',
+                    calle:'',
+                    exterior:'',
+                    interior:'',
+                    colonia:'',
+                    estado:'',
+                    pais:'',
+                    telefono:'',
+                    correo:''
+
+                },
+            Envio:{
+                RFC:'',
+                    nombres:'',
+                    apellidos:'',
+                    postal:'',
+                    calle:'',
+                    exterior:'',
+                    interior:'',
+                    colonia:'',
+                    estado:'',
+                    pais:'',
+                    telefono:'',
+                    correo:''
+            }    
+            
+        }
+    }
+
+}
+</script>
+
+<style>
+
+</style>

src/components/Header.vue

@@ -27,18 +27,7 @@
             </div>
             
         </header>
-        <div class="header-f" >
-            <div class="container d-flex py-2 align-items-center justify-content-between">
-                <div>
-                    <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
-                </div>
-                <div>
-                    <a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
-                        <font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
-                    </a>
-                </div>
-            </div>
-        </div>
+
     </div>
 </template>
 
@@ -63,9 +52,6 @@ export default {
     background: #1b3d70;
 }
 
-.header-f {
-    background-color: #bb8800;
-}
 .cart-icon-custom-properties {
     font-size: 20px;
 }

src/components/MainMenu.vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <div class="header-f" >
+            <div class="container d-flex py-2 align-items-center justify-content-between">
+                <div class="d-flex">
+                    <div>
+                        <b-button v-b-toggle.sidebar-backdrop class="mr-3 menu-toggle-sty"><font-awesome-icon icon="bars"/></b-button>
+
+                        <b-sidebar
+                        id="sidebar-backdrop"
+                        title="Menú"
+                        :backdrop-variant="variant"
+                        backdrop
+                        shadow
+                        >
+                            <div class="px-3 mt-3 py-2 d-flex align-items-center profi-main-text-sty">
+                                <font-awesome-icon icon="user" class="mr-2" />        
+                                <a href="#" class="text-decoration-none">
+                                    <h5 class="my-auto">Iniciar sesión</h5>
+                                </a>
+                            </div>
+                            
+                            <h6 class="px-3 pt-4 mb-4">MAIN LOREM IPSUM</h6>
+
+                            <ul class="px-3">
+                                <li v-for="item in items" :key="item.mensaje">
+                                    <a href="#"> {{ item.mensaje }} </a>
+                                </li>
+                            </ul>
+
+                            <h6 class="px-3 my-4">CONFIGURACIÓN</h6>
+
+                            <ul class="px-3">
+                                <li v-for="item in configuracion" :key="item.mensaje">
+                                    <a href="#"> {{ item.mensaje }} </a>
+                                </li>
+                            </ul>
+                        </b-sidebar>
+                    </div>
+                    <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
+                </div>
+                <div>
+                    <a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
+                        <font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            items: [
+                { mensaje: 'Investigación Aplicada y Multidisciplinaria' },
+                { mensaje: 'Ciencias Socioeconómicas' }
+            ],
+            configuracion: [
+                { mensaje: 'Mi cuenta' },
+                { mensaje: 'Ayuda' },
+                { mensaje: 'Salir' },
+            ]
+        }
+    },
+    methods: {
+       
+    }
+}
+
+</script>
+<style scoped>
+
+.header-f {
+    background-color: #bb8800;
+}
+.cart-icon-custom-properties {
+    font-size: 20px;
+}
+.menu-toggle-sty {
+    background-color: transparent!important;
+    border: 1px solid white!important;
+    color: white!important;
+}
+.menu-toggle-sty:hover {
+    border: 1px solid rgba(255, 255, 255, 0.7)!important;
+    color: rgba(255, 255, 255, 0.7)!important;
+}
+.profi-main-text-sty, .profi-main-text-sty a {
+    color: black!important;
+}
+.profi-main-text-sty a:hover{
+    color:gray!important;
+    transition: 0.2s;
+}
+ul li {
+    list-style: none;
+    margin: 10px auto;
+}
+ul li a {
+    text-decoration: none;
+    color: black!important;
+}
+ul li a:hover {
+    color: rgba(0, 0, 0, 0.6)!important;
+    transition: 0.2s;
+}
+</style>

src/components/Payment.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+        <h3 class="my-3">Pago</h3>
+
+        <form class="form-check">
+            
+
+            <div class="form-check">
+  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="LineaUnam"   v-model="metodo">
+  <label class="form-check-label" for="exampleRadios1">
+   Pago en linea UNAM
+  </label>
+                </div>
+
+
+                <div class="form-check">
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="Ficha" v-model="metodo">
+                <label class="form-check-label" for="exampleRadios2">
+                  Ficha de Deposito
+                </label>
+
+                </div>
+                            
+            
+            <div class="form-check">
+             <input class="form-check-input" type="checkbox" v-model="terminos" id="defaultCheck1">
+  <label class="form-check-label" for="defaultCheck1">
+   Estoy deacuerdo con los Terminos de servicio y los acepto sin reservas
+  </label>
+            </div>
+
+  <button type="button"  class="btn btn-primary ml-4">Pedido con obligacion de pago</button>
+
+            <div v-if="(metodo)  != '' && (terminos) == true " class="d-flex justify-content-right">
+  
+  <button type="submit" @click="NextStep()" class="btn btn-success">continuar</button>
+</div>
+        </form>
+
+      
+
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            metodo:'',
+            terminos:false
+        }
+    }
+
+}
+</script>
+
+<style>
+.form-check div{
+    margin: 1rem 0;
+}
+
+</style>

src/components/ShippingSection.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+      <h3 class="my-3">Metodo de Envio</h3>
+    <div class="row">
+      <div class="col-12">
+<div class="table-responsive">
+        <table class="table table-hover">
+
+  <tbody>
+    <tr>
+      <th scope="row"> 
+        <div class="form-check">
+  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
+        </div>
+      </th>
+      <td class="d-flex align-items-center">
+        <img src='../assets/DHL-Logo.png' width="70px" alt="">
+        <p class="mb-0">DHL Express</p>
+      </td>
+      <td>{{tiempo}} dias</td>
+      <td>${{envio}} IVA incl.</td>
+    </tr>
+   
+  </tbody>
+</table>
+</div>
+
+      </div>
+    </div>
+    
+    <div class="row">
+
+      <div class="col-12 mt-4">
+<p>Si deseas dejarnos un comentaro acerca de su pedido, por favor escribalo a continuacion</p>
+<div class="container">
+        <div class="comment">
+            <textarea class="textinput" placeholder="Comentario"></textarea>
+        </div>
+    </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      envio:'232.00',
+      tiempo:'4'
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.container {
+            max-width: 820px;
+            margin: 0px auto;
+           
+        }
+
+        .comment {
+            float: left;
+            width: 100%;
+            height: auto;
+        }
+
+        .commenter {
+            float: left;
+        }
+
+        .commenter img {
+            width: 35px;
+            height: 35px;
+        }
+
+        .comment-text-area {
+            float: left;
+            width: 100%;
+            height: auto;
+        }
+
+        .textinput {
+            float: left;
+            width: 100%;
+            min-height: 75px;
+            outline: none;
+            resize: none;
+            border: 1px solid grey;
+        }
+</style>

src/components/ShoppingStatus.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
       
-    <div class="card">
+    <div class="card sombra">
       <div class="card-body">
        
 
@@ -98,6 +98,11 @@ export default {
   list-style: none;
   padding-left: 0%;
 }
+.sombra{
+  -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
+-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
+box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
+}
 .doradoColor{
   background-color: #bb8800 !important;
 }

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/icons.js

@@ -11,7 +11,8 @@ import {
     faShoppingCart,
     faTrash,
     faMapMarkerAlt,
-    faPhoneAlt
+    faPhoneAlt,
+    faBars
 } from '@fortawesome/free-solid-svg-icons'
 
 
@@ -27,4 +28,5 @@ library.add(faShoppingCart)
 library.add(faTrash)
 library.add(faMapMarkerAlt)
 library.add(faPhoneAlt)
+library.add(faBars)
 

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

@@ -9,14 +9,15 @@
 </template>
 
 <script>
+
 import Header from '../components/Header'
 import Footer from '../components/Footer'
-
-
+        
 export default {
 components: {
         Header,
-        Footer
+        Footer,
+
     }
 }
 </script>