App.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template lang="pug">
  2. .purchases
  3. form-wizard(title='' subtitle='' finishButtonText='Finalizar' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver')
  4. tab-content(title='Cuál es su proveedor?')
  5. h2 Proveedor
  6. tab-content(title='Qué productos adquirirás?')
  7. h2 Productos
  8. tab-content(title='Cómo quieres pagar?')
  9. h2 Pago
  10. </template>
  11. <script>
  12. import { FormWizard, TabContent } from 'vue-form-wizard'
  13. import { mapActions } from 'vuex'
  14. export default {
  15. components: {
  16. FormWizard,
  17. TabContent
  18. },
  19. methods: mapActions([
  20. 'initPurchase'
  21. ]),
  22. mounted() {
  23. this.initPurchase()
  24. }
  25. }
  26. </script>
  27. <style lang="sass">
  28. .purchases
  29. width: 100%
  30. height: 100%
  31. position: absolute
  32. .vue-form-wizard
  33. width: 100%
  34. height: 100%
  35. padding-bottom: 0
  36. .wizard-header
  37. display: none
  38. .wizard-navigation
  39. width: 100%
  40. height: 100%
  41. .wizard-progress-with-circle
  42. top: 35px
  43. .wizard-icon-circle
  44. width: 60px
  45. height: 60px
  46. .wizard-tab-content
  47. width: 100%
  48. height: calc(100% - 82px)
  49. padding: 0
  50. overflow: hidden
  51. .wizard-tab-container
  52. width: calc(100% - 20px)
  53. height: calc(100% - 20px)
  54. margin: 10px
  55. .wizard-card-footer
  56. width: 100%
  57. height: 50px
  58. position: absolute
  59. bottom: 0
  60. .wizard-btn
  61. width: 160px
  62. height: 40px
  63. border-radius: 0
  64. box-shadow: none
  65. border: none
  66. &:hover, &:focus
  67. background: #7c7bad
  68. </style>