|
|
@@ -1,11 +1,23 @@
|
|
|
<template lang="pug">
|
|
|
- .purchases Hello
|
|
|
+ .purchases
|
|
|
+ form-wizard(title='' subtitle='' finishButtonText='Finalizar' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver')
|
|
|
+ tab-content(title='Cuál es su proveedor?')
|
|
|
+ h2 Proveedor
|
|
|
+ tab-content(title='Qué productos adquirirás?')
|
|
|
+ h2 Productos
|
|
|
+ tab-content(title='Cómo quieres pagar?')
|
|
|
+ h2 Pago
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { FormWizard, TabContent } from 'vue-form-wizard'
|
|
|
import { mapActions } from 'vuex'
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ FormWizard,
|
|
|
+ TabContent
|
|
|
+ },
|
|
|
methods: mapActions([
|
|
|
'initPurchase'
|
|
|
]),
|
|
|
@@ -16,5 +28,44 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="sass">
|
|
|
-
|
|
|
+ .purchases
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+ position: absolute
|
|
|
+ .vue-form-wizard
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+ padding-bottom: 0
|
|
|
+ .wizard-header
|
|
|
+ display: none
|
|
|
+ .wizard-navigation
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+ .wizard-progress-with-circle
|
|
|
+ top: 35px
|
|
|
+ .wizard-icon-circle
|
|
|
+ width: 60px
|
|
|
+ height: 60px
|
|
|
+ .wizard-tab-content
|
|
|
+ width: 100%
|
|
|
+ height: calc(100% - 82px)
|
|
|
+ padding: 0
|
|
|
+ overflow: hidden
|
|
|
+ .wizard-tab-container
|
|
|
+ width: calc(100% - 20px)
|
|
|
+ height: calc(100% - 20px)
|
|
|
+ margin: 10px
|
|
|
+ .wizard-card-footer
|
|
|
+ width: 100%
|
|
|
+ height: 50px
|
|
|
+ position: absolute
|
|
|
+ bottom: 0
|
|
|
+ .wizard-btn
|
|
|
+ width: 160px
|
|
|
+ height: 40px
|
|
|
+ border-radius: 0
|
|
|
+ box-shadow: none
|
|
|
+ border: none
|
|
|
+ &:hover, &:focus
|
|
|
+ background: #7c7bad
|
|
|
</style>
|
Gogs