lg_frontend/layouts/manager.vue

<template>
  <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" :default-selected-keys="['4']">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span class="nav-text">nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span class="nav-text">nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span class="nav-text">nav 3</span>
        </a-menu-item>
        <a-menu-item key="4">
          <a-icon type="bar-chart" />
          <span class="nav-text">nav 4</span>
        </a-menu-item>
        <a-menu-item key="5">
          <a-icon type="cloud-o" />
          <span class="nav-text">nav 5</span>
        </a-menu-item>
        <a-menu-item key="6">
          <a-icon type="appstore-o" />
          <span class="nav-text">nav 6</span>
        </a-menu-item>
        <a-menu-item key="7">
          <a-icon type="team" />
          <span class="nav-text">nav 7</span>
        </a-menu-item>
        <a-menu-item key="8">
          <a-icon type="shop" />
          <span class="nav-text">nav 8</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-icon type="arrow-left" style="font-size: 18px; padding-right: 24px;" />
          <a-breadcrumb :routes="routes">
            <template slot="itemRender" slot-scope="{ route, params, routes, paths }">
        <span v-if="routes.indexOf(route) === routes.length - 1">
          {{ route.breadcrumbName }}
        </span>
              <router-link v-else :to="`/${paths.join('/')}`">
                {{ route.breadcrumbName }}
              </router-link>
            </template>
          </a-breadcrumb>
        </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>
</template>

<script>
export default {
  name: "manager",
  data () {
    return {
      collapsed: false,
      headerHeight: 0,
      footerHeight: 0,
      routes: [
        {
          path: 'index',
          breadcrumbName: 'First-level Menu',
        },
      ],
      pageTitle: '123'
    }
  },
  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">
#components-layout-demo-fixed-sider {
  .header-con {
    display: flex;
    justify-content: flex-start;
    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>