eiru_pos/src/components/SummaryDisplay.vue

<template lang="pug">
    .summary
        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>
    import { mapGetters } from 'vuex'

    export default {
        computed: mapGetters({
            total: 'getTotal',
            customer: 'getSelectedCustomer',
            hasSelectedCustomer: 'hasSelectedCustomer'
        }),
        methods: {
            getTotal() {
                return accounting.formatMoney(this.total, '₲', 0, '.', ',')
            },
            getCustomer() {
                return this.hasSelectedCustomer ? this.customer : {}
            }
        }
    
    }
</script>

<style lang="sass">
    .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>