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;
}
}
src/view/PersonalData.vue
+7 -2
View File
@@ -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>