<template>
  <q-layout view="lHr lpr lFr">
    <q-header elevated>
      <!-- 自适应顶部导航栏 -->
      <TopNavigation />
    </q-header>
    <q-page-container>
      <!-- 自适应屏幕断点判断类型，当前：小于md为移动端 -->
      <template v-if="$q.screen.lt.md">
        <!-- 移动端布局 -->
        <router-view v-slot="{ Component }">
          <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
            <component :is="Component" :key="$route.path" />
          </transition>
        </router-view>
        <!-- 移动端底部导航 -->
        <BottomNavigation />
      </template>
      <template v-else>
        <!-- 桌面端布局(使用自定义的滚动组件包裹，方便修饰页面滚动条) -->
        <CustomScrollContainer height="calc(100vh - 80px)" :top-offset="84">
          <router-view v-slot="{ Component }">
            <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
              <component :is="Component" :key="$route.path" />
            </transition>
          </router-view>
        </CustomScrollContainer>
      </template>
    </q-page-container>
  </q-layout>
</template>
<script setup>
import CustomScrollContainer from 'src/components/CustomScrollContainer.vue'
import TopNavigation from 'src/components/TopNavigation.vue'
import BottomNavigation from 'src/components/BottomNavigation.vue'
</script>