From a2a60414bf904a41cdf6caff26da9ff634880219 Mon Sep 17 00:00:00 2001
From: dolymood <dolymood@gmail.com>
Date: Fri, 30 Mar 2018 23:06:42 +0800
Subject: [PATCH] doc

---
 document/common/config/menu.json            |  3 ++
 document/components/index/en-US.vue         | 12 +++++---
 document/components/index/index.vue         | 16 +++++-----
 document/components/index/zh-CN.vue         | 34 +++++----------------
 document/components/side-list/side-list.vue | 12 ++++++--
 document/components/viewport/viewport.vue   |  1 +
 6 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/document/common/config/menu.json b/document/common/config/menu.json
index 4d966ba4..00eeb99c 100644
--- a/document/common/config/menu.json
+++ b/document/common/config/menu.json
@@ -2,6 +2,7 @@
   "en-US": {
     "overview": {
       "name": "Overview",
+      "angle": "01",
       "subList": {
         "introduction": "Introduction",
         "quick-start": "QuickStart",
@@ -12,6 +13,7 @@
     },
     "components": {
       "name": "Components",
+      "angle": "02",
       "subList": {
         "basic": {
           "name": "Basic",
@@ -62,6 +64,7 @@
     },
     "modules": {
       "name": "Modules",
+      "angle": "03",
       "subList": {
         "style": "style",
         "create-api": "create-api",
diff --git a/document/components/index/en-US.vue b/document/components/index/en-US.vue
index 5b6502ed..0ed4994b 100644
--- a/document/components/index/en-US.vue
+++ b/document/components/index/en-US.vue
@@ -6,25 +6,29 @@
       <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>
+      <h1 class="h1">High Quality</h1>
+      <h1 class="h2">Quality</h1>
       <p>
         From DiDi interior component library and has been put to business test for more than one year. Every component has full unit tests to provide assurance for continuous integration.
       </p>
     </template>
     <template slot="feature-2">
-      <h1>Experience</h1>
+      <h1 class="h1">Good Experience</h1>
+      <h1 class="h2">Experience</h1>
       <p>
         Make quick response, fluent animation and close to native components as the goal, and pursue the perfection of the interactive experience.
       </p>
     </template>
     <template slot="feature-3">
-      <h1>Standard</h1>
+      <h1 class="h1">Keep Standard</h1>
+      <h1 class="h2">Standard</h1>
       <p>
         Follow a uniform design interaction standard and highly restore the design; Standardize the interface and unify the way of use, making development more simple and efficient.
       </p>
     </template>
     <template slot="feature-4">
-      <h1>Scalability</h1>
+      <h1 class="h1">Design Scalability</h1>
+      <h1 class="h2">Scalability</h1>
       <p>
         Lightweight and flexible: support <router-link to="/en-US/docs/post-compile">post-compile</router-link> and importing on demand; High scalability: it is easy to implement secondary development based on existing components.
       </p>
diff --git a/document/components/index/index.vue b/document/components/index/index.vue
index 4f0aa08b..4c0a7167 100644
--- a/document/components/index/index.vue
+++ b/document/components/index/index.vue
@@ -144,7 +144,7 @@
       li
         flex: 1
         max-width: 220px
-        padding: 60px 16px 20px
+        padding: 60px 16px 10px
         margin: 0 10px
         font-size: 13px
         line-height: 1.4
@@ -154,6 +154,7 @@
           align-items: center
           max-width: initial
           padding-top: 20px
+          padding-bottom: 20px
           text-align: left
           .text
             flex: 1
@@ -161,6 +162,7 @@
         img
           width: 130px
           margin-bottom: 13px
+          transform-origin: center 0
           transition: all .5s
           @media screen and (max-width: 960px)
             width: 90px
@@ -169,11 +171,11 @@
             margin-bottom: 0
         .text
           transition: all .5s
-          .ch
+          .h1
             padding: 7px 0
             font-size: 22px
             color: #333
-          .en
+          .h2
             font-size: 18px
             transition: all .5s
           p
@@ -182,9 +184,9 @@
             opacity: 0
             transition: all .5s
           @media screen and (max-width: 960px)
-            .ch
+            .h1
               font-size: 15px
-            .en
+            .h2
               display: none
             p
               margin-top: 0
@@ -196,8 +198,8 @@
               opacity:1
             img
                 transform: scale(0.5,0.5)
-            .en
+            .h2
               opacity: 0
             .text
-              transform: translateY(-50px)
+              transform: translateY(-75px)
 </style>
diff --git a/document/components/index/zh-CN.vue b/document/components/index/zh-CN.vue
index bdc79ee0..826cfd9e 100644
--- a/document/components/index/zh-CN.vue
+++ b/document/components/index/zh-CN.vue
@@ -5,48 +5,30 @@
       <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>
-        由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。
-      </li>
-      <li>
-        <h1>体验极致</h1>
-        以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
-      </li>
-      <li>
-        <h1>标准规范</h1>
-        遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。
-      </li>
-      <li>
-        <h1>扩展性强</h1>
-        支持按需引入和<router-link to="/zh-CN/docs/post-compile">后编译</router-link>，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
-      </li>
-    </template>
     <template slot="feature-1">
-      <h1 class="ch">质量可靠</h1>
-      <h1 class="en">Quality</h1>
+      <h1 class="h1">质量可靠</h1>
+      <h1 class="h2">Quality</h1>
       <p>
         由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。
       </p>
     </template>
     <template slot="feature-2">
-      <h1 class="ch">体验极致</h1>
-      <h1 class="en">Experience</h1>
+      <h1 class="h1">体验极致</h1>
+      <h1 class="h2">Experience</h1>
       <p>
         以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
       </p>
     </template>
     <template slot="feature-3">
-      <h1 class="ch">标准规范</h1>
-      <h1 class="en">Standard</h1>
+      <h1 class="h1">标准规范</h1>
+      <h1 class="h2">Standard</h1>
       <p>
         遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。
       </p>
     </template>
     <template slot="feature-4">
-      <h1 class="ch">扩展性强</h1>
-      <h1 class="en">Scalability</h1>
+      <h1 class="h1">扩展性强</h1>
+      <h1 class="h2">Scalability</h1>
       <p>
         支持按需引入和<router-link to="/zh-CN/docs/post-compile">后编译</router-link>，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
       </p>
diff --git a/document/components/side-list/side-list.vue b/document/components/side-list/side-list.vue
index cb995db2..ebce1244 100644
--- a/document/components/side-list/side-list.vue
+++ b/document/components/side-list/side-list.vue
@@ -7,6 +7,8 @@
 <script>
   import SideNav from '../side-nav/side-nav.vue'
 
+  let rootNav = {}
+
   export default {
     props: {
       navList: {
@@ -23,13 +25,19 @@
       let docPath = ''
       let root = ''
       const navList = this.navList
-      let rootNav = {}
       this.$watch('$route.path', (newPath) => {
         docPath = newPath.split('/').pop()
-        root = this.seekRoot(navList, docPath)
         if (rootNav) {
           rootNav.hasActived = false
+          if (!root) {
+            rootNav.isRootActive = false
+            setTimeout(() => {
+              const el = document.querySelector('.page-sidelist .nav-active')
+              el && el.scrollIntoView()
+            }, 0)
+          }
         }
+        root = this.seekRoot(navList, docPath)
         rootNav = root && navList[root]
         this.$set(rootNav, 'isRootActive', true)
         this.$set(rootNav, 'hasActived', true)
diff --git a/document/components/viewport/viewport.vue b/document/components/viewport/viewport.vue
index 762e80c8..48d7c348 100644
--- a/document/components/viewport/viewport.vue
+++ b/document/components/viewport/viewport.vue
@@ -143,6 +143,7 @@
           .arrow
             top: 27px
     .page-doc
+      position: relative
       flex: 1
       height: 100%
       padding: 54px 30px 30px
-- 
GitLab