diff --git a/src/components/SimpleCard.vue b/src/components/SimpleCard.vue new file mode 100644 index 0000000000000000000000000000000000000000..fd808dbdaa30febf35733d3f8187555d5a75f6d3 --- /dev/null +++ b/src/components/SimpleCard.vue @@ -0,0 +1,44 @@ +<template> + <div> + <b-card bg-variant="info" text-variant="white" > + <b-card-text> + {{ jenisAnggaran }} + <br> + <b>{{ total }}</b> + </b-card-text> + </b-card> + </div> +</template> + +<script> + +export default { + name: 'SimpleCard', + props : ['jenisAnggaran','totalAnggaran'], + data() { + return { + total : "Rp "+this.totalAnggaran + } + }, + methods : { + + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> + +.card-body { + font-size: 1.25rem; + padding: 1rem 1.25rem; + +} + +.card { + width : 100%; + margin : 15px 0px; + padding: 0.5rem 0.25rem; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); +} +</style> diff --git a/src/components/SimpleCardContainer.vue b/src/components/SimpleCardContainer.vue new file mode 100644 index 0000000000000000000000000000000000000000..d4055acbd7f8bad6fa24b7443684b8b0ec631fc8 --- /dev/null +++ b/src/components/SimpleCardContainer.vue @@ -0,0 +1,32 @@ +<template> +<b-col cols="3"> + <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/> + <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/> + <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/> + <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/> +</b-col> +</template> + +<script> +import SimpleCard from './SimpleCard' + +export default { + name: 'SimpleCardContainer', + data() { + return { + } + }, + components: { + 'simple-card':SimpleCard, + }, + methods : { + + }, +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> + + +</style> diff --git a/src/components/pages/LoginPage.vue b/src/components/pages/LoginPage.vue index 15941fd521dccd1088fe1ee72ae2435283373a22..c2f91150c541fb413a4921616427c08be48f882a 100644 --- a/src/components/pages/LoginPage.vue +++ b/src/components/pages/LoginPage.vue @@ -97,7 +97,7 @@ export default { } }, created : function() { - this.$store.commit('changed','Jenis Keuangan') + this.$store.commit('changed','Jenis Anggaran') }, methods: { submitLogin: function(event) { diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue index 2cae2a81a87eb321f127cf9b69741a2c21a75428..f282bb9351e439175115847e6d8e4803ce6f5b53 100644 --- a/src/components/pages/SemuaAnggaran.vue +++ b/src/components/pages/SemuaAnggaran.vue @@ -1,14 +1,19 @@ <template> - <div> - Semua Anggaran - </div> + <b-container> + <b-row > + <b-col class="bg-dark" cols="9"> + </b-col> + <simple-card-container/> + </b-row> + </b-container> </template> <script> +import SimpleCardContainer from '@/components/SimpleCardContainer' export default { name: 'SemuaAnggaran', components: { - + 'simple-card-container' : SimpleCardContainer, }, data() { return { @@ -28,4 +33,7 @@ export default { <style lang="scss" scoped> @import 'src/assets/css/style.scss'; +.container { + max-width: 100%; +} </style> \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 944e9235c1f8e1b7e85635a83609feb29264dfad..c5fb5cb61f9547d6bd046d1f86a1cc75d5e7c976 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,6 +7,8 @@ import Pembiayaan from '@/components/pages/PembiayaanPage' import BiayaTidakLangsung from '@/components/pages/BiayaTidakLangsungPage' import BiayaLangsung from '@/components/pages/BiayaLangsungPage' import SemuaAnggaran from '@/components/pages/SemuaAnggaran' +import SimpleCardContainer from '@/components/SimpleCardContainer' + Vue.use(Router) export default new Router({ @@ -46,6 +48,11 @@ export default new Router({ name: 'SemuaAnggaran', component: SemuaAnggaran }, + { + path: '/tes', + name: 'SimpleCardContainer', + component: SimpleCardContainer + }, ], mode: 'history', })