keksAccountGUI/src/views/Startpage.vue

<template>
  <div style="">
  <div class="headerStartpage">
    <h1>{{ nameBig }}<span class="small">{{ nameSmall }}</span></h1>
    <h2>{{ slogen }}</h2>
  </div>
    <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 xs8>
                <h1>{{ item.name }}</h1>
                <p>{{ item.description }}</p>
              </v-flex>
                </v-layout>
              </v-container>

            </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>


  </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: [],
        colors: [
          'primary',
          'secondary',
          'yellow darken-2',
          'red',
          'orange',
        ],
      }
    },
    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");

      if(this.$store.getters.getSettingValue("startpage") == false) {
        this.$router.push({"path": "login"})
      } else {
        this.getStartpageApps();
      }

    }
      }
</script>

<style>
  .bg {
    background-image: url('~@/assets/texture-1485529_1920.jpg');
  }
.headerStartpage {
  background-image: url('~@/assets/texture-1485529_1920.jpg');
  background-repeat: no-repeat;
  margin-top: -100px;
  height:90vh;
  text-align: center;
}
  .headerStartpage h1{
    padding-top: 300px;
    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>