[ADD] more style to product card

src/components/ProductCard.vue

@@ -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>
 
 

src/components/ProductsGrid.vue

@@ -28,6 +28,7 @@
 <style lang="sass">
     .products-grid
         width: 100%
+        height: 100%
         padding-top: 15px
         overflow-y: auto
 </style>