123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<template>
|
|
<div style="">
|
|
<div class="headerStartpage">
|
|
<h1>{{ nameBig }}<span class="small">{{ nameSmall }}</span></h1>
|
|
<h2>{{ slogen }}</h2>
|
|
</div>
|
|
<v-container grid-list-md>
|
|
<v-layout row wrap>
|
|
<v-flex md12>
|
|
<h1>Services</h1>
|
|
<p>Mit deinem KeksAccount Username kannst du dich u.a. bei folgenden Servicen einloggen und diese nutzten. </p>
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
<v-layout row wrap>
|
|
<v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
|
|
<v-card>
|
|
<v-layout>
|
|
<v-flex xs5>
|
|
<v-img
|
|
:src="getImageUrl(item.id)"
|
|
height="125px"
|
|
contain
|
|
></v-img>
|
|
</v-flex>
|
|
<v-flex xs7>
|
|
<v-card-title primary-title>
|
|
<div>
|
|
<div class="headline">{{ item.name }}</div>
|
|
<div>{{ item.description }}</div>
|
|
</div>
|
|
</v-card-title>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-divider light></v-divider>
|
|
<v-card-actions class="pa-3">
|
|
|
|
<v-spacer></v-spacer>
|
|
<v-btn icon>
|
|
<v-icon @click="navigateToApp(item)">input</v-icon>
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import AppService from '../services/Apps'
|
|
export default {
|
|
data () {
|
|
return {
|
|
nameBig: '',
|
|
nameSmall: '',
|
|
slogen: '',
|
|
menu: [
|
|
{ icon: 'home', title: 'Login' },
|
|
{ icon: 'info', title: 'Invited' },
|
|
{ icon: 'warning', title: 'Register' }
|
|
],
|
|
apps: []
|
|
}
|
|
},
|
|
methods: {
|
|
'getStartpageApps': function () {
|
|
AppService.getStartPageApps().then((res) => {
|
|
this.apps = res.data.data;
|
|
});
|
|
},
|
|
'getImageUrl' : function (id) {
|
|
return AppService.getAppImage(id);
|
|
},
|
|
},
|
|
mounted: function() {
|
|
this.nameBig = this.$store.getters.getSettingValue("name_big");
|
|
this.nameSmall = this.$store.getters.getSettingValue("name_small");
|
|
this.slogen = this.$store.getters.getSettingValue("name_slogen");
|
|
this.getStartpageApps();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.headerStartpage {
|
|
background-image: url('~@/assets/manhattan-407703_1920.jpg');
|
|
background-repeat: no-repeat;
|
|
margin-top: -100px;
|
|
height:90vh;
|
|
text-align: center;
|
|
}
|
|
.headerStartpage h1{
|
|
padding-top: 200px;
|
|
font-size: 56px !important;
|
|
font-weight: 400;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
.headerStartpage h1 .small{
|
|
font-weight: 300 !important;
|
|
}
|
|
.headerStartpage h2{
|
|
padding-top: 30px;
|
|
font-size: 34px !important;
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h1{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
h2{
|
|
font-weight: 300;
|
|
line-height: 32px !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
</style>
|