77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<template>
|
|
<v-card class="mb-2 one-fo-tab">
|
|
<v-layout justify-center class="tab-container">
|
|
<v-btn @click="changeTo('pasien-dokter')" justify-center multi-line class= "buttonkiri active" color="success">
|
|
Pasien <br/> Dokter
|
|
<v-icon v-if="tab_selected('pasien-dokter')" right dark>verified_user</v-icon>
|
|
</v-btn>
|
|
<v-btn @click="changeTo('mou-px')" justify-center multi-line class= "buttonnew" color="error">MOU <br/> Pemeriksaan
|
|
<v-icon v-if="tab_selected('mou-px')" right dark>verified_user</v-icon>
|
|
</v-btn>
|
|
<v-btn @click="changeTo('delivery-payment')" justify-center multi-line class= "buttonnew" color="warning">Kirim Hasil <br/> Payment
|
|
<v-icon v-if="tab_selected('delivery-payment')" right dark>verified_user</v-icon>
|
|
</v-btn>
|
|
<v-btn @click="changeTo('barcode-supplies')" justify-center multi-line class= "buttonkanan" color="info">
|
|
<v-icon v-if="tab_selected('barcode-supplies')" left dark>verified_user</v-icon>
|
|
Supplies <br/> Barcode
|
|
</v-btn>
|
|
</v-layout>
|
|
</v-card>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.one-fo-tab {
|
|
min-height:84px;
|
|
}
|
|
.layout.tab-container .v-btn {
|
|
min-height:64px;
|
|
margin-top:10px;
|
|
}
|
|
.v-card{
|
|
text-align: center;
|
|
}
|
|
|
|
.v-btn__content{
|
|
margin-top : 0px;
|
|
}
|
|
|
|
.buttonnew {
|
|
width : 20%;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.buttonkiri {
|
|
width : 20%;
|
|
text-decoration:none;
|
|
border-top-left-radius: 50px;
|
|
border-bottom-left-radius: 50px;
|
|
}
|
|
|
|
.buttonkanan {
|
|
width : 20%;
|
|
text-decoration:none;
|
|
border-top-right-radius: 50px;
|
|
border-bottom-right-radius: 50px;
|
|
}
|
|
.active{
|
|
|
|
}
|
|
|
|
</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>
|
|
|