arreglo de conflictos

src/components/Directions.vue

@@ -1,4 +1,8 @@
 <template>
+ <div>
+ <div>
+     <h1>Direcciones</h1>
+ </div>
   <div>
 
 <form class="mt-4" role="form" data-toggle="validator" >
@@ -182,7 +186,7 @@
   </div>
 </form>
 </div>
-
+</div>
 </template>
 
 <script>
@@ -229,6 +233,3 @@ export default {
 }
 </script>
 
-<style>
-
-</style>

src/components/Header.vue

@@ -25,23 +25,25 @@
                 </div>
             
             </div>
-            <MainMenu></MainMenu>
-
-
+            
         </header>
 
     </div>
 </template>
 
 <script>
-import MainMenu from './MainMenu'
 
 export default {
-components: {
-        MainMenu,
-
+    data() {
+        return {
+            
+        }
+    },
+    methods: {
+       
     }
 }
+
 </script>
 <style scoped>
 

src/components/MainMenu.vue

@@ -12,26 +12,24 @@
                         :backdrop-variant="variant"
                         backdrop
                         shadow
-                        bg-variant="white" text-variant="primary"
                         >
-                            <div class="px-3 mt-3 pt-2 d-flex align-items-center profi-main-text-sty">
+                            <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>
-                        <hr class="mx-3 mb-3">
                             
-                            <h6 class="px-3 pt-4">MAIN LOREM IPSUM</h6>
-                            <hr class="mx-3 mb-2">
+                            <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 mt-5">CONFIGURACIÓN</h6>
-                            <hr class="mx-3 mb-2">
+                            <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>
@@ -91,14 +89,11 @@ export default {
     color: rgba(255, 255, 255, 0.7)!important;
 }
 .profi-main-text-sty, .profi-main-text-sty a {
-    color: #212529!important;
+    color: black!important;
 }
 .profi-main-text-sty a:hover{
     color:gray!important;
     transition: 0.2s;
-}
-.b-sidebar-header-custom {
-    
 }
 ul li {
     list-style: none;
@@ -106,7 +101,7 @@ ul li {
 }
 ul li a {
     text-decoration: none;
-    color: #212529!important;
+    color: black!important;
 }
 ul li a:hover {
     color: rgba(0, 0, 0, 0.6)!important;

src/routes.js

@@ -3,6 +3,10 @@ import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
 import PersonalData from './view/PersonalData.vue'
+import Cart from './view/Cart.vue'
+import Pago from './view/Pago.vue'
+import Envio from './view/Envio.vue'
+import Direccion from './view/Direccion'
 
 const routes = [
     {
@@ -19,6 +23,26 @@ const routes = [
         path: '/datosPersonales',
         component: PersonalData,
         name: 'personalData'
+    },
+    {
+        path: '/cart',
+        component: Cart,
+        name: 'cart'
+    },
+    {
+        path: '/pago',
+        component: Pago,
+        name: 'pago'
+    },
+    {
+        path: '/envio',
+        component: Envio,
+        name: 'envio'
+    },
+    {
+        path: '/direcciones',
+        component: Direccion,
+        name: 'direcciones'
     }
 ]
 

src/view/Direccion.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav currentStep=2></ShoppingNav>
+
+  <Directions></Directions>
+
+
+</section>
+
+<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
+  <!-- <h3 class="text-center">status</h3> -->
+   <ShoppingStatus></ShoppingStatus> 
+</aside>
+
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+import ShoppingStatus from '../components/ShoppingStatus'
+import Directions from '../components/Directions'
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav,
+        ShoppingStatus,
+        Directions
+    }
+}
+</script>
+
+<style scoped>
+#CompraStatus{
+ padding: 0;
+}
+
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+  
+ }
+}
+
+</style>

src/view/Envio.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav currentStep=2></ShoppingNav>
+
+  <ShippingSection></ShippingSection>
+
+</section>
+
+<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
+  <!-- <h3 class="text-center">status</h3> -->
+   <ShoppingStatus></ShoppingStatus> 
+</aside>
+
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+import ShoppingStatus from '../components/ShoppingStatus'
+import ShippingSection from '../components/ShippingSection'
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav,
+        ShoppingStatus,
+        ShippingSection
+    }
+}
+</script>
+
+<style scoped>
+#CompraStatus{
+ padding: 0;
+}
+
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+  
+ }
+}
+
+</style>

src/view/Pago.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav currentStep=2></ShoppingNav>
+
+  <Payment></Payment>
+
+
+</section>
+
+<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
+  <!-- <h3 class="text-center">status</h3> -->
+   <ShoppingStatus></ShoppingStatus> 
+</aside>
+
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+import ShoppingStatus from '../components/ShoppingStatus'
+import Payment from '../components/Payment'
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav,
+        ShoppingStatus,
+        Payment
+    }
+}
+</script>
+
+<style scoped>
+#CompraStatus{
+ padding: 0;
+}
+
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+  
+ }
+}
+
+</style>