danielGe/TiendaFront
2
0
Fork 0
Code Issues Pull Requests 3 Releases Wiki Activity

componenten navShopping2

Browse Source
This commit is contained in:
casnet1
2020-09-23 22:16:16 -05:00
parent 77f7ffd5f6
commit 98604916c9
2 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ShoppingNav.vue
+40 -11
View File
@@ -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;
}
}