<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-265CD4">
      <AppHeader></AppHeader>
    </header>
    <div class="w-full flex-auto flex flex-row overflow-hidden relative">
      <aside class="w-210px flex-none h-full border">
        <el-scrollbar view-class="h-full">
          <AppSider></AppSider>
        </el-scrollbar>
      </aside>
      <div class="divide-x"></div>
      <main class="flex-auto flex flex-col overflow-hidden">
        <div class="w-full h-full">
          <!-- <Breadcrumb class="flex-none mb-4"></Breadcrumb> -->

          <el-scrollbar always wrap-class="w-full h-full box-border" view-class="relative h-full flex flex-col p-4">
            <router-view></router-view>
          </el-scrollbar>
        </div>
      </main>
    </div>
  </div>

</template>

