From 7adf2aedd1efc878f3e2695f5cfaab7936ff53ad Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 22 Mar 2017 21:04:27 +0800
Subject: [PATCH] fix docs style

---
 docs/ExamplesDocsApp.vue           | 14 +++++++++-----
 docs/assets/docs.css               | 27 ++++++++++++++++++++++++---
 docs/components/demo-block.vue     | 25 ++++++-------------------
 docs/components/mobile-computed.js |  2 +-
 docs/components/side-nav.vue       |  1 -
 docs/examples-docs/steps.md        |  2 +-
 docs/index.js                      | 10 ----------
 packages/zanui-css/src/steps.css   |  1 +
 8 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue
index 577f4956d..9dcd877d8 100644
--- a/docs/ExamplesDocsApp.vue
+++ b/docs/ExamplesDocsApp.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="page-container clearfix">
-    <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
-    <div class="page-content">
-      <router-view></router-view>
-      <footer-nav></footer-nav>
+  <div class="app">
+    <div class="page-header">
+    </div>
+    <div class="page-container clearfix">
+      <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
+      <div class="page-content">
+        <router-view></router-view>
+        <footer-nav></footer-nav>
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index abd7fdff6..0cd763351 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -22,6 +22,7 @@ body {
   font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
+  background-color: #f8f8f8;
 }
 
 a {
@@ -65,12 +66,32 @@ ul, ol {
   }
 }
 
+.page-header {
+  height: 60px;
+  background-color: #fff;
+}
+
+.page-container {
+  margin: 40px 15px;
+  background-color: #fff;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 10000px;
+    top: 0;
+    left: 220px;
+    background-color: #E5E5E5;
+  }
+}
+
 .page-content {
   box-sizing: border-box;
-  overflow: auto;
   margin-left: 220px;
-  padding: 0 20px;
-  border-left: 1px solid #E5E5E5;
+  padding: 0 40px;
 
   section {
     > h2 {
diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue
index 09fcbabf9..f0291eebf 100644
--- a/docs/components/demo-block.vue
+++ b/docs/components/demo-block.vue
@@ -1,31 +1,16 @@
 <template>
-  <div
-    class="demo-block"
-    :class="blockClass">
+  <div class="demo-block" :class="blockClass">
     <slot name="examples"></slot>
-      <slot name="highlight">
-      </slot>
+    <slot name="highlight"></slot>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    description: String
-  },
-
   computed: {
     blockClass() {
       return `demo-${this.$route.path.split('/').pop()}`;
-    },
-
-    codeAreaHeight() {
-      return Math.max(this.$el.getElementsByClassName('examples')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
     }
-  },
-
-  mounted() {
-    // this.$el.getElementsByClassName('highlight')[0].style.height = `${this.codeAreaHeight + 1}px`;
   }
 };
 </script>
@@ -44,10 +29,12 @@ export default {
       width: 320px;
       float: right;
       box-sizing: border-box;
-      padding: 74px 0 0;
+      padding: 10px 0 0;
       min-height: 200px;
       max-height: 600px;
       overflow: auto;
+      background-color: #F8F8F8;
+      border: 1px solid #E5E5E5;
     }
 
     .highlight {
@@ -66,7 +53,7 @@ export default {
         max-height: none;
         border-radius: 0;
         padding: 20px;
-        background-color: #f8f8f8;
+        background-color: #F8F8F8;
 
         &::before {
           content: none;
diff --git a/docs/components/mobile-computed.js b/docs/components/mobile-computed.js
index 3922294c4..b59fb80e9 100644
--- a/docs/components/mobile-computed.js
+++ b/docs/components/mobile-computed.js
@@ -7,7 +7,7 @@ export default {
 
   computed: {
     mobileUrl() {
-      return '/examples.html#' + location.pathname;
+      return '/examples.html#' + location.pathname.slice(4);
     }
   },
 
diff --git a/docs/components/side-nav.vue b/docs/components/side-nav.vue
index 78996d7c8..3dcae82c3 100644
--- a/docs/components/side-nav.vue
+++ b/docs/components/side-nav.vue
@@ -60,7 +60,6 @@ export default {
     box-sizing: border-box;
     padding: 40px 0;
     float: left;
-    background-color: #fff;
 
     li {
       list-style: none;
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index b0c897217..b5beffa8e 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -6,7 +6,7 @@
     }
 
     .zan-button {
-      margin-left: 15px;
+      margin: 15px 0 0 15px;
     }
   }
 }
diff --git a/docs/index.js b/docs/index.js
index fdfada711..cdbb3a4cb 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -46,16 +46,6 @@ router.beforeEach((route, redirect, next) => {
   next();
 });
 
-router.afterEach((route) => {
-  if (route.path !== '/') {
-    const sideNavBox = document.querySelector('.side-nav');
-    const pageContentBox = document.querySelector('.page-content');
-    if (pageContentBox) {
-      pageContentBox.style.height = Math.max(sideNavBox && sideNavBox.clientHeight, pageContentBox && pageContentBox.clientHeight) + 'px';
-    }
-  }
-});
-
 new Vue({ // eslint-disable-line
   render: h => h(App),
   router
diff --git a/packages/zanui-css/src/steps.css b/packages/zanui-css/src/steps.css
index b2c66eca2..684a1a25d 100644
--- a/packages/zanui-css/src/steps.css
+++ b/packages/zanui-css/src/steps.css
@@ -5,6 +5,7 @@
   @b steps {
     overflow: hidden;
     padding: 0 10px;
+    background-color: #fff;
 
     @m 4 {
       .zan-step {