Skip to content

Instantly share code, notes, and snippets.

@elinardo10
Created December 26, 2022 03:33
Show Gist options
  • Save elinardo10/44b2659a5b851a16a1a4bac646f9e09d to your computer and use it in GitHub Desktop.
Save elinardo10/44b2659a5b851a16a1a4bac646f9e09d to your computer and use it in GitHub Desktop.
cupton estilo
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment