|
|
|
|
<cn>
|
|
|
|
|
#### 固定头部
|
|
|
|
|
一般用于固定顶部导航，方便页面切换。
|
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
|
|
<us>
|
|
|
|
|
#### Fixed Header
|
|
|
|
|
Fixed Header is generally used to fix the top navigation to facilitate page switching.
|
|
|
|
|
</us>
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<template>
|
|
|
|
|
<a-layout id="components-layout-demo-fixed">
|
|
|
|
|
<a-layout-header :style="{ position: 'fixed', width: '100%' }">
|
|
|
|
|
<div class="logo" />
|
|
|
|
|
<a-menu
|
|
|
|
|
theme="dark"
|
|
|
|
|
mode="horizontal"
|
|
|
|
|
:defaultSelectedKeys="['2']"
|
|
|
|
|
:style="{ lineHeight: '64px' }"
|
|
|
|
|
>
|
|
|
|
|
<a-menu-item key="1">nav 1</a-menu-item>
|
|
|
|
|
<a-menu-item key="2">nav 2</a-menu-item>
|
|
|
|
|
<a-menu-item key="3">nav 3</a-menu-item>
|
|
|
|
|
</a-menu>
|
|
|
|
|
</a-layout-header>
|
|
|
|
|
<a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
|
|
|
|
|
<a-breadcrumb :style="{ margin: '16px 0' }">
|
|
|
|
|
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
|
|
|
|
<a-breadcrumb-item>List</a-breadcrumb-item>
|
|
|
|
|
<a-breadcrumb-item>App</a-breadcrumb-item>
|
|
|
|
|
</a-breadcrumb>
|
|
|
|
|
<div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">Content</div>
|
|
|
|
|
</a-layout-content>
|
|
|
|
|
<a-layout-footer :style="{ textAlign: 'center' }">
|
|
|
|
|
Ant Design ©2016 Created by Ant UED
|
|
|
|
|
</a-layout-footer>
|
|
|
|
|
</a-layout>
|
|
|
|
|
</template>
|
|
|
|
|
<style>
|
|
|
|
|
#components-layout-demo-fixed .logo {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
background: rgba(255,255,255,.2);
|
|
|
|
|
margin: 16px 24px 16px 0;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
```
|
