[ADD] styles for summary display

src/components/SummaryDisplay.vue

@@ -1,7 +1,40 @@
 <template lang="pug">
     .summary
-        h2 {{ getTotal() }}
-        //- h3 {{ customer.name }}
+        table.ticket
+            thead.ticket-header
+                tr
+                    th(colspan="4")
+                        h3.ticket-company Compañía
+            tbody.ticket-content
+                tr.ticket-item.ticket-item-header
+                    td Producto
+                    td Precio unitario
+                    td Cantidad
+                    td Subtotal
+                tr.ticket-item
+                    td Producto 001
+                    td 5000
+                    td 1
+                    td 5000
+                tr.ticket-item
+                    td Producto 002
+                    td 6000
+                    td 2
+                    td 12000
+                tr.ticket-item
+                    td Producto 003
+                    td 4500
+                    td 1
+                    td 4500
+                tr.ticket-item
+                    td Producto 004 
+                    td 3200
+                    td 1
+                    td 3200
+            tfoot.ticket-footer
+                tr
+                    td(colspan="2") Cliente
+                    td(colspan="2") Ocasional
 </template>
 
 <script>
@@ -29,4 +62,15 @@
     .summary
         width: 100%
         height: 100%
+        display: flex
+        
+        .ticket
+            width: 350px
+            height: 450px
+            border: 1px solid #d3d3d3
+            margin: auto
+            font-size: 8pt
+            // background: linear-gradient(#BCED91 49%, transparent 49%),linear-gradient(to top right, white 33%, transparent 33%) 0 50%,white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%
+            // background-repeat: repeat-x
+            // background-size: 1px 100%, 40px 40px, 40px 40px
 </style>