<script setup lang="ts">
import AppHeader from "./components/AppHeader/index.vue";
import AppSider from "./components/AppSider/index.vue";
import Breadcrumb from "~/components/Breadcrumb/index.vue";
// import AppMain from './components/AppMain/index.vue';
</script>

<template>
  <div class="flex flex-col w-screen h-screen">
    <header class="w-full flex-none bg-hex-00A3FF">
      <AppHeader></AppHeader>
    </header>
    <div class="w-full flex-auto flex flex-row overflow-hidden relative bg-grey">
      <aside class="w-210px flex-none h-full bg-white pt-24px">
        <el-scrollbar view-class="h-full">
          <AppSider></AppSider>
        </el-scrollbar>
      </aside>
      <main class="flex-auto flex flex-col overflow-hidden">
        <el-scrollbar view-class="h-full">
          <div class="w-full h-full pt-10px">
            <Breadcrumb class="flex-none mb-2"></Breadcrumb>
            <!--          <div class="h-full box-border bg-white m-4 rounded-6px">-->
            <!--           -->
            <!--          </div>-->
            <router-view class="m-4"></router-view>
            <!--          <el-scrollbar wrap-class="h-full box-border bg-white m-4 rounded-6px" view-class="relative h-full flex flex-col p-4">-->
            <!--            -->
            <!--          </el-scrollbar>-->
          </div>
        </el-scrollbar>
      </main>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.bg-grey {
  background: #f0f3f8;
}
.border_lt {
  border-radius: 2.25rem 0px 0px 0px;
}
</style>

