App.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template lang="pug">
  2. .app
  3. .odoo
  4. img(src="/vue_module/static/img/odoo.png")
  5. p Odoo
  6. span +
  7. .vue
  8. img(src="/vue_module/static/img/vue.png")
  9. p Vue.js
  10. span +
  11. .webpack
  12. img(src="/vue_module/static/img/webpack.png")
  13. p Webpack
  14. span +
  15. .babel
  16. img(src="/vue_module/static/img/babel.png")
  17. p Babel
  18. span +
  19. .yarn
  20. img(src="/vue_module/static/img/yarn.png")
  21. p Yarn
  22. span =
  23. i(class="fa fa-heart")
  24. </template>
  25. <script>
  26. export default {
  27. methods: {
  28. hola() {
  29. console.log('Hola')
  30. }
  31. }
  32. }
  33. </script>
  34. <style lang="sass">
  35. =animations()
  36. animation: 2s heart infinite
  37. @keyframes heart
  38. 0%
  39. transform: scale(1)
  40. 25%
  41. transform: scale(1.15)
  42. 50%
  43. transform: scale(1)
  44. 75%
  45. transform: scale(1.15)
  46. @-webkit-keyframes heart
  47. 0%
  48. transform: scale(1)
  49. 25%
  50. transform: scale(1.15)
  51. 50%
  52. transform: scale(1)
  53. 75%
  54. transform: scale(1.15)
  55. @-moz-keyframes heart
  56. 0%
  57. transform: scale(1)
  58. 25%
  59. transform: scale(1.15)
  60. 50%
  61. transform: scale(1)
  62. 75%
  63. transform: scale(1.15)
  64. =hand-pointer()
  65. cursor: pointer
  66. -webkit-cursor: pointer
  67. -moz-cursor: pointer
  68. .app
  69. width: 100%
  70. height: 100%
  71. padding: 15px
  72. display: flex
  73. align-items: center
  74. justify-content: center
  75. div
  76. margin: 0 20px
  77. transition-duration: 0.5s
  78. +hand-pointer()
  79. img
  80. height: 80px
  81. p
  82. text-align: center
  83. font-size: 18pt
  84. font-weight: bold
  85. &:hover
  86. transform: scale(1.15)
  87. span
  88. font-size: 48pt
  89. i
  90. font-size: 65pt
  91. color: #f44336
  92. +animations()
  93. </style>