ProductCard.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template lang="pug">
  2. .product-card(@click="selectProduct({ data })")
  3. h2.product-title {{ data.name }}
  4. img.product-image(src="/web/static/src/img/placeholder.png")
  5. .product-price
  6. span Gs {{ data.list_price }}
  7. .product-qty
  8. </template>
  9. <script>
  10. import { mapActions } from 'vuex'
  11. export default {
  12. props: {
  13. data: {
  14. type: Object,
  15. default: () => {
  16. return {}
  17. }
  18. }
  19. },
  20. methods: mapActions([
  21. 'selectProduct'
  22. ])
  23. }
  24. </script>
  25. <style lang="sass">
  26. .product-card
  27. width: 130px
  28. height: 160px
  29. margin: 5px
  30. border: 1px solid #d3d3d3
  31. display: inline-block
  32. position: relative
  33. &:hover
  34. cursor: pointer
  35. .product-title
  36. width: 100%
  37. height: 30px
  38. font-size: 9pt
  39. text-align: center
  40. margin-top: 10px
  41. position: absolute
  42. top: 0
  43. .product-image
  44. width: 80px
  45. height: 80px
  46. margin: 0
  47. border: none
  48. position: absolute;
  49. top: 50%
  50. left: 50%
  51. margin-right: -50%
  52. transform: translate(-50%, -50%)
  53. .product-price
  54. width: 100%
  55. height: 30px
  56. padding-top: 5px
  57. text-align: center
  58. font-size: 10pt
  59. font-weight: bold
  60. background: #7c7bad
  61. color: #fff
  62. position: absolute
  63. bottom: 0
  64. </style>