<template>
  <a-layout class="layout">
    <AppSider />
    <a-layout class="layout-main">
      <AppHeader />
      <a-layout-content class="layout-content">
        <div class="content">
          <RouterView />
        </div>
      </a-layout-content>
      <AppFooter />
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import AppHeader from './Header.vue';
import AppSider from './Sider.vue'
import AppFooter from './Footer.vue';
</script>

<style lang="less">
.layout {
  height: 100%;
  background-color: #f0f2f5;
  .layout-main {
    background-color: #f0f2f5;
  }
  .layout-content {
    overflow: auto;
    padding: 24px;
    padding-bottom: 0;
  }
  .content {
    min-height: 100%;
    background-color: #fff;
  }
}
</style>
