diff --git a/src/components/pages/LandingPage.vue b/src/components/pages/LandingPage.vue index 513582823d6739f78457758c583e824bf67810dd..4ee4439aa794c3429e3606037f9f3de1c9c1dcb4 100644 --- a/src/components/pages/LandingPage.vue +++ b/src/components/pages/LandingPage.vue @@ -1,45 +1,45 @@ <template> - <div id="placeholder"> - <div id="content"> - <div id="img-container"> - <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/West_Java_coa.png"/> - </div> - <h2> - Selamat Datang di APBD Elektronik Pemerintah Jawa Barat - </h2> - <div> - <b-dropdown id="ddown1" text="Pilih Tahun..." class="m-md-2"> - <b-dropdown-item v-on:click="gotoYear('2016')">2016</b-dropdown-item> - <b-dropdown-item v-on:click="gotoYear('2017')">2017</b-dropdown-item> - <b-dropdown-item v-on:click="gotoYear('2018')">2018</b-dropdown-item> - <b-dropdown-item v-on:click="gotoYear('2019')">2019</b-dropdown-item> - </b-dropdown> - </div> - </div> + <div id="placeholder"> + <div id="content"> + <div id="img-container"> + <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/West_Java_coa.png"/> + </div> + <h2> + Selamat Datang di APBD Elektronik Pemerintah Jawa Barat + </h2> + <div> + <b-dropdown id="ddown1" text="Pilih Tahun..." class="m-md-2"> + <b-dropdown-item v-on:click="gotoYear('2016')">2016</b-dropdown-item> + <b-dropdown-item v-on:click="gotoYear('2017')">2017</b-dropdown-item> + <b-dropdown-item v-on:click="gotoYear('2018')">2018</b-dropdown-item> + <b-dropdown-item v-on:click="gotoYear('2019')">2019</b-dropdown-item> + </b-dropdown> + </div> </div> + </div> </template> <script> export default { - name: 'LandingPage', - components: { + name: 'LandingPage', + components: { - }, - data() { - return { + }, + data() { + return { - } - }, - methods: { - gotoYear : function(year) { - // TODO: Redirect to visualization page relevant to the selected year - this.$store.commit('setYear', year) - this.$router.push('Pendapatan') - } - }, - created : function() { - this.$store.commit('changed','Pendapatan') } + }, + methods: { + gotoYear : function(year) { + // TODO: Redirect to visualization page relevant to the selected year + this.$store.commit('setYear', year) + this.$router.push('Pendapatan') + } + }, + created : function() { + this.$store.commit('changed','Pendapatan') + } } </script> @@ -48,48 +48,46 @@ export default { @import 'src/assets/css/style.scss'; #placeholder { - height: 100vh; - width: 100vw; - display: flex; - justify-content: center; - align-items: center; - text-align: center; + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + text-align: center; - background: linear-gradient(0deg, rgba(93,188,210,1) 0%, rgba(93,188,210,0.75) 50%, rgba(93,188,210,0) 100%), - url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Gedung-Sate-Trees.jpg/1024px-Gedung-Sate-Trees.jpg'); - background-size: cover; - background-position: center; - background-repeat: no-repeat; + background: linear-gradient(0deg, rgba(93,188,210,1) 0%, rgba(93,188,210,0.75) 50%, rgba(93,188,210,0) 100%), + url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Gedung-Sate-Trees.jpg/1024px-Gedung-Sate-Trees.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; - #content { - margin: 20vh 20vw; - padding: 15px; - height: auto; - min-width: 300px; - width: 30vw; - background-color: white; - border-radius: 15px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); + #content { + margin: 20vh 20vw; + padding: 15px; + height: auto; + min-width: 300px; + width: 30vw; + background-color: white; + border-radius: 15px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); - #img-container { - img { - width: 50%; - } - } + #img-container { + img { + width: 50%; + } + } - h2 { - font-weight: bold; - font-size: 1.25rem; - } + h2 { + font-weight: bold; + font-size: 1.25rem; + } - @media screen and (max-width: 430px) { - h2 { - font-size: 1rem; - } - } + @media screen and (max-width: 430px) { + h2 { + font-size: 1rem; + } } + } } - - </style> \ No newline at end of file