|
@@ -1,15 +1,22 @@
|
|
|
<template lang="pug">
|
|
|
.product-card
|
|
|
- .product-title
|
|
|
- .product-image
|
|
|
+ h2.product-title {{ data.name }}
|
|
|
+ img.product-image(src="/web/static/src/img/placeholder.png")
|
|
|
.product-price
|
|
|
- span Gs 5000
|
|
|
+ span Gs {{ data.list_price }}
|
|
|
.product-qty
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -19,16 +26,39 @@
|
|
|
height: 160px
|
|
|
border: 1px solid #d3d3d3
|
|
|
display: inline-block
|
|
|
+ position: relative
|
|
|
+
|
|
|
+ .product-title
|
|
|
+ width: 100%
|
|
|
+ height: 30px
|
|
|
+ font-size: 12pt
|
|
|
+ text-align: center
|
|
|
+ margin-top: 12px
|
|
|
+ position: absolute
|
|
|
+ top: 0
|
|
|
+
|
|
|
+ .product-image
|
|
|
+ width: 85px
|
|
|
+ height: 85px
|
|
|
+ margin: 0
|
|
|
+ border: none
|
|
|
+ position: absolute;
|
|
|
+ top: 50%
|
|
|
+ left: 50%
|
|
|
+ margin-right: -50%
|
|
|
+ transform: translate(-50%, -50%)
|
|
|
|
|
|
.product-price
|
|
|
width: 100%
|
|
|
- height: 45px
|
|
|
- padding-top: 10px
|
|
|
+ height: 30px
|
|
|
+ padding-top: 5px
|
|
|
text-align: center
|
|
|
font-size: 12pt
|
|
|
font-weight: bold
|
|
|
background: #2196f3
|
|
|
color: #fff
|
|
|
+ position: absolute
|
|
|
+ bottom: 0
|
|
|
</style>
|
|
|
|
|
|
|