From 5a63e79ca7ccf5f6c5ba438902a8328ddf483ef7 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Thu, 13 Apr 2017 14:28:26 +0800
Subject: [PATCH] page header

---
 docs/examples-dist/cell.vue         |  3 +-
 docs/examples-dist/icon.vue         | 10 ++++
 docs/src/components/page-header.vue | 71 +++++++++++++++++++----------
 3 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/docs/examples-dist/cell.vue b/docs/examples-dist/cell.vue
index 7e3a8026b..4561a5ec0 100644
--- a/docs/examples-dist/cell.vue
+++ b/docs/examples-dist/cell.vue
@@ -1,6 +1,7 @@
 <template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
                 <zan-cell-group>
-  <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+  <zan-cell title="单元格1" value="单元格1内容">
+  </zan-cell>
   <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
 </zan-cell-group>
 
diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue
index dfe12daae..bae34702c 100644
--- a/docs/examples-dist/icon.vue
+++ b/docs/examples-dist/icon.vue
@@ -125,6 +125,16 @@
    <span>contact</span>
   </zan-col>
 </zan-row>
+<zan-row>
+  <zan-col span="8">
+   <zan-icon name="wechat"></zan-icon>
+   <span>wechat</span>
+  </zan-col>
+  <zan-col span="8">
+   <zan-icon name="alipay"></zan-icon>
+   <span>alipay</span>
+  </zan-col>
+</zan-row>
 
               </example-block></section></template>
 <style>
diff --git a/docs/src/components/page-header.vue b/docs/src/components/page-header.vue
index 4d333391d..c61b15fdd 100644
--- a/docs/src/components/page-header.vue
+++ b/docs/src/components/page-header.vue
@@ -1,23 +1,25 @@
 <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="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
-      </li>
-      <li class="page-header__item">
-        <a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
-      </li>
-      <li class="page-header__item">
-        <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
-      </li>
-    </ul>
-    <ul class="page-header__subnavs">
+    <div class="page-header__top">
+      <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="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
+        </li>
+        <li class="page-header__item">
+          <a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
+        </li>
+        <li class="page-header__item">
+          <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
+        </li>
+      </ul>
+    </div>
+    <ul class="page-header__subnavs" :class="{ 'page-header__subnavs--shadow': scrollTop > 0 }">
       <li class="page-header__item">
         <a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">基础组件</a>
       </li>
@@ -38,8 +40,21 @@
 export default {
   data() {
     return {
-      version: window._global.version
+      version: window._global.version,
+      scrollTop: 0
     };
+  },
+
+  mounted() {
+    const _this = this;
+    let timer;
+    window.addEventListener('scroll', () => {
+      clearTimeout(timer);
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      let timer = setTimeout(() => {
+        _this.scrollTop = scrollTop;
+      }, 500);
+    });
   }
 };
 </script>
@@ -51,8 +66,13 @@ export default {
     top: 0;
     z-index: 1;
     width: 100%;
-    height: 60px;
-    background-color: #fbfbfb;
+    
+    @e top {
+      overflow: hidden;
+      height: 60px;
+      background-color: #fbfbfb;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+    }
 
     @e logo {
       float: left;
@@ -78,13 +98,16 @@ export default {
     }
 
     @e subnavs {
-      position: absolute;
       line-height: 50px;
-      top: 60px;
       display: flex;
       justify-content: center;
-      width: 100%;
       background-color: #f2f2f2;
+      position: relative;
+      z-index: -1;
+
+      @m shadow {
+        box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+      }
 
       a,
       span {