lg_frontend/layouts/manager.vue

<template>
  <a-locale-provider :locale="zh_CN">
    <a-layout id="components-layout-demo-fixed-sider">
      <a-layout-sider :trigger="null" v-model="collapsed" collapsible>
        <div class="logo">
          欢迎
        </div>
        <a-menu theme="dark" mode="inline" v-model="selectedKeys">
          <a-menu-item key="1" v-for="item in menus" :key="item.key">
            <a-icon :type="item.icon"/>
            <span class="nav-text">{{ item.title }}</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header
          style="background: #fff; padding: 0"
          ref="header"
          :title="pageTitle"
          :breadcrumb="{ props: { routes } }"
        >
          <div class="header-con">

            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
            />
            <a-menu class="cus-menu">
              <a-sub-menu>
              <span slot="title" class="submenu-title-wrapper">
                <a-icon type="setting"/>
                操作
              </span>
                <a-menu-item key="setting:2">修改密码</a-menu-item>
                <a-menu-item key="setting:1">退出</a-menu-item>
              </a-sub-menu>
            </a-menu>

          </div>


        </a-layout-header>
        <a-layout-content :style="contentStyle">
          <div :style="containerStyle">
            <nuxt/>
          </div>
        </a-layout-content>
        <!--      <a-layout-footer :style="{ textAlign: 'center' }" ref="footer">
                Ant Design ©2018 Created by Ant UED
              </a-layout-footer>-->
      </a-layout>
    </a-layout>
  </a-locale-provider>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';

export default {
  name: "manager",
  data() {
    return {
      zh_CN,
      collapsed: false,
      headerHeight: 0,
      footerHeight: 0,
      routes: [
        {
          path: 'index',
          breadcrumbName: 'First-level Menu',
        },
      ],
      pageTitle: '123',
      menus: [
        {
          link: '/manager/user',
          title: '用户管理',
          icon: 'user',
          key: 'manager-user'
        },
        {
          link: '/manager/role',
          title: '角色管理',
          icon: 'branches',
          key: 'manager-role'
        },
        {
          link: '/manager/menu',
          title: '菜单管理',
          icon: 'link',
          key: 'manager-menu'
        },
        {
          link: '/manager/device',
          title: '设备管理',
          icon: 'video-camera',
          key: 'manager-device'
        },
        {
          link: '/manager/organized',
          title: '工序管理',
          icon: 'video-camera',
          key: 'manager-organized'
        }
      ],
      selectedKeys: []
    }
  },
  watch: {
    '$route': {
      immediate: true,
      handler(to) {
        this.selectedKeys = [to.name]
      }
    },
    selectedKeys([key]) {
      this.$router.push({name: key})
    }
  },
  computed: {
    contentStyle() {
      return {
        margin: '24px 16px 24px',
        overflow: 'inherit',
        height: `calc(100vh - ${this.headerHeight + this.footerHeight + 48}px)`,
      }
    },
    containerStyle() {
      return {
        padding: '24px',
        background: '#fff',
        textAlign: 'center',
        height: `100%`,
        overflow: 'auto',
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.header) {
        this.headerHeight = this.$refs.header.$el.offsetHeight
        // this.footerHeight = this.$refs.footer.$el.offsetHeight
      }
    })
  }
}
</script>

<style scoped lang="less">
.cus-menu {
  /deep/ .ant-menu-submenu-arrow {
    display: none;
  }
}

#components-layout-demo-fixed-sider {
  .header-con {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .trigger:hover {
    color: #1890ff;
  }

  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .logo {
    width: 80%;
    padding: 0 10px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px auto 16px;
    line-height: 31px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    overflow: inherit;

    //
  }
}
</style>