cart comp
This commit is contained in:
@@ -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>
|
||||||
@@ -2,7 +2,6 @@ import Vue from 'vue'
|
|||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
import Home from './view/Home.vue'
|
import Home from './view/Home.vue'
|
||||||
import Cart from './view/Cart.vue'
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@@ -15,11 +14,6 @@ const routes = [
|
|||||||
component: Home,
|
component: Home,
|
||||||
name: 'home'
|
name: 'home'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/cart',
|
|
||||||
component: Cart,
|
|
||||||
name: 'cart'
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|||||||
@@ -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>
|
|
||||||
+6
-1
@@ -5,8 +5,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user