<template>
  <div class="layout">
    <el-container>
      <el-header>
        <LayoutHeader></LayoutHeader>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <!-- {{ console.log('Layout', Component) }} -->
          <transition @before-enter="beforeEnter" @after-leave="afterLeave">
            <component :is='Component'></component>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue"
import $ from 'jquery'
import LayoutHeader from '@/components/LayoutHeader.vue';
const { proxy } = getCurrentInstance()

function beforeEnter() {
  // 切换页面时不出现滚动条
  $('#app').addClass('hide-scrollbar')
  setTimeout(() => {
    $('#app').removeClass('hide-scrollbar')
  }, 1000)
}
function afterLeave() {
  // $('#app').removeClass('hide-scrollbar')
}
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // --layoutMinWidth: 800px;
  overflow: visible;

  // padding: 0 10px;
  // overflow: auto;
  // ::--webkit--scrollbar {
  //   display: none
  // }
  // &::--webkit--scrollbar {
  //   display: none
  // }

  // /* IE和Edge浏览器 */
  // -ms-overflow-style: none;
  // /* Firefox */
  // scrollbar-width: none;

}



.el-container {
  width: 100%;
  height: 100%;
  min-width: 800px;
  margin: 0px;
  padding: 0px;
  // min-width: var(--layoutMinWidth);
  // min-height: 600px;
  box-sizing: border-box;

  overflow: visible;
  // display: block !important;
  flex-direction: column;


  .el-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0px;
    background-color: #fff;
    z-index: 15;
    width: 100%;

  }

  .el-main {
    box-sizing: margin-box;
    flex: 1 1 auto;
    // min-width: 500px;
    width: 100%;
    // max-width: 100%;
    // overflow: hidden;
    /* 关键：允许内容压缩，避免溢出 */
    min-height: 0;
    // position: absolute;
    /* 子元素不生成滚动条 */
    overflow: visible;
    // overflow: hidden;
  }
}
</style>
