<!-- 移动端基础布局组件 -->
<script lang="ts" setup name="LayoutMobile">
import headerMobile from './components/Header/mobile.vue'
import useKeepAliveStore from '@/store/modules/keepAlive'
const keepAliveStore = useKeepAliveStore()
const routeInfo = useRoute()
</script>

<template>
  <div class="layout">
    <div id="app-main">
      <!-- 头部 -->
      <header-mobile />
      <div class="wrapper">
        <div class="main-container">
          <div class="main">
            <router-view v-slot="{ Component, route }">
              <transition name="main" mode appear>
                <keep-alive :include="keepAliveStore.list">
                  <component :is="Component" :key="route.fullPath" />
                </keep-alive>
              </transition>
            </router-view>
          </div>
          <copyright />
        </div>
      </div>
      <el-backtop :right="20" :bottom="20" title="回到顶部" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  // firefox隐藏滚动条
  scrollbar-width: none;

  // chrome隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>