79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
invoice: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<table class="travel_allowance">
|
|
<tr><td colspan="2">
|
|
Abrechnung einer Reisekostenpauschale
|
|
</td></tr>
|
|
<tr>
|
|
<th>Reiseroute</th>
|
|
<td>{{props.invoice.travelRoute}}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Gesamte Wegstrecke</th>
|
|
<td>{{props.invoice.distance}} km</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Kilometerpauschale</th>
|
|
<td>{{props.invoice.distanceAllowance}} Euro / km</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Gesamtbetrag</th>
|
|
<td style="font-weight: bold">{{props.invoice.amount}}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Marterialtransport</th>
|
|
<td>{{props.invoice.transportation}}</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Hat Personen mitgenommen</th>
|
|
<td>{{props.invoice.passengers}}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.travel_allowance {
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.travel_allowance tr th {
|
|
width: 300px !important;
|
|
border-left: 1px solid #ccc;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.travel_allowance tr td,
|
|
.travel_allowance tr th {
|
|
font-family: sans-serif;
|
|
line-height: 1.8em;
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 10px;
|
|
}
|
|
|
|
.travel_allowance tr td:last-child {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
|
|
.travel_allowance tr:first-child td:first-child {
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
background: linear-gradient(to bottom, #fff, #f6f7f7);
|
|
border-top: 1px solid #ccc;
|
|
border-left: 1px solid #ccc !important;
|
|
}
|
|
</style>
|