Homepage: update style and some docs (#877)

examples/app.vue

@@ -40,7 +40,7 @@
     background-color: #f9fafc;
     border: solid 1px #eaeefb;
     margin-bottom: 25px;
-    border-radius: 2px;
+    border-radius: 4px;
     -webkit-font-smoothing: auto;
   }
 

examples/components/header.vue

@@ -83,14 +83,6 @@
       }
     }
   }
-  .header-fixed {
-    position: fixed;
-    top: -80px;
-    box-shadow: 0 2px 6px 0 rgba(50, 63, 87, 0.25);
-  }
-  .header-hangUp {
-    top: 0;
-  }
   .header-home {
     position: fixed;
     top: 0;
@@ -103,9 +95,7 @@
     ref="header"
     :style="headerStyle"
     :class="{
-      'header-home': isHome,
-      'header-fixed': isFixed,
-      'header-hangUp': hangUp
+      'header-home': isHome
     }">
       <div class="container">
         <h1><router-link to="/">Element<span>Beta</span></router-link></h1>
@@ -139,10 +129,8 @@
     data() {
       return {
         active: '',
-        isFixed: false,
         isHome: false,
-        headerStyle: {},
-        hangUp: false
+        headerStyle: {}
       };
     },
     watch: {
@@ -154,43 +142,16 @@
     mounted() {
       this.isHome = this.$route.path === '/';
       function scroll(fn) {
-        var beforeScrollTop = document.body.scrollTop;
-
         window.addEventListener('scroll', () => {
-          const afterScrollTop = document.body.scrollTop;
-          var delta = afterScrollTop - beforeScrollTop;
-
-          if (delta === 0) return false;
-
-          fn(delta > 0 ? 'down' : 'up');
-          beforeScrollTop = afterScrollTop;
+          fn();
         }, false);
       }
-      scroll((direction) => {
+      scroll(() => {
         if (this.isHome) {
-          this.hangUp = false;
-          this.isFixed = false;
-          this.headerStyle.transition = '';
           const threshold = 200;
           let alpha = Math.min(document.body.scrollTop, threshold) / threshold;
           this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
-          return;
-        }
-        this.headerStyle.backgroundColor = 'rgba(32, 160, 255, 1)';
-        const bounding = this.$el.getBoundingClientRect();
-        if (bounding.bottom < 0) {
-          this.isFixed = true;
-          this.$nextTick(() => {
-            this.headerStyle.transition = 'all .5s ease';
-          });
-        }
-        if (bounding.top === 0) {
-          this.isFixed = false;
-          this.$nextTick(() => {
-            this.headerStyle.transition = '';
-          });
         }
-        this.hangUp = direction === 'up';
       });
     }
   };

examples/docs/zh-cn/date-picker.md

@@ -95,7 +95,7 @@
   }
 </style>
 
-## Date Picker 日期选择器
+## DatePicker 日期选择器
 
 用于选择或输入日期
 

examples/docs/zh-cn/datetime-picker.md

@@ -96,7 +96,7 @@
   }
 </style>
 
-## 日期时间选择器
+## DateTimePicker 日期时间选择器
 
 在同一个选择器里选择日期和时间
 

examples/docs/zh-cn/dialog.md

@@ -64,6 +64,9 @@
     .el-input {
       width: 300px;
     }
+    .el-button--text {
+      margin-right: 15px;
+    }
   }
 </style>
 ## Dialog 对话框

examples/docs/zh-cn/input-number.md

@@ -22,7 +22,7 @@
   }
 </style>
 
-## Input Number 数字输入框
+## InputNumber 计数器
 
 仅允许输入标准的数字值，可定义范围
 

examples/docs/zh-cn/message-box.md

@@ -72,7 +72,7 @@
     }
   };
 </script>
-## Message box 信息提示
+## MessageBox 弹框
 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。
 
 ### 消息提示

examples/docs/zh-cn/time-picker.md

@@ -6,7 +6,7 @@
   }
 </style>
 
-## Time Picker 时间选择器
+## TimePicker 时间选择器
 
  用于选择或输入日期
 

examples/nav.config.json

@@ -72,7 +72,7 @@
         {
           "path": "/input-number",
           "name": "计数器 (input-number)",
-          "title": "Input Number 计数器"
+          "title": "InputNumber 计数器"
         },
         {
           "path": "/select",
@@ -95,19 +95,19 @@
         {
           "path": "/time-picker",
           "name": "时间选择器（time-picker）",
-          "title": "Time Picker 时间选择器",
+          "title": "TimePicker 时间选择器",
           "description": "用于选择或输入时间"
         },
         {
           "path": "/date-picker",
           "name": "日期选择器（date-picker）",
-          "title": "Date Picker 日期选择器",
+          "title": "DatePicker 日期选择器",
           "description": "用于选择或输入时间"
         },
         {
           "path": "/datetime-picker",
           "name": "日期时间选择器",
-          "title": "Datetime Picker 日期时间选择器",
+          "title": "DateTimePicker 日期时间选择器",
           "description": "用于选择或输入日期时间"
         },
         {
@@ -116,16 +116,16 @@
           "title": "Upload 上传",
           "description": "文件上传组件"
         },
+        {
+          "path": "/rate",
+          "name": "评分 (rate)",
+          "title": "Rate 评分"
+        },
         {
           "path": "/form",
           "name": "表单 (form)",
           "title": "Form 表单",
           "description": "一个多功能的并带有字段验证的表单组件"
-        },
-        {
-          "path": "/rate",
-          "name": "评分 (rate)",
-          "title": "Rate 评分"
         }
       ]
     },
@@ -164,7 +164,7 @@
         {
           "path": "/badge",
           "name": "标记 (badge)",
-          "title": " Badge 标记",
+          "title": "Badge 标记",
           "description": "出现在按钮、图标旁的数字或状态标记"
         }
       ]
@@ -193,7 +193,7 @@
         {
           "path": "/message-box",
           "name": "弹框 (message-box)",
-          "title": "Message Box 弹框"
+          "title": "MessageBox 弹框"
         },
         {
           "path": "/notification",
@@ -204,7 +204,7 @@
       ]
     },
     {
-      "groupName": "Nav",
+      "groupName": "Navigation",
       "list": [
         {
           "path": "/menu",