platformFront/src/components/user/HomePage.vue

<template>
    <el-container class="user">
        <el-aside>
            <div class="logo">
                <p><b>后台管理系统</b></p>
            </div>
            <lt-menu v-if="data&&data.menuWrappers.length" v-bind:data="data.menuWrappers"></lt-menu>
        </el-aside>
        <el-container>
            <el-header class="clearfix">
                <div class="title fl">
                    <h2>机构名称</h2>
                    <lt-badge class="green">试用中</lt-badge>
                </div>
                <div class="userInfo fr">
                    <img src="" alt="">
                    <span class="username">用户名</span>
                    <lt-badge class="green">已认证</lt-badge>
                </div>
            </el-header>
            <div class="block">控制台</div>
            <el-main>
                <trial-user></trial-user>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
  import LtMenu from './Menu.vue';
  import LtBadge from '@base/LtBadge.vue';
  import TrialUser from '@components/user/TrialUser.vue';
  import api from '@api/index.js';

  export default {
    name: 'homepage',
    components: {
      'lt-badge': LtBadge,
      'lt-menu': LtMenu,
      'trial-user': TrialUser
    },
    data: function () {
      return {
        data: null
      }
    },
    created() {
//       api.getAccessdMenu().then((res) => {
//         if (res.data.code == '0') {
//           const data = res.data.data;
//           this.data = data;
//         }
//       }).catch((error) => {
//         console.log(error);
//       })
    }
  }
</script>

<style lang="less" scoped>
    @import '../../less/common.less';

    .user {
        height: 100%;
    }

    .logo {
        background: @userBase;

    p {
        font-size: 18px;
        line-height: 40px;
    }

    }
    .title {

    h2 {
        display: inline-block;
        line-height: 60px;
        font-size: 18px;
    }

    }
    .userInfo {

    }

    .block {
        height: 40px;
        width: 100%;
        background: #fff;
        box-shadow: 0px 1px 2px #c9c9c9;
        line-height: 40px;
    }

    .el-menu-item.is-active {
        color: @userBase;
    }

    .el-main {
        background: #dee2ea;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .el-container[data-v-2c8bad12] {
        height: 100%;
    }


</style>