UI

98e41a72 · dolymood · afcaf8d5 · 98e41a72 · 98e41a72 · 98e41a72
25 changed file
--- a/document/common/stylus/md.styl
+++ b/document/common/stylus/md.styl
@@ -3,9 +3,7 @@
 .md-body
  font-size: $fontsize-medium
  line-height: 1.6
-  color: $color-dark-grey
-  .hljs
-    background-color: #F9F8F8
+  color: $color-grey
  p
    margin: 1.2em 0
    .anchor
@@ -15,6 +13,7 @@
    margin-bottom: .8em
    font-size: 2em
    font-weight: 600
+    color: $color-dark-grey
  h3
    margin: 1em 0 1em
    font-size: 1.4em
@@ -30,19 +29,35 @@
  table
    // margin 0.8em 1em 0.8em 1em
    width: 100%
-    color: $color-blue
    box-sizing: border-box
    table-layout: fixed
+    border-collapse: separate
+    border: 1px solid #E7E7E7
+    border-width: 1px 0 0 1px
+    border-radius: 4px
    th, td
      padding: 6px 13px
-      border: 1px solid rgb(223, 226, 229)
+      border: 1px solid #E7E7E7
+      border-width: 0 1px 1px 0
      vertical-align: middle
      text-align: left
      word-wrap: break-word
      word-break: break-word
-    th
-      font-weight: 600
-      background-color: #F9F8F8
+    tr
+      th
+        font-weight: 600
+        background-color: #F9F8F8
+        &:first-child
+          border-top-left-radius: 4px
+        &:last-child
+          border-top-right-radius: 4px
+    tr
+      &:last-child
+        td
+          &:first-child
+            border-bottom-left-radius: 4px
+          &:last-child
+            border-bottom-right-radius: 4px
  ul, ol, li
    line-height: 20px
  li
@@ -64,6 +79,33 @@
      line-height: 1
  img
    max-width: 100%
+  .hljs
+    border: 1px solid #E7E7E7
+    color: #666
+    background-color: #F9F8F8
+    border-radius: 4px
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-attribute,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-regexp,
+  .hljs-link,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class
+    color: #3CA0E6
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet
+    color: #3FB374
+  .hljs-tag
+    color: #666
+  .hljs-attr
+    .hljs-tag
+      color: #fc9153
+      .hljs-attr
+        color: #fc9153
 pre
  margin: .8em 0
  font-size: 12px

--- a/document/components/badge/badge.vue
+++ b/document/components/badge/badge.vue
 <template>
-  <div class="badge">
-    <span class="badge-left">{{badgeName}}</span>
+  <div class="badge" :class="badgeValue&&'badge-visible'">
+    <span class="badge-left">{{badgeName||type}}</span>
    <span class="badge-right">
    {{badgeValue}}</span>
  </div>
@@ -36,7 +36,6 @@
        let url = urlMap[badge]
        ajax(url).then((response) => {
          let result = JSON.parse(response)
-          console.log(result)
          this.badgeName = result.name
          this.badgeValue = result.value
        })
@@ -48,19 +47,23 @@
  .badge
    display: inline-block
    text-align: center
+    visibility: hidden
    border: 1px #4AA8FF solid
    border-radius: 3px
-    font-size: 0px
-    color: #000000
-    margin-right: 3px
+    color: #545454
+    margin: 5px
+    overflow: hidden
    span
      display: inline-block
      font-size: 12px
    .badge-left
-      padding: 4px 11px
+      padding: 4px 10px
+      color: #fff
      background-color: #89C6FF
    .badge-right
-      padding: 4px 11px
+      padding: 4px 10px
      border-left: 1px #4AA8FF solid
      background-color: white
+  .badge-visible
+    visibility: visible
 </style>
--- a/document/components/display/display.vue
+++ b/document/components/display/display.vue
@@ -39,22 +39,24 @@
  .page-display
    position: relative
    .display-wrapper
-      position: relative 
+      position: relative
      width: 330px
      height: 645px
      top: 50%
      transform: translate(0, -50%)
-      background: url("./iphoneX.png") no-repeat
-      background-size: cover
-      margin: 0 45px
+      margin: 0 56px 0 26px
+      background: url("./iphoneX.png") no-repeat center 0
+      background-size: 100%
      .mofang-demo
        position: absolute
        top: 64px
-        left: 22px
-        right: 22px
-        bottom: 36px
+        left: 21px
+        right: 23px
+        bottom: 22px
        overflow: hidden
        border-radius: 0 0 35px 35px
+        border: 1px solid #edf0f4
+        border-top: none
        background-color: #edf0f4
        iframe
          // safari shit

--- a/document/components/display/iphoneX.png
+++ b/document/components/display/iphoneX.png
--- a/document/components/example/example-QR.png
+++ b/document/components/example/example-QR.png
--- a/document/components/example/example.vue
+++ b/document/components/example/example.vue
 <template>
  <div class="home-example">
-    <a :href="baseUrl" class="online-link">Online Example</a>
-    <img src="https://raw.githubusercontent.com/didichuxing/cube-ui/master/assets/example-qr.png?token=ACBfUmDS85HOeaGQI49yS9qYyJOd0joSks5aCQpvwA%3D%3D">
-    <display></display>
+    <div class="example-main">
+      <display></display>
+      <div class="example-desc">
+        <a :href="baseUrl" class="online-link">Online Example</a>
+        <img src="./example-QR.png">
+      </div>
+    </div>
  </div>
 </template>

@@ -23,15 +27,43 @@
 <style lang="stylus">
  .home-example
    position: relative
-    width: 348px
-    margin: 50px auto
-    overflow: hidden
    text-align: center
+    &::before
+      content: ""
+      position: relative
+      z-index: 5
+      display: block
+      width: 100%
+      height: 1px
+      margin-top: -1px
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .15)
+    .example-main
+      display: flex
+      align-items: center
+      justify-content: center
+      // width: 348px
+      // margin: auto
+      padding: 50px 0
+      overflow: hidden
+      @media screen and (max-width: 960px)
+        width: 330px
+        flex-wrap: wrap
+        margin: auto
+        .example-desc
+          order: -1
+          width: 280px
+          margin: 0 auto 30px
+    .example-desc
+      margin-left: 100px
    .online-link, img
-      display: inline-block
+      display: block
      margin-bottom: 20px
+    img
+      width: 280px
+      height: 280px
    .page-display
      .display-wrapper
-        margin: 0
+        margin: auto
        transform: none
+        top: auto
 </style>
--- a/document/components/footer/footer.vue
+++ b/document/components/footer/footer.vue
+<template>
+  <footer class="s-footer">
+    <a href="https://github.com/didi">© 2012-2018 DiDiChuxing. All Rights Reserved.</a>
+  </footer>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="stylus">
+  .s-footer
+    width: 100%
+    padding-top: 60px
+    padding-bottom: 20px
+    text-align: center
+    font-size: 14px
+    a
+      color: #4B4B4C
+</style>
--- a/document/components/home/home.vue
+++ b/document/components/home/home.vue
 <template>
-  <div class="home-view">
+  <div class="home-view" :class="{'home-view-docs': isDocs}">
    <div class="navigator" :class="{ active: showTabs }">
      <div class="logo">
        <router-link to="/"><img src="./didi-logo.svg" alt="DiDi"></router-link>
      </div>
      <div class="tabs">
+        <i></i>
        <slot name="nav"></slot>
        <site-lang></site-lang>
      </div>
-      <span class="toggle-nav" @click="toggleNav">
-        <svg class="icon" viewBox="0 0 1024 1024" width="32" height="32">
-          <path d="M151.990813 175.990625h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743807a35.999719 35.999719 0 0 1-35.999718 35.999718h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999718V211.990344a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 288.741744h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v22.511824a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-22.511824a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 286.509762h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743806a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-24.743806a35.999719 35.999719 0 0 1 35.999719-35.999719z" fill="#dedcdc"></path>
-        </svg>
-      </span>
+      <span class="toggle-nav" @click="toggleNav"><i></i></span>
    </div>
    <div class="router-view">
      <nav-loading></nav-loading>
@@ -59,66 +56,112 @@
    box-sizing: border-box
    padding-top: 70px
    transition: all 250ms ease
+    @media screen and (max-width: 960px)
+      padding-top: 48px
+      &.home-view-docs
+        overflow: hidden
+        height: auto
+        .toggle-nav
+          display: none!important
    .router-view
      height: 100%
  .navigator
+    position: relative
    height: 70px
    line-height: 70px
-    padding: 0 80px
+    padding: 0 100px
    margin-top: -70px
    transition: all 0.3s ease
-    overflow: hidden
    @media screen and (max-width: 960px)
      padding: 0
-      background-color: transparent
+      height: 48px
+      line-height: 48px
+      margin-top: -48px
+      &.active
+        .tabs
+          transition: transform .2s
+          transform: scale(1)
    .toggle-nav
      display: none
+      font-size: 0
+      i, &::before, &::after
+        display: inline-block
+        width: 5px
+        height: 5px
+        border-radius: 50%
+        background-color: #646464
+      i
+        margin: 0 2px
+      &::before, &::after
+        content: ""
+        width: 3px
+        height: 3px
      @media screen and (max-width: 960px)
        display: flex
        position: absolute
-        left: 10px
+        right: 0
        top: 0
-        width: 40px
-        height: 70px
+        padding: 0 16px
+        height: 100%
        align-items: center
        justify-content: center
      &:active
        opacity: .6
-      img
-        width: 20px
-        height: 20px
-    &.active
-      height: 255px
-      .tabs
-          height: auto
    .logo
      float: left
-      padding: 0 28px
-      height: 70px
+      padding: 0 16px
+      height: 100%
      @media screen and (max-width: 960px)
        float: none
        text-align: center
+        img
+          transform: scale(1.6)
      img
        height: 100%
    .tabs
      float: right
      padding: 0 30px
      box-shadow: none
-      height: 0
      @media screen and (max-width: 960px)
-        float: none
-        padding: 0
-        background-color: #fbfbfb
-        box-shadow: 0 -2px 8px rgba(0,0,0,0.1)
+        position: absolute
+        z-index: 10
+        right: 10px
+        padding: 0 0 0 2px
+        margin-top: -12px
+        font-size: 12px
+        background-color: #fff
+        border: 1px solid #e5e5e5
+        border-radius: 3px
+        transform: scale(0)
+        transform-origin: 84% 0
+        i
+          position: absolute
+          top: -5px
+          right: 7px
+          width: 10px
+          height: 5px
+          background-color: #fff
+          &::before, &::after
+            content: ""
+            position: absolute
+            bottom: 0
+            right: 3px
+            width: 8px
+            border-top: 1px solid #e5e5e5
+            transform: rotate(-40deg)
+            transform-origin: left bottom
+          &::after
+            right: 0
+            transform: rotate(40deg)
+            transform-origin: right bottom
      .tab
        display: inline-block
-        margin: 0 10px
+        margin: 0 18px
        color: #4B4B4C
        transition: color .2s
        @media screen and (max-width: 960px)
          display: block
-          line-height: 45px
-          margin: 0 20px
+          line-height: 36px
          color: black
        &:hover
          color: $color-orange

--- a/document/components/index/cube.png
+++ b/document/components/index/cube.png
--- a/document/components/index/en-US.vue
+++ b/document/components/index/en-US.vue
 <template>
  <home-index>
    <template slot="desc">A fantastic mobile ui lib implement by Vue.js</template>
+    <template slot="rec-btns">
+      <router-link to="/en-US/docs/introduction" class="btn-link"><span>Introduction</span></router-link>
+      <router-link to="/en-US/docs/quick-start" class="btn-link btn-active"><span>Quick Start</span></router-link>
+    </template>
    <template slot="feature-1">
      <h1>Quality</h1>
      <p>

--- a/document/components/index/experience.png
+++ b/document/components/index/experience.png
--- a/document/components/index/index.vue
+++ b/document/components/index/index.vue
@@ -10,9 +10,8 @@
        <Badge type="Fork"></Badge>
        <Badge type="Watch"></Badge>
      </div>
-      <div>
-        <router-link to="/zh-CN/docs/introduction" class="btn-link"><span>介绍</span></router-link>
-        <router-link to="/zh-CN/docs/quick-start" class="btn-link btn-active"><span>快速开始</span></router-link>
+      <div class="rec-btns">
+        <slot name="rec-btns"></slot>
      </div>
    </div>
    <section class="features">
@@ -42,18 +41,19 @@
          </div>
        </li>
      </ul>
-      <footer>
-        <a href="https://github.com/didi">© 2012-2017 Didi Chuxing. All Rights Reserved</a>
-      </footer>
    </section>
+    <sfooter />
  </div>
 </template>

 <script>
  import Badge from '../badge/badge.vue'
+  import Sfooter from '../footer/footer.vue'
+
  export default {
    components: {
-      Badge
+      Badge,
+      Sfooter
    }
  }
 </script>
@@ -66,46 +66,72 @@
    text-align: center
    background-size: cover
    > .banner
-      padding: 190px 198px 210px 198px
+      padding: 190px 140px 70px
      margin-top: -70px
      text-align: left
      color: #4B4B4C
-      background: url("./cube.png") no-repeat 520px -31px
-      background-size: 1515px 696px
+      background: url("./cube.png") no-repeat 520px -10px
+      background-size: 1250px
      @media screen and (max-width: 960px)
-        padding: 40px 0 30px 0
-        margin-top: 0
-        text-align: center
+        padding: 254px 32px 20px
+        margin-top: -48px
+        text-align: left
+        background-position: 6% 0
+        background-size: 186%
+        .ghbtns
+          margin-left: -5px
+          margin-right: -5px
+        .btn-link
+          width: 140px
+          margin-right: 15px
+          font-size: 14px
+          border-width: 1px
      h2
        font-size: 60px
+        color: #333
        @media screen and (max-width: 960px)
          font-size: 30px
      > p
-        margin: 30px 0 26px 0
+        margin: 30px 0 20px 0
        font-size: 18px
+        @media screen and (max-width: 960px)
+          font-size: 12px
+  .ghbtns
+    font-size: 0
+  .rec-btns
+    margin-top: 36px
  .btn-link
    display: inline-block
    box-sizing: border-box
    width: 164px
    height: 42px
    text-align: center
-    line-height: 42px
+    line-height: 38px
    font-size: $fontsize-large-x
-    color: #000000
+    color: #fff
    background-color: #89C6FF
    border-radius: 3px
-    margin-top: 36px
+    margin-bottom: 10px
    margin-right: 18px
    border: 2px solid #89C6FF
+    &:hover
+      color: #fff
+      background-color: #80c1ff
+      border-color: #80c1ff
+    &:last-child
+      margin-right 0!important
  .btn-active
+    color: #89c6ff
    background-color: white
+    &:hover
+      color: #137dc6
+      background-color: #fff
  .features
-    padding: 60px 0 20px 0
-    background-color: #FBFBFB
-    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1)
+    margin: 0 90px
+    box-shadow: 0 4px 30px 0 rgba(66, 81, 148, 0.1)
    @media screen and (max-width: 960px)
-      margin: 30px auto 0
-      padding: 30px 0
+      margin: 10px auto 0
+      box-shadow: none
    > ul
      display: flex
      justify-content: space-around
@@ -118,46 +144,60 @@
      li
        flex: 1
        max-width: 220px
-        padding: 10px 16px 20px
+        padding: 60px 16px 20px
        margin: 0 10px
        font-size: 13px
        line-height: 1.4
        text-align: center
        @media screen and (max-width: 960px)
+          display: flex
+          align-items: center
          max-width: initial
-          margin-bottom: 20px
+          padding-top: 20px
+          text-align: left
+          .text
+            flex: 1
+            margin-top: -7px
        img
          width: 130px
          margin-bottom: 13px
          transition: all .5s
+          @media screen and (max-width: 960px)
+            width: 90px
+            height: 90px
+            margin-right: 16px
+            margin-bottom: 0
        .text
          transition: all .5s
          .ch
            padding: 7px 0
-            text-align: center
            font-size: 22px
-            color: #000000
+            color: #333
          .en
-            text-align: center
            font-size: 18px
            transition: all .5s
          p
-            font-size: 16px
-            color: #000000
+            margin-top: -18px
+            font-size: 14px
            opacity: 0
            transition: all .5s
-        &:hover
-          p
-            opacity:1
-          img
-              transform: scale(0.5,0.5)
-          .en
-            opacity: 0
-          .text
-            transform: translateY(-50px)
-    footer
-      margin-top: 60px
-      font-size: 14px
-      a
-        color: #4B4B4C
+          @media screen and (max-width: 960px)
+            .ch
+              font-size: 15px
+            .en
+              display: none
+            p
+              margin-top: 0
+              opacity: 1
+              font-size: 12px
+        @media screen and (min-width: 961px)
+          &:hover
+            p
+              opacity:1
+            img
+                transform: scale(0.5,0.5)
+            .en
+              opacity: 0
+            .text
+              transform: translateY(-50px)
 </style>
--- a/document/components/index/quality.png
+++ b/document/components/index/quality.png
--- a/document/components/index/scalability.png
+++ b/document/components/index/scalability.png
--- a/document/components/index/standard.png
+++ b/document/components/index/standard.png
--- a/document/components/index/zh-CN.vue
+++ b/document/components/index/zh-CN.vue
 <template>
  <home-index>
    <template slot="desc">基于 Vue.js 实现的精致移动端组件库</template>
+    <template slot="rec-btns">
+      <router-link to="/zh-CN/docs/introduction" class="btn-link"><span>介绍</span></router-link>
+      <router-link to="/zh-CN/docs/quick-start" class="btn-link btn-active"><span>快速上手</span></router-link>
+    </template>
    <template slot="features">
      <li>
        <h1>质量可靠</h1>

--- a/document/components/nav-loading/nav-loading.vue
+++ b/document/components/nav-loading/nav-loading.vue
@@ -61,7 +61,7 @@
    position: absolute
    width: 100%
    height: 2px
-    background: #009a61
+    background: #3ca0e6
    transform: translateX(-100%)
  .nav-loading-ani
    animation: navloading 2s linear forwards

--- a/document/components/side-list/side-list.vue
+++ b/document/components/side-list/side-list.vue
@@ -27,8 +27,12 @@
      this.$watch('$route.path', (newPath) => {
        docPath = newPath.split('/').pop()
        root = this.seekRoot(navList, docPath)
+        if (rootNav) {
+          rootNav.hasActived = false
+        }
        rootNav = root && navList[root]
        this.$set(rootNav, 'isRootActive', true)
+        this.$set(rootNav, 'hasActived', true)
      }, {immediate: true})
    },
    methods: {

--- a/document/components/side-nav/side-nav.vue
+++ b/document/components/side-nav/side-nav.vue
 <template>
  <ul class="nav-ul">
-    <li class="nav-li" v-for="(item, key) in data" :class="{open: item.isRootActive}" :key="key">
+    <li class="nav-li" v-for="(item, key) in data" :class="{'nav-li_open': item.isRootActive, 'nav-li_active': item.hasActived}" :key="key">
      <template v-if="item.name">
        <p class="nav-name" @click="derail(item)">{{item.name}}</p>
        <side-nav :data="item.subList"></side-nav>
@@ -41,62 +41,59 @@
  @require "~@/common/stylus/variable.styl"
  .nav-ul
    font-size: 100%
-    .nav-ul
-      font-size: 96%
  .nav-li
    // margin-left: .4em
-    margin-bottom: 10px
    position:relative
-    max-height: 74px
+    max-height: 75px
    overflow: hidden
-    trasition: all 0.2s
+    // transition: all .2s linear
    .angle
      position: absolute
      left: 30px
-      top: 0
+      top: 12px
      font-size: 22px
-      color: #000000
+      color: #cdcdcd
    .arrow
      width: 10px
      height: 10px
      position: absolute
-      right: 17px
+      right: 48px
      top: 32px
      transition: all 300ms
      &::after, &::before
        width: 0
        height: 0
-        content: ' '
+        content: ""
        border: 5px solid transparent
        border-top: 5px solid #fff
        position: absolute
        top: 0
        right: 0px
      &::before
-        border-top-color: #000000
+        border-top-color: #333
        top: 2px
    .rotate
      transform: rotate(180deg)
    .nav-name
-      font-size: $fontsize-large-xxx
-      color: #000000
+      font-size: 1.5em
      border-bottom: #E3E3E3 solid 1px
      padding: 15px 0 15px 30px
      margin-left: 30px
+      margin-right: 30px
      cursor: pointer
    .nav-li
      text-indent: 60px
      line-height: 30px
-      max-height: 2000px
+      max-height: none
      a
        padding: 5px 0
      .nav-name
-        font-size: $fontsize-large-x
-        color: #000000
+        font-size: 1.125em
        border: none
        padding: 0
        margin: 0
        line-height: 50px
+        color: #969799
      .nav-li
        text-indent: 80px
    a
@@ -106,19 +103,29 @@
      color: $color-grey
      &:hover, &.nav-active
        color: $color-orange
+      &:hover
+        border-right: 1px solid #e3e3e3
+        background-color: #fbfbfb
      &.nav-active
+        background-color: rgba(252, 145, 83, .2)
        &::after
          content: ""
-          width: 20px
+          width: 3px
          height: 100%
-          background-color: #FFC9A9
+          background-color: #fc9153
          position: absolute
          z-index: 1
-          left: 0
+          right: 0
          top: 0
-  .open
+  .nav-li_open
    // height: auto
    max-height: 2000px
+  .nav-li_active
+    .arrow
+      &::before
+        border-top-color: #fc9153
+    > .nav-name
+      color: #fc9153
  .nav-name
    margin: 10px 0
    font-size: $fontsize-large-xx

--- a/document/components/viewport/back.svg
+++ b/document/components/viewport/back.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1522399192203" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3633" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M268.896 476.032 622.24 125.92c18.848-18.656 49.216-18.528 67.872 0.32 18.656 18.816 18.528 49.216-0.32 67.872l-319.456 316.576 318.176 321.056c18.656 18.816 18.528 49.216-0.32 67.872-9.344 9.28-21.568 13.92-33.792 13.92-12.352 0-24.704-4.736-34.08-14.208L270.208 545.984c-0.512-0.512-0.672-1.248-1.184-1.792-0.128-0.128-0.288-0.16-0.416-0.288C249.952 525.088 250.08 494.688 268.896 476.032z" p-id="3634" fill="#646464"></path></svg>
\ No newline at end of file
--- a/document/components/viewport/catalog.svg
+++ b/document/components/viewport/catalog.svg
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510649316482" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3762" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M887.212102 264.644379 320.083527 264.644379c-29.826306 0-54.012148-23.896246-54.012148-53.723575s24.185842-53.723575 54.012148-53.723575l567.127552 0c29.827329 0 54.012148 23.896246 54.012148 53.723575S917.039431 264.644379 887.212102 264.644379zM887.212102 562.426483 320.083527 562.426483c-29.826306 0-54.012148-24.408923-54.012148-54.235229 0-29.828352 24.185842-54.235229 54.012148-54.235229l567.127552 0c29.827329 0 54.012148 24.406876 54.012148 54.235229C941.22425 538.018583 917.039431 562.426483 887.212102 562.426483zM887.212102 859.18528 320.083527 859.18528c-29.826306 0-54.012148-24.407899-54.012148-54.235229s24.185842-54.235229 54.012148-54.235229l567.127552 0c29.827329 0 54.012148 24.407899 54.012148 54.235229S917.039431 859.18528 887.212102 859.18528zM153.565003 257.94377l-47.261397 0c-13.05534 0-23.630187-10.601452-23.630187-23.655769l0-47.234791c0-13.080923 10.574846-23.630187 23.630187-23.630187l47.261397 0c13.054317 0 23.630187 10.549264 23.630187 23.630187l0 47.234791C177.19519 247.341295 166.61932 257.94377 153.565003 257.94377L153.565003 257.94377zM153.565003 852.076372l-47.261397 0c-13.05534 0-23.630187-10.600429-23.630187-23.655769l0-47.233768c0-13.080923 10.574846-23.63121 23.630187-23.63121l47.261397 0c13.054317 0 23.630187 10.550287 23.630187 23.63121l0 47.233768C177.19519 841.475943 166.61932 852.076372 153.565003 852.076372L153.565003 852.076372zM153.565003 541.507034l-47.261397 0c-13.05534 0-23.630187-10.601452-23.630187-23.655769l0-47.234791c0-13.080923 10.574846-23.630187 23.630187-23.630187l47.261397 0c13.054317 0 23.630187 10.549264 23.630187 23.630187l0 47.234791C177.19519 530.905582 166.61932 541.507034 153.565003 541.507034L153.565003 541.507034z" p-id="3763" fill="#333333"></path></svg>
\ No newline at end of file
--- a/document/components/viewport/close.svg
+++ b/document/components/viewport/close.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1522397761382" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2561" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M822.00345 776.822434l0.022513-0.022513L246.50423 201.317075c-5.78782-5.791913-13.785981-9.374508-22.621207-9.374508-17.662265 0-31.980365 14.3181-31.980365 31.980365 0 8.834202 3.582595 16.832364 9.373485 22.620184L776.11226 821.339324c5.838985 6.277984 14.166651 10.209526 23.416316 10.209526 17.662265 0 31.980365-14.3181 31.980365-31.980365C831.508941 790.667767 827.871087 782.620487 822.00345 776.822434z" p-id="2562" fill="#646464"></path><path d="M776.783549 201.448058l-0.022513-0.022513L201.278189 776.947278c-5.791913 5.78782-9.374508 13.785981-9.374508 22.621207 0 17.662265 14.3181 31.980365 31.980365 31.980365 8.834202 0 16.832364-3.582595 22.620184-9.373485l574.797231-574.836117c6.277984-5.838985 10.209526-14.166651 10.209526-23.416316 0-17.662265-14.3181-31.980365-31.980365-31.980365C790.628882 191.942567 782.580578 195.58042 776.783549 201.448058z" p-id="2563" fill="#646464"></path></svg>
\ No newline at end of file
--- a/document/components/viewport/menu.svg
+++ b/document/components/viewport/menu.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1522397145771" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M128 213.34016l768 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-768 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928zM128 725.34016l768 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-768 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928zM128 469.34016l768 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-768 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928z" p-id="1900" fill="#646464"></path></svg>
--- a/document/components/viewport/viewport.vue
+++ b/document/components/viewport/viewport.vue
 <template>
  <div class="docs-view">
-    <img class="toggle-catalog" @click="toggleCatalog" src="./catalog.svg">
+    <img class="menu" v-show="showCatalog" @click="toggleCatalog" src="./close.svg">
+    <img class="menu" v-show="!showCatalog" @click="toggleCatalog" src="./menu.svg">
+    <img class="menu to-home" @click="toHome" src="./back.svg">
+    <div v-show="showCatalog" class="mask" :class="{ active: showCatalog }" @click="toggleCatalog"></div>
    <div class="nav-list-wrapper" :class="{ active: showCatalog }">
      <side-list :nav-list="navList"></side-list>
    </div>
-    <div v-show="showCatalog" class="mask" :class="{ active: showCatalog }" @click="toggleCatalog"></div>
    <router-view class="page-doc md-body" v-highlight></router-view>
    <display></display>
  </div>
@@ -37,6 +39,9 @@
    methods: {
      toggleCatalog() {
        this.showCatalog = !this.showCatalog
+      },
+      toHome() {
+        this.$router.push('/')
      }
    },
    mounted () {
@@ -65,33 +70,37 @@
    height: 100%
    box-sizing: border-box
    flex-wrap: wrap
-    overflow: hidden
-    &::after
+    &::before
      content: ""
-      position: absolute
-      left: 0
-      top: 0
-      bottom: 0
-      border-left: #FC9153 10px solid
+      position: relative
+      z-index: 5
+      display: block
+      width: 100%
+      height: 1px
+      margin-top: -1px
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .15)
    @media screen and (max-width: 960px)
      position: relative
      height: auto
-    .toggle-catalog
+    .menu
      display: none
      @media screen and (max-width: 960px)
        display: block
        position: absolute
-        right: 20px
-        top: 20px
+        right: 6px
+        top: -44px
        width: 20px
        height: 20px
        padding: 10px
-        background-color: $color-white
-        box-shadow: $box-shadow-content
+        &.to-home
+          right: auto
+          left: 3px
      &:active
        opacity: .6
    .nav-list-wrapper
+      width: 279px
      height: 100%
+      border-right: 1px solid #e3e3e3
      @media screen and (max-width: 960px)
        position: absolute
        right: 0
@@ -101,38 +110,49 @@
        overflow: hidden
        transform: translate(100%, 0)
        transition: all 0.4s ease
+        border-right: none
        &.active
          transform: translate(0, 0)
-    .mask
-      position: absolute
-      top: 0
-      left: 0
-      width: 100%
-      height: 100%
-      background-color: transparent
-      &.active
-        background-color: rgba(0, 0, 0 ,0.2)
-        transition: all 0.4s ease
+    @media screen and (max-width: 960px)
+      .mask
+        z-index: 1
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        background-color: transparent
+        &.active
+          background-color: rgba(0, 0, 0 ,0.05)
+          transition: all 0.4s ease
    .page-sidelist
-      flex: none
-      width: 280px
      height: 100%
+      padding: 50px 0
+      margin-right: -1px
      box-sizing: border-box
      overflow-y: auto
-      padding-right: 40px
      @media screen and (max-width: 960px)
        height: 100%
-        padding: 5px 20px
+        padding: 30px 0
+        font-size: 12px
+        .nav-li
+          .nav-name
+            font-size: 15px
+          .angle
+            font-size: 12px
+          .arrow
+            top: 27px
    .page-doc
      flex: 1
      height: 100%
-      padding: 44px 20px 20px 20px
+      padding: 54px 30px 30px
      box-sizing: border-box
      overflow-y: auto
      @media screen and (max-width: 960px)
        flex: 1 1 100%
        height: auto
-        padding: 20px 20px 0 20px
+        padding: 20px
+        font-size: 13px
      h2:first-child
        margin-top: 0
    .page-display
@@ -141,5 +161,5 @@
      overflow-y: auto
      @media screen and (max-width: 960px)
        flex: 1 1 100%
-        height: 800px
+        height: 680px
 </style>
--- a/example/components/cube-page.vue
+++ b/example/components/cube-page.vue
@@ -58,7 +58,7 @@
      height: 44px
      line-height: 44px
      text-align: center
-      background-color: #f7f7f7
+      background-color: #edf0f4
      box-shadow: 0 1px 6px #ccc
      -webkit-backface-visibility: hidden
      backface-visibility: hidden