web-test/src/views/superAdminCenter/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="top">
          <heads></heads>
        </el-col>
        <el-col :span="24" class="main">
          <div class="w_1200">
            <el-col :span="4" class="mainMenu">
              <menus @setRight="setRight"></menus>
            </el-col>
            <el-col :span="19" class="mainMess">
              <top :title="topTitle"></top>
              <div style="padding:10px">
                <component :is="cpt"></component>
              </div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="foot">
          <foot></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable vue/no-unused-components */
import menus from './menuInfo.vue';
import top from './lefttop.vue';
import role from './role/index.vue';
import permission from './permission/index.vue';
import adminUser from './adminUser/index.vue';
import business from './business/index.vue';
import manager from './manager/index.vue';
import heads from '@/layout/userCenter/heads.vue';
import foot from '@/layout/live/foot.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    heads,
    foot,
    role,
    permission,
    adminUser,
    business,
    manager,
    menus,
    top,
  },
  data: function() {
    return {
      cpt: 'role',
      topTitle: '',
    };
  },
  created() {},
  methods: {
    setRight(menu) {
      let { name, cpt } = menu;
      this.$set(this, `topTitle`, name);
      this.$set(this, `cpt`, cpt);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.info {
  background-color: #e9edf6;
}
.main {
  min-height: 666px;
  margin: 15px 0;
}
.mainMenu {
  width: 20%;
  min-height: 666px;
  background-color: #fff;
}
.mainMess {
  float: right;
  min-height: 666px;
  background-color: #fff;
}
</style>