componenten navShopping2

src/components/ShoppingNav.vue

@@ -1,28 +1,57 @@
 <template>
-  <div id="BotonesShopping" class="row">
- <router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <a href="#" class="btn .azul btn-primary active" role="button" aria-pressed="true">Datos Personales</a></router-link>
-<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Direcciones</a> </router-link>
-<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Envio</a> </router-link>
-<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Pago</a>  </router-link>
-
+  <div id="BotonesShopping" class="row ">
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris prueba text-white"> Datos Personales  </router-link></div>
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Direcciones  </router-link></div>
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Envio  </router-link></div>
+<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Pago  </router-link></div>
+  
   </div>
 </template>
 
 <script>
-export default {
+const $ = require('jquery')
 
+
+export default {
+  props:['currentStep'],
+data(){
+  return{
+    
+  }
+},
+methods:{
+
+ color(etapa){
+
+var result = $(".colores:first")
+
+  result.removeClass("gris").toggleClass("azul")
+
+ console.log(result)
+ console.log(etapa)
+
+ }
+
+},
+
+ created(){
+    
+this.color(this.currentStep)
+
+
+  }
 }
 </script>
 <style >
 
 .verde{
-    background-color: #29B026 ;
+    background-color: #29B026 !important;
 }
 .azul{
     background-color: #1B3D70 !important;
 }
 .gris{
-    background-color: #C4C4C4;
+    background-color: #C4C4C4 !important;
 }
 
 .navshop  a {
@@ -30,9 +59,9 @@ export default {
 
 }
 
-@media screen and (max-width:1023px ) and (min-width: 770px) {
+@media screen and (max-width:1023px ) and (min-width: 760px) {
   .navshop a {
-    font-size: .8rem !important;
+    font-size: .6rem !important;
     }
 }
 

src/view/PersonalData.vue

@@ -7,7 +7,7 @@
 <div class="row">
 
 <section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
-  <ShoppingNav></ShoppingNav>
+  <ShoppingNav currentStep=2></ShoppingNav>
 
   <form class="mt-4">
   <div class="form-group">
@@ -28,7 +28,7 @@
 
 </section>
 
-<aside class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 bg-primary">
+<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 bg-primary">
   <h3 class="text-center">status</h3>
 </aside>
 
@@ -56,5 +56,10 @@ components: {
 </script>
 
 <style scoped>
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+ }
+}
 
 </style>