cupton estilo

cupton.vue

<template>
    <div>
        <table
            class="printer-ticket"
        >
            <thead>
                <tr>
                    <th
                        class="title"
                        colspan="3"
                    >
                        Restaurant X
                    </th>
                </tr>
                <tr>
                    <th colspan="3">
                        17/11/2015 - 11:57:52
                    </th>
                </tr>
                <tr>
                    <th colspan="3">
                        Nome do cliente <br>
                        000.000.000-00
                    </th>
                </tr>
                <tr>
                    <th
                        class="ttu"
                        colspan="3"
                    >
                        <b>Cupom não fiscal</b>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="top">
                    <td colspan="3">
                        Doce de brigadeiro
                    </td>
                </tr>
                <tr>
                    <td>R$7,99</td>
                    <td>2.0</td>
                    <td>R$15,98</td>
                </tr>
                <tr>
                    <td colspan="3">
                        Opcional Adicicional: grande
                    </td>
                </tr>
                <tr>
                    <td>R$0,33</td>
                    <td>2.0</td>
                    <td>R$0,66</td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="sup ttu p--0">
                    <td colspan="3">
                        <b>Totais</b>
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Sub-total
                    </td>
                    <td align="right">
                        R$43,60
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Taxa de serviço
                    </td>
                    <td align="right">
                        R$4,60
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Desconto
                    </td>
                    <td align="right">
                        5,00%
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Total
                    </td>
                    <td align="right">
                        R$45,56
                    </td>
                </tr>
                <tr class="sup ttu p--0">
                    <td colspan="3">
                        <b>Pagamentos</b>
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Voucher
                    </td>
                    <td align="right">
                        R$10,00
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Dinheiro
                    </td>
                    <td align="right">
                        R$10,00
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Total pago
                    </td>
                    <td align="right">
                        R$10,00
                    </td>
                </tr>
                <tr class="ttu">
                    <td colspan="2">
                        Troco
                    </td>
                    <td align="right">
                        R$0,44
                    </td>
                </tr>
                <tr class="sup">
                    <td
                        colspan="3"
                        align="center"
                    >
                        <b>Pedido:</b>
                    </td>
                </tr>
                <tr class="sup">
                    <td
                        colspan="3"
                        align="center"
                    >
                        www.site.com
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>
<script>
    export default {

        data() {
            return {
                hide: false,
                company: this.business,
                css: `.text-center {
    text-align: center;
}

.ttu {
    text-transform: uppercase;
}

.printer-ticket {
    display: table !important;
    font-weight: light;
    line-height: 1.3em;
    max-width: 400px;
    width: 100%;
}

.printer-ticket,
.printer-ticket * {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
}

.printer-ticket th {
    border-bottom: 1px dashed #bcbcbc;
    font-weight: inherit;
    padding: 10px 0;
    text-align: center;
}

.printer-ticket th:nth-child(2),
.printer-ticket td:nth-child(2) {
    width: 50px;
}

.printer-ticket th:nth-child(3),
.printer-ticket td:nth-child(3) {
    text-align: right;
    width: 90px;
}

.printer-ticket .top td {
    padding-top: 10px;
}

.printer-ticket .last td {
    padding-bottom: 10px;
}

.printer-ticket tfoot .sup td {
    border-top: 1px dashed #bcbcbc;
    padding: 10px 0;
}

.printer-ticket tbody tr:last-child td {
    padding-bottom: 10px;
}

.printer-ticket tfoot .sup.p--0 td {
    padding-bottom: 0;
}

.printer-ticket .title {
    font-size: 1.5em;
    padding: 15px 0;
}`,
            };
        },
    };
</script>

<style scoped>
.text-center {
    text-align: center;
}

.ttu {
    text-transform: uppercase;
}

.printer-ticket {
    display: table !important;
    font-weight: light;
    line-height: 1.3em;
    max-width: 400px;
    width: 100%;
}

.printer-ticket,
.printer-ticket * {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
}

.printer-ticket th {
    border-bottom: 1px dashed #bcbcbc;
    font-weight: inherit;
    padding: 10px 0;
    text-align: center;
}

.printer-ticket th:nth-child(2),
.printer-ticket td:nth-child(2) {
    width: 50px;
}

.printer-ticket th:nth-child(3),
.printer-ticket td:nth-child(3) {
    text-align: right;
    width: 90px;
}

.printer-ticket .top td {
    padding-top: 10px;
}

.printer-ticket .last td {
    padding-bottom: 10px;
}

.printer-ticket tfoot .sup td {
    border-top: 1px dashed #bcbcbc;
    padding: 10px 0;
}

.printer-ticket tbody tr:last-child td {
    padding-bottom: 10px;
}

.printer-ticket tfoot .sup.p--0 td {
    padding-bottom: 0;
}

.printer-ticket .title {
    font-size: 1.5em;
    padding: 15px 0;
}
</style>