sisweb/src/App.vue

<template>

  <div
    id="app"
    :class="'mainTheme-' + this.themeName"
    style="width: 100%; height: 100%"
    v-loading="$store.state.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
  <router-view name="rally"></router-view>
    <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 } 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,
  },
};
</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>