Compare commits
3 Commits
mainMenu
...
description
| Author | SHA1 | Date | |
|---|---|---|---|
 casnet1
|
ac24a836cb | ||
|
casnet1
|
325ab92f16 | ||
|
casnet1
|
b9e7cf483b |
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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;
|
||||||
@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
|
|||||||
import Home from './view/Home.vue'
|
import Home from './view/Home.vue'
|
||||||
import PersonalData from './view/PersonalData.vue'
|
import PersonalData from './view/PersonalData.vue'
|
||||||
|
|
||||||
|
import Descrip from './view/Descrip.vue'
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
|
|||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user