123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <template lang="pug">
- .product-card(@click='selectProduct(item)')
- h2.product-name {{ item.name }}
- img.product-image(:src="item.imageMedium ? 'data:image/png;base64,' + item.imageMedium : '/web/static/src/img/placeholder.png'")
- .product-price
- span {{ getPrice() }}
- </template>
- <script>
- import { mapActions } from 'vuex'
- export default {
- props: {
- item: {
- type: Object,
- default: {}
- }
- },
- methods: {
- getPrice() {
- return this.item.listPrice
- },
- ...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-name
- 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>
|