12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template lang="pug">
- .product-card(@click="selectProduct({ data })")
- h2.product-title {{ data.name }}
- img.product-image(src="/web/static/src/img/placeholder.png")
- .product-price
- span Gs {{ data.list_price }}
- .product-qty
- </template>
- <script>
- import { mapActions } from 'vuex'
- export default {
- props: {
- data: {
- type: Object,
- default: () => {
- return {}
- }
- }
- },
- methods: mapActions([
- 'selectProduct'
- ])
- }
- </script>
- <style lang="sass">
- .product-card
- width: 130px
- height: 160px
- margin: 5px
- border: 1px solid #d3d3d3
- display: inline-block
- position: relative
-
- &:hover
- cursor: pointer
- .product-title
- width: 100%
- height: 30px
- font-size: 9pt
- text-align: center
- margin-top: 10px
- position: absolute
- top: 0
- .product-image
- width: 80px
- height: 80px
- margin: 0
- border: none
- position: absolute;
- top: 50%
- left: 50%
- margin-right: -50%
- transform: translate(-50%, -50%)
- .product-price
- width: 100%
- height: 30px
- padding-top: 5px
- text-align: center
- font-size: 10pt
- font-weight: bold
- background: #7c7bad
- color: #fff
- position: absolute
- bottom: 0
- </style>
|