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" v-if="cpt && cpt != ''"></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 vip from './vip/index.vue';
import user from './user/index.vue';
import duijiehui from './duijiehui/index.vue';
import enterpriseProduct from './enterpriseProduct/index.vue';
import enterpriseTrans from './enterpriseTrans/index.vue';
import technical from './technical/index.vue';
import roadshow from './roadshow/index.vue';
import guestInter from './guestInter/index.vue';
import dictionary from './dictionary/index.vue';
import business from './business/index.vue';
import manager from './manager/index.vue';
import bindWx from './bindWx/index.vue';
import notice from './notice/index.vue';
import productSolicit from './productSolicit/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,
    vip,
    user,
    duijiehui,
    enterpriseProduct,
    enterpriseTrans,
    technical,
    roadshow,
    guestInter,
    dictionary,
    business,
    manager,
    bindWx,
    notice,
    productSolicit,
    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%;
  width: 1200px;
  margin: 0 auto;
}
.info {
  background-color: #e9edf6;
}
.main {
  min-height: 834px;
  margin: 15px 0;
}
.mainMenu {
  width: 20%;
  min-height: 834px;
  background-color: #fff;
}
.mainMess {
  float: right;
  min-height: 834px;
  background-color: #fff;
}
</style>