<template>
  <div class="mian">
    <el-row :gutter="0" style="height: 100%">
      <el-col :span="4" class="el-col-left">
        <el-scrollbar class="el-scrollbar">
          <el-menu>
            <Menu> </Menu>
          </el-menu>
        </el-scrollbar>
      </el-col>
      <el-col :span="20" class="el-col-right">
        <!-- <keep-alive include="PreviewIndex">
          <RouterView />
        </keep-alive> -->

        <router-view v-slot="{ Component }">
          <keep-alive include="PreviewIndex">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ThemeLayout'
};
</script>

<script setup lang="ts">
import Menu from '@/components/menu/index.vue';
import { ref } from 'vue';
let Component = ref('PreviewIndex');
</script>

<style lang="less" scoped>
.mian {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  .el-col-left {
    width: 100%;
    height: 100%;
    background: #880a0a;
    .el-scrollbar {
      height: 100%;
      // background: #62db25;
    }
  }
  .el-col-right {
    width: 100%;
    height: 100%;
    // background: #62db25;
  }

  // background: #da0505;
  .el-container {
    width: 100%;
    height: 100%;
    .el-aside-left {
      height: 100%;
      width: 150px;
      background: #880a0a;
    }
    .el-aside-right {
      height: 100%;
      width: 200px;
      background: #880a0a;
    }
  }
}
</style>
