descricion2

This commit is contained in:
casnet1
2020-10-27 19:06:59 -06:00
8 changed files with 484 additions and 129 deletions
+132
View File
@@ -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>
+234
View File
@@ -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>
+1 -15
View File
@@ -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;
}
+110
View File
@@ -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>
+3 -1
View File
@@ -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)
-11
View File
@@ -3,7 +3,6 @@ import VueRouter from 'vue-router'
import Home from './view/Home.vue'
import PersonalData from './view/PersonalData.vue'
import Cart from './view/Cart.vue'
import Descrip from './view/Descrip.vue'
const routes = [
@@ -21,16 +20,6 @@ const routes = [
path: '/datosPersonales',
component: PersonalData,
name: 'personalData'
},
{
path: '/cart',
component: Cart,
name: 'cart'
},
{
path: '/descripcion',
component: Descrip,
name: 'descripcion'
}
]
-99
View File
@@ -1,99 +0,0 @@
<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">
<img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
<p class="mx-4">
Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</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="">
</div>
<span class="my-4"><b>$180</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">
<img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
<p class="mx-4">
Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</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="">
</div>
<span class="my-4"><b>$180</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">2 Artículos<br>Envío</p>
<p>$980<br>Pendiente</p>
</div>
<hr style="width:100%">
<div class="d-flex justify-content-between">
<p class="mr-5">Total(IVA incluido)<br>$980</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 {
}
</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>
+4 -3
View File
@@ -9,14 +9,15 @@
</template>
<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
export default {
components: {
Header,
Footer
Footer,
}
}
</script>