59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<v-card class="mb-2 one-fo-tab">
|
|
|
|
<v-layout style="border-top: 0.6px solid red;" justify-center >
|
|
<div class="btn-group">
|
|
<button @click="changeTo('pasien-dokter')" class="button" v-bind:class="{ 'active': tab_selected('pasien-dokter')}">Pasien <br/> Dokter</button>
|
|
<button @click="changeTo('mou-px')" class="button" v-bind:class="{ 'active': tab_selected('mou-px')}">MOU <br/> Pemeriksaan</button>
|
|
<button @click="changeTo('delivery-payment')" class="button" v-bind:class="{ 'active': tab_selected('delivery-payment')}">Kirim Hasil <br/> Pembayaran</button>
|
|
<button @click="changeTo('barcode-supplies')" class="button" v-bind:class="{ 'active': tab_selected('barcode-supplies')}">Supplies <br/> Barcode</button>
|
|
</div>
|
|
</v-layout>
|
|
</v-card>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-group .button {
|
|
text-transform: uppercase;
|
|
border: 1px solid #ffff;
|
|
color: black;
|
|
height:83px;
|
|
width:150px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
font-weight:500;
|
|
cursor: pointer;
|
|
float: left;
|
|
}
|
|
|
|
.btn-group .button:hover {
|
|
background-color: #E0F7FA;
|
|
border-bottom: 2px solid #ff1604;
|
|
|
|
}
|
|
|
|
.btn-group .button.active {
|
|
border-bottom: 2px solid #ff1604;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
methods: {
|
|
tab_selected : function(tab) {
|
|
return this.$store.state.tab_selected == tab
|
|
},
|
|
changeTo : function(tab) {
|
|
this.$store.dispatch('change_tab',tab)
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|