fifi97
157 lines
8.4 KiB
Vue
157 lines
8.4 KiB
Vue
<template>
|
||
<div>
|
||
|
||
<div v-if="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
|
||
<div class="relative w-screen my-6 mx-auto max-w-6xl">
|
||
<!--content-->
|
||
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
||
<!--header-->
|
||
<div class="flex items-start bg-gray-200 justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
|
||
<h3 class="text-3xl font-semibold">
|
||
Pemeriksaan Aliran Tunai
|
||
</h3>
|
||
<button class="p-1 ml-auto border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
|
||
<span class=" text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
|
||
×
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<!--body-->
|
||
<div class="relative p-6 flex-auto">
|
||
<p class="my-4 text-blueGray-500 text-lg leading-relaxed">
|
||
|
||
</p>
|
||
|
||
<div class="flex flex-no-wrap">
|
||
<div class="bg-blue-300 text-white h-26 flex-auto rounded-2xl ml-2">
|
||
<div class="flex flex-row">
|
||
<div class="bg-blue-500 px-4 py-6 rounded-l-2xl">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
|
||
<path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
|
||
<path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="my-auto mx-auto">
|
||
<p class="font-bold uppercase text-black text-2xl">{{ this.bakiawal }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-blue-300 text-white h-26 flex-auto rounded-2xl ml-2">
|
||
<div class="flex flex-row">
|
||
<div class="bg-blue-500 px-4 py-6 rounded-l-2xl">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm1 2a1 1 0 000 2h6a1 1 0 100-2H7zm6 7a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-3 3a1 1 0 100 2h.01a1 1 0 100-2H10zm-4 1a1 1 0 011-1h.01a1 1 0 110 2H7a1 1 0 01-1-1zm1-4a1 1 0 100 2h.01a1 1 0 100-2H7zm2 1a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm4-4a1 1 0 100 2h.01a1 1 0 100-2H13zM9 9a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zM7 8a1 1 0 000 2h.01a1 1 0 000-2H7z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<div class="my-auto mx-auto">
|
||
<p class="font-bold uppercase text-black text-2xl">{{ this.bakiakhir }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap mt-3">
|
||
<div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2">
|
||
<div class="flex flex-row">
|
||
<div class="bg-green-500 px-4 py-6 rounded-l-2xl">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
|
||
<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<div class="my-auto mx-auto">
|
||
<p class="font-bold uppercase text-black text-2xl">{{ this.pendahuluan }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-red-300 text-white h-26 flex-auto rounded-2xl ml-2">
|
||
<div class="flex flex-row">
|
||
<div class="bg-red-500 px-4 py-6 rounded-l-2xl">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z"/>
|
||
<path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="my-auto mx-auto">
|
||
<p class="font-bold uppercase text-black text-2xl">{{ this.serahan }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap mt-3">
|
||
<div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2">
|
||
<div class="flex flex-row">
|
||
<div class="bg-green-500 px-4 py-6 rounded-l-2xl">
|
||
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
|
||
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="my-auto mx-auto">
|
||
<p class="font-bold uppercase text-black text-2xl">{{ this.penebusan }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-red-300 text-white h-26 flex-auto rounded-2xl ml-2">
|
||
<div class="flex flex-row">
|
||
<div class="bg-red-500 px-4 py-6 rounded-l-2xl">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16">
|
||
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
||
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="my-auto mx-auto">
|
||
<p class="font-bold uppercase text-black text-2xl">{{ this.gadaian }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<!--footer-->
|
||
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
|
||
<button class="text-red-500 bg-transparent border border-solid border-red-500 hover:bg-red-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" v-on:click="toggleModal()">
|
||
Close
|
||
</button>
|
||
<button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" v-on:click="toggleModal()">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "modal",
|
||
data() {
|
||
return {
|
||
showModal: false,
|
||
bakiawal: 0,
|
||
bakiakhir: 0,
|
||
pendahuluan: 0,
|
||
serahan: 0,
|
||
penebusan: 0,
|
||
gadaian: 0
|
||
}
|
||
},
|
||
methods: {
|
||
toggleModal: function(){
|
||
this.showModal = !this.showModal;
|
||
}
|
||
}
|
||
}
|
||
</script> |