120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<template>
|
|
<v-flex xs6 class="right">
|
|
<v-layout row>
|
|
<v-flex pl-2 pr-2 pt-0 pb-2 md12>
|
|
<v-card color="blue lighten-3">
|
|
<v-layout align-center row>
|
|
<v-flex text-md-left justify-start row fill-height pt-2 pb-2>
|
|
<div class="flex display-1 font-weight-medium pt-1 pb-1 pl-2"><kbd>TOTAL</kbd></div>
|
|
</v-flex>
|
|
<v-flex text-md-right justify-start row fill-height pt-2 pb-2>
|
|
<div class="flex display-2 font-weight-medium pt-1 pb-1 pr-2"><kbd>1.200.000</kbd></div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row>
|
|
<v-flex pl-2 pt-1 pr-2 xs12 sm12 md12>
|
|
<v-card>
|
|
<table>
|
|
<tr>
|
|
<th class="text-md-center pt-2 pb-2"> # </th>
|
|
<th class="text-md-center pt-2 pb-2">PEMERIKSAAN</th>
|
|
<th class="text-md-center pt-2 pb-2">BRUTO</th>
|
|
<th class="text-md-center pt-2 pb-2">DISKON</th>
|
|
<th class="text-md-center pt-2 pb-2">TOTAL</th>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="text-md-center"> <v-icon color = "red" >delete</v-icon> </td>
|
|
<td class="text-md-left pl-3">SGOT</td>
|
|
<td class="text-md-right pr-2">50.000</td>
|
|
<td class="text-md-right pr-2">5.000</td>
|
|
<td class="text-md-right pr-2">45.000</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="text-md-center"> <v-icon color = "red" >delete</v-icon> </td>
|
|
<td class="text-md-left pl-3">SGPT</td>
|
|
<td class="text-md-right pr-2">50.000</td>
|
|
<td class="text-md-right pr-2">5.000</td>
|
|
<td class="text-md-right pr-2">45.000</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tfoot>
|
|
<tr>
|
|
<th style="background:#03a9f43d" colspan="3" class="text-md-right pr-2 pt-2 pb-2">SUB TOTAL</th>
|
|
<th style="background:#03a9f43d" class="text-md-right pr-2 pt-2 pb-2" colspan="2">100.000</th>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
<th colspan="3" class="text-md-right pr-2 pt-1 pb-1">DISKON PEMBULATAN</th>
|
|
<th class="text-md-right pr-2 pt-1 pb-1" colspan="2">10.000</th>
|
|
|
|
</tr>
|
|
</tfoot>
|
|
|
|
|
|
|
|
</table>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
|
|
|
|
</template>
|
|
<style scoped>
|
|
.nota {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
.total {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
table {
|
|
font-family: arial, sans-serif;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
background:white;
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px solid black;
|
|
border-collapse: collapse;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
table>tr>td {
|
|
padding: 8px;
|
|
}
|
|
table>tr>td:first {
|
|
padding-left:15px!important;
|
|
}
|
|
|
|
|
|
|
|
|
|
.vintage-text{
|
|
text-shadow: 0px -2px 0px #fff, 0px 2px 3px #fff;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
module.exports = {
|
|
data: () => ({
|
|
mous: ['Foo', 'Bar', 'Fizz', 'Buzz'],
|
|
custom: false,
|
|
value: ''
|
|
})
|
|
}
|
|
</script>
|