admin-cms/src/layout/main-layout.vue

<template>
  <div id="main-layout">
    <div v-if="!toLogin()">
      <el-container>
        <el-header height="70px" class="head">
          <heads></heads>
        </el-header>
        <el-container class="contain">
          <el-aside class="side">
            <menus></menus>
          </el-aside>
          <el-main class="main">
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
    <div v-else>
      <router-view />
    </div>
  </div>
</template>

<script>
import heads from '@/layout/layout-part/heads.vue';
import menus from '@/layout/layout-part/menus.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'main-layout',
  props: {},
  components: {
    menus,
    heads,
  },
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    toLogin() {
      let route = window.location.pathname;
      return route.includes('login');
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #2a2e43;
}
.contain {
  height: 100%;
  background: #eeeeee;
}
.side {
  width: 220px !important;
  min-height: 867px;
  background: #ffffff;
}
.main {
  margin: 0;
  padding: 20px;
  min-height: 550px;
}
</style>