diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue
index 120bab31f..8f62fd33f 100644
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@@ -1,22 +1,6 @@
 <template>
   <div class="app">
-    <div class="page-header">
-      <h1 class="page-header-logo">
-        <a href="#"></a>
-      </h1>
-      <ul class="page-header-navs">
-        <li>
-          <a href="#">首页</a>
-        </li>
-        <li>
-          <a href="#" class="active">基础组件</a>
-        </li>
-        <li>
-          <a href="#">业务组件</a>
-        </li>
-      </ul>
-      <a href="#" class="github-logo">Github</a>
-    </div>
+    <page-header></page-header>
     <div class="main-content">
       <div class="page-container clearfix">
         <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
@@ -26,8 +10,7 @@
         </div>
       </div>
     </div>
-    <div class="page-footer">
-    </div>
+    <page-footer></page-footer>
   </div>
 </template>
 
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index f50fa2246..20d4308e8 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -66,49 +66,6 @@ code.hljs {
   }
 }
 
-.page-header {
-  height: 60px;
-  background-color: #fbfbfb;
-  overflow: hidden;
-  padding-right: 62px;
-  position: relative;
-}
-
-.page-header-logo {
-  float: left;
-
-  > a {
-    display: block;
-    width: 78px;
-    height: 20px;
-    background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png);
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin: 20px 0 0 20px;
-  }
-}
-
-.page-header-navs {
-  float: right;
-
-  li {
-    float: left;
-  }
-
-  a {
-    display: block;
-    line-height: 60px;
-    color: #333;
-    font-size: 16px;
-    margin: 0 20px;
-
-    &.active,
-    &:hover {
-      color: #3388FF;
-    }
-  }
-}
-
 .github-logo {
   position: absolute;
   top: 19px;
@@ -123,7 +80,7 @@ code.hljs {
 }
 
 .main-content {
-  margin: 40px 15px;
+  margin: 50px 15px 40px;
 }
 
 .page-container {
@@ -263,9 +220,3 @@ code.hljs {
     padding: 10px;
   }
 }
-
-.page-footer {
-  height: 72px;
-  margin-top: 40px;
-  background-color: #34383B;
-}
diff --git a/docs/components/page-footer.vue b/docs/components/page-footer.vue
new file mode 100644
index 000000000..7a79ba67e
--- /dev/null
+++ b/docs/components/page-footer.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="page-footer">
+    <ul class="page-footer__navs">
+      <li class="page-footer__item">
+        <a href="https://www.youzan.com/" class="page-footer__link" target="_blank">有赞官网</a>
+      </li>
+      <li class="page-footer__item">
+        <a href="#" class="page-footer__link" target="_blank">有赞云</a>
+      </li>
+      <li class="page-footer__item">
+        <a href="https://job.youzan.com/" class="page-footer__link" target="_blank">加入我们</a>
+      </li>
+    </ul>
+    <p class="page-footer__copyright">
+      2012-{{ curYear }} © youzanyun.com -  浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      curYear: (new Date()).getFullYear()
+    };
+  }
+};
+</script>
+
+<style>
+@component-namespace page {
+  @b footer {
+    height: 72px;
+    margin-top: 40px;
+    background-color: #34383B;
+    display: flex;
+    justify-content: center;
+
+    @e item {
+      float: left;
+      margin: 0 20px;
+    }
+
+    @e link {
+      display: block;
+      color: #E5E5E5;
+      font-size: 12px;
+      line-height: 72px;
+    }
+
+    @e copyright {
+      color: #999;
+      font-size: 12px;
+      line-height: 72px;
+      margin-left: 50px;
+    }
+  }
+}
+</style>
diff --git a/docs/components/page-header.vue b/docs/components/page-header.vue
new file mode 100644
index 000000000..f8c83f8de
--- /dev/null
+++ b/docs/components/page-header.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="page-header">
+    <h1 class="page-header__logo">
+      <a href="#"></a>
+    </h1>
+    <ul class="page-header__navs">
+      <li class="page-header__item">
+        <a href="#" class="page-header__link">首页</a>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__link">PC端</a>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__link page-header__link--active">移动端</a>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__link">微信小程序</a>
+      </li>
+    </ul>
+    <ul class="page-header__subnavs">
+      <li class="page-header__item">
+        <a href="#" class="page-header__link page-header__link--active">基础组件</a>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__link">业务组件</a>
+      </li>
+      <li class="page-header__item">
+        <span class="page-header__link">V1.0</span>
+      </li>
+      <li class="page-header__item">
+        <a href="#" class="page-header__github" target="_blank"></a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+@component-namespace page {
+  @b header {
+    height: 60px;
+    background-color: #fbfbfb;
+    position: relative;
+
+    @e logo {
+      float: left;
+
+      > a {
+        display: block;
+        width: 78px;
+        height: 20px;
+        background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        margin: 20px 0 0 20px;
+      }
+    }
+
+    @e navs {
+      float: right;
+    }
+
+    @e item {
+      float: left;
+    }
+
+    @e subnavs {
+      position: absolute;
+      line-height: 50px;
+      top: 60px;
+      display: flex;
+      justify-content: center;
+      width: 100%;
+
+      a,
+      span {
+        line-height: 50px;
+      }
+    }
+
+    @e link {
+      display: block;
+      line-height: 60px;
+      color: #333;
+      font-size: 16px;
+      margin: 0 20px;
+
+      &:hover {
+        color: #3388FF;
+      }
+
+      @m active {
+        color: #3388FF;
+      }
+    }
+
+    @e github {
+      display: inline-block;
+      width: 22px;
+      height: 22px;
+      overflow: hidden;
+      background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fil9peDfgzvk3kj-oFCsElS4FS1x.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      margin: 14px 20px 0;
+    }
+  }
+}
+</style>
diff --git a/docs/index.js b/docs/index.js
index 0869d5632..d24dc7e21 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -6,6 +6,8 @@ import routes from './router.config';
 import SideNav from './components/side-nav';
 import DemoBlock from './components/demo-block';
 import FooterNav from './components/footer-nav';
+import PageHeader from './components/page-header';
+import PageFooter from './components/page-footer';
 import ZanUI from 'src/index.js';
 
 import 'packages/zanui-css/src/index.css';
@@ -24,6 +26,8 @@ Vue.use(ZanUI.Lazyload, {
 Vue.component('side-nav', SideNav);
 Vue.component('demo-block', DemoBlock);
 Vue.component('footer-nav', FooterNav);
+Vue.component('page-header', PageHeader);
+Vue.component('page-footer', PageFooter);
 
 let routesConfig = routes(navConfig);
 routesConfig.push({