From 1cc6644c95b5da50b4bffbdfdf4713ef78f0961a Mon Sep 17 00:00:00 2001
From: KIKIN <enrique.mg.cd@gmail.com>
Date: Thu, 17 Sep 2020 19:06:39 -0500
Subject: [PATCH] cart page, ready

---
 ejemplo.txt       |  0
 src/routes.js     |  6 +++
 src/view/Cart.vue | 99 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 105 insertions(+)
 delete mode 100644 ejemplo.txt
 create mode 100644 src/view/Cart.vue

diff --git a/ejemplo.txt b/ejemplo.txt
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes.js b/src/routes.js
index d4bf0a4..71e35e1 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
+import Cart from './view/Cart.vue'
 
 const routes = [
     {
@@ -14,6 +15,11 @@ const routes = [
         component: Home,
         name: 'home'
     },
+    {
+        path: '/cart',
+        component: Cart,
+        name: 'cart'
+    }
 ]
 
 Vue.use(VueRouter)
diff --git a/src/view/Cart.vue b/src/view/Cart.vue
new file mode 100644
index 0000000..a855054
--- /dev/null
+++ b/src/view/Cart.vue
@@ -0,0 +1,99 @@
+<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>
\ No newline at end of file