<template>
  <div id="main-layout">
    <el-row>
      <el-container class="index">
        <el-header height="4rem" class="heads">
          <heads></heads>
        </el-header>
        <el-container>
          <el-aside width="13rem" class="menus">
            <menus></menus>
          </el-aside>
          <el-main class="main">
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </el-row>
  </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: {
    heads,
    menus,
  },
  data: () => ({
    loginBei: require('@/assets/beijing.jpg'),
  }),
  created() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.index {
  background-image: url('../assets/beijing.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.heads {
  padding: 0;
  // background-color: #409eff8f;
  background-color: #ffffff9f;
  border-bottom: 1px solid #000;
}
.menus {
  min-height: 905px;
  background: rgb(53, 56, 82);
}
.main {
  min-height: 905px;
  background-color: #ffffff;
}
</style>
