51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<div class="columns is-mobile is-centered">
|
|
<div class="column is-half">
|
|
<div class="block">
|
|
<tabs-secciones
|
|
:tabs="tabs"
|
|
:tabInicial="tabActiva"
|
|
:clases="['is-centered', 'is-fullwidth']">
|
|
</tabs-secciones>
|
|
<div class="block pb-6" id="faltantes-seccion"
|
|
:class="seccionActiva === 'faltantes-seccion' ? 'is-active' : 'is-hidden'">
|
|
<p>Faltantes</p>
|
|
</div>
|
|
<div class="block pb-6" id="sobrantes-seccion"
|
|
:class="seccionActiva === 'sobrantes-seccion' ? 'is-active' : 'is-hidden'">
|
|
<p>Sobrantes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import TabsSecciones from "../comunes/TabsSecciones.vue";
|
|
|
|
export default {
|
|
name: "FaltantesYSobrantes",
|
|
components: {
|
|
TabsSecciones,
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [{ id: "faltantes", nombre: "Faltantes" },
|
|
{ id: "sobrantes", nombre: "Sobrantes" }],
|
|
tabActiva: "faltantes",
|
|
seccionActiva: "faltantes-seccion",
|
|
};
|
|
},
|
|
methods: {
|
|
setSeccionActiva(tabId) {
|
|
this.tabActiva = tabId;
|
|
this.seccionActiva = tabId + "-seccion";
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|