<template>
  <div style="width:100%;height:100%"
  
    v-loading="$store.state.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <el-container style="height: 100%">
      <el-header style="height: 60px; padding: 0 0px">
        <headers></headers>
      </el-header>

      <el-container class="fot">
        <el-aside class="son" :style="this.asidez">
          <asiders></asiders>
        </el-aside>
        <el-main class="sis" :style="this.mainy">
          <mains></mains>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import asiders from "@layout/aside";
import headers from "@layout/header";
import mains from "@layout/main";
export default {
  computed: {
    ...mapGetters(["asidez", "mainy", "themeName"]),
  },
  components: {
    asiders,
    headers,
    mains,
  },
  methods: {},
};
</script>
<style lang="scss">
@import "@assets/css/base.scss";
</style>
<style lang="scss" scoped>
@import "@assets/css/theme.scss";
.fot {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
.son {
  display: flex;
  width: 10%;
  height: 100%;
}
.sis {
  display: flex;
  width: 90%;
  height: 100%;
}
</style>