<template>
  <div class="layout-container">
    <el-container>
      <el-header>
        <Headers />
      </el-header>
      <el-main>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
      <div class="footer">
        <Footer />
      </div>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Headers from './headers.vue'
import Footer from './footer.vue'
</script>

<style lang="scss" scoped>
.layout-container {
  background: linear-gradient(180deg, #f2f8ff 0%, #f4f4f4 100%);
  position: relative;
  width: 100%;
  min-width: 1316px;

  .el-header {
    height: 112px;
    padding: 0;
  }
  .el-main {
    padding: 0;
    overflow: hidden;
  }
  .footer {
    padding: 0;
    width: 100%;
    background-color: #022756;
  }
}
</style>
