162 lines
4.1 KiB
Vue
162 lines
4.1 KiB
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>
|