<template>
  <div class="h-screen w-auto">
    <v-window v-model="tab" class="h-screen w-auto bottom-navigation">
      <v-window-item :key="1" :value="'tab-1'" class="h-screen w-100 bottom-navigation">
        <Home></Home>
      </v-window-item>
      <v-window-item :key="2" :value="'tab-2'" class="h-screen w-100 bottom-navigation">
        <Gamemanage></Gamemanage>
      </v-window-item>
      <v-window-item :key="3" :value="'tab-3'" class="h-screen w-100 bottom-navigation">
        <Space></Space>
      </v-window-item>
    </v-window>
    <v-layout class="overflow-visible" style="height: 56px;">

      <v-bottom-navigation v-model="tab" color="indigo" align-tabs="center" stacked grow class="tabs">
        <v-btn value="tab-1">
          <v-icon>mdi-home</v-icon>
          首页
        </v-btn>

        <v-btn value="tab-2">
          <v-icon>mdi-table-tennis</v-icon>
          比赛
        </v-btn>

        <v-btn value="tab-3">
          <v-icon>mdi-account</v-icon>
          我的
        </v-btn>
      </v-bottom-navigation>
    </v-layout>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import Gamemanage from './components/gamemanage.vue';
import Space from './components/space.vue';
import Home from './components/home.vue';

const tab = ref(null)
</script>

<style>
.tabs {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 100;
}

.bottom-navigation {
  overflow-y: auto;
  padding-bottom: 57px;
}
/*.main-card{
  height: 100%;
  width: 100%;
}

.window-list, .window-item, iframe{
  height: 100%;
  width: 100%;
}*/
</style>