myjysz_manage/src/layout/app/index.vue

<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 w-screen h-screen">
    <aside class="w-216px flex-none h-full bg-hex-041220">
      <el-scrollbar view-class="h-full flex flex-col">
        <h1 class="text-xl text-white font-extrabold w-full text-center mt-8 mb-12">
          蒙阴县教育数字平台
        </h1>
        <AppSider class="flex-auto" />
      </el-scrollbar>
    </aside>
    <div class="h-full flex flex-col flex-auto ">
      <header class="w-full flex-none bg-hex-041220">
        <AppHeader class="bg-white border_lt overflow-hidden" />
      </header>
      <main class="w-full flex-auto flex flex-col overflow-hidden bg-hex-f6f9fd">
        <div class="w-full h-full">
          <el-scrollbar always wrap-class="w-full h-full box-border" view-class="relative h-full w-full">
            <router-view />
          </el-scrollbar>
        </div>
      </main>
    </div>
  </div>
</template>

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