games.vue

<template>
  <v-container>
    <v-row>
      <v-spacer cols="3"></v-spacer>
      <v-col
        cols="1"
        class="d-flex flex-column justify-space-around align-center"
      >
        <nuxt-link to="/quizDefault">
          <v-img
            height="91px"
            width="91px"
            :src="require('~/assets/img/210519_Icon_V01.png')"
            @mouseenter="showManual(1)"
            @mouseleave="hideManual()"
          >
          </v-img>
        </nuxt-link>
        <nuxt-link to="/quizDefault">
          <v-img
            height="91px"
            width="91px"
            :src="require('~/assets/img/210519_Icon_V02.png')"
            @mouseenter="showManual(2)"
            @mouseleave="hideManual()"
          >
          </v-img>
        </nuxt-link>
      </v-col>
      <v-col cols="4">
        <!--TODO color-->
        <v-card pa-16 ma-n10 color="#162c41" flat>
          <v-img
            class="img"
            :src="require('~/assets/img/210519_Wappen_Linie.png')"
          ></v-img>
          <v-overlay :opacity="opacity" :absolute="absolute" :value="overlay">
            <h1>{{ manualHeading }}</h1>
            <p>{{ manualText }}</p>
          </v-overlay>
        </v-card>
      </v-col>
      <v-col
        cols="1"
        class="d-flex flex-column justify-space-around align-center"
      >
        <nuxt-link to="/quizDefault">
          <v-img
            height="91px"
            width="91px"
            :src="require('~/assets/img/210519_Icon_V06.png')"
            @mouseenter="showManual(6)"
            @mouseleave="hideManual()"
          >
          </v-img>
        </nuxt-link>
        <nuxt-link to="/quizDefault">
          <v-img
            height="91px"
            width="91px"
            :src="require('~/assets/img/210519_Icon_V05.png')"
            @mouseenter="showManual(5)"
            @mouseleave="hideManual()"
          >
          </v-img>
        </nuxt-link>
      </v-col>
      <v-spacer col="3"></v-spacer>
    </v-row>
    <v-row justify-space-between>
      <v-spacer cols="4"></v-spacer>
      <v-col cols="2" class="d-flex flex-row justify-center">
        <nuxt-link to="/quiz3">
          <v-img
            height="91px"
            width="91px"
            :src="require('~/assets/img/210519_Icon_V03.png')"
            @mouseenter="showManual(3)"
            @mouseleave="hideManual()"
          >
          </v-img>
        </nuxt-link>
      </v-col>
      <v-col cols="2" class="d-flex flex-row justify-center">
        <nuxt-link to="/quizDefault">
          <v-img
            height="91px"
            width="91px"
            :src="require('~/assets/img/210519_Icon_V04.png')"
            @mouseenter="showManual(4)"
            @mouseleave="hideManual()"
          >
          </v-img>
        </nuxt-link>
      </v-col>
      <v-spacer cols="4"></v-spacer>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      absolute: true,
      overlay: false,
      opacity: 0,
      manualText: "Hier könnte ihre Werbung stehen",
      manualHeading: "",
    };
  },
  methods: {
    showManual(number) {
      this.overlay = true;
      this.manualHeading = `Spiel ${number}`;
    },
    hideManual() {
      this.overlay = false;
    },
  },
};
</script>

<style>
.img {
  border-radius: 4%;
}
</style>