keksCloud
/
keksAccountGUI
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Change Startpage

This commit is contained in:
Kekskurse 2019-08-11 22:55:26 +02:00
parent f74bfec6c2
commit dd19c6d57a
2 changed files with 55 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/plugins/vuetify.js
View File

@ -5,6 +5,6 @@ Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi',
iconfont: 'mdiSvg',
},
});
});

84
src/views/Startpage.vue
View File

@ -4,43 +4,55 @@
<h1>{{ nameBig }}<span class="small">{{ nameSmall }}</span></h1>
<h2>{{ slogen }}</h2>
</div>
<v-container grid-list-md pa-10 >
<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-container grid-list-md pa-10>
<v-layout wrap>
<v-flex v-for="i in 3" :key="`4${i}`" style="text-align: justify; padding-left: 10px; padding-right: 10px;" xs4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</v-flex>
</v-layout>
</v-container>
<template>
<v-carousel class="bg">
<v-carousel-item
v-for="(item, index) in apps"
:key="color"
>
<v-sheet
color="transparent"
height="100%"
tile
>
<v-layout
align-center
fill-height
justify-center
>
<v-container grid-list-md pa-10 style="margin-right: 20%;margin-left: 20%;">
<v-layout wrap>
<v-flex xs4>
<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 xs8>
<h1>{{ item.name }}</h1>
<p>{{ item.description }}</p>
</v-flex>
</v-layout>
<v-divider light></v-divider>
<v-card-actions class="pa-3">
</v-layout>
</v-container>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon @click="navigateToApp(item)">input</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-layout>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
<v-container grid-list-md pa-10>
<v-layout wrap>
<v-flex style="text-align: justify; padding-left: 10px; padding-right: 10px;" xs12>
<h3>Open Source</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</v-flex>
</v-layout>
</v-container>
@ -63,7 +75,14 @@
{ icon: 'info', title: 'Invited' },
{ icon: 'warning', title: 'Register' }
],
apps: []
apps: [],
colors: [
'primary',
'secondary',
'yellow darken-2',
'red',
'orange',
],
}
},
methods: {
@ -86,6 +105,9 @@
</script>
<style>
.bg {
background-image: url('~@/assets/texture-1485529_1920.jpg');
}
.headerStartpage {
background-image: url('~@/assets/texture-1485529_1920.jpg');
background-repeat: no-repeat;
@ -94,7 +116,7 @@
text-align: center;
}
.headerStartpage h1{
padding-top: 200px;
padding-top: 300px;
font-size: 56px !important;
font-weight: 400;
line-height: 32px !important;