1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <template lang="pug">
- .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'
- ]),
- mounted() {
- this.initPurchase()
- }
- }
- </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>
|