casnet1
71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
<template>
|
|
<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>
|
|
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 !important;
|
|
}
|
|
.azul{
|
|
background-color: #1B3D70 !important;
|
|
}
|
|
.gris{
|
|
background-color: #C4C4C4 !important;
|
|
}
|
|
|
|
.navshop a {
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
@media screen and (max-width:1023px ) and (min-width: 760px) {
|
|
.navshop a {
|
|
font-size: .6rem !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|