fix docs style

docs/ExamplesDocsApp.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="page-container clearfix">
+  <div class="app">
-    <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
+    <div class="page-header">
-    <div class="page-content">
+    </div>
-      <router-view></router-view>
+    <div class="page-container clearfix">
-      <footer-nav></footer-nav>
+      <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>

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;
+  padding: 0 40px;
-  border-left: 1px solid #E5E5E5;
 
   section {
     > h2 {

docs/components/demo-block.vue

@@ -1,31 +1,16 @@
 <template>
-  <div
+  <div class="demo-block" :class="blockClass">
-    class="demo-block"
-    :class="blockClass">
     <slot name="examples"></slot>
-      <slot name="highlight">
+    <slot name="highlight"></slot>
-      </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;

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);
     }
   },
 

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;

docs/examples-docs/steps.md

@@ -6,7 +6,7 @@
     }
 
     .zan-button {
-      margin-left: 15px;
+      margin: 15px 0 0 15px;
     }
   }
 }

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

packages/zanui-css/src/steps.css

@@ -5,6 +5,7 @@
   @b steps {
     overflow: hidden;
     padding: 0 10px;
+    background-color: #fff;
 
     @m 4 {
       .zan-step {