样式优化，example组件更新，展示2个example，CI邮箱修改

Author: leezng

.travis.yml

@@ -28,7 +28,7 @@ jobs:
         - git remote add origin "https://${GH_TOKEN}@${GH_REF}"
         - git checkout -b gh-pages
         - git config user.name "leezng"
-        - git config user.email "leezng@163.com"
+        - git config user.email "im.leezng@gmail.com"
         - git add .
         - git commit -m "update example page"
         - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" gh-pages:gh-pages

example/App.vue

@@ -1,22 +1,41 @@
 <template>
-  <div id="app" class="example-app">
-    <div class="block">
-      <h2>JSON Input:</h2>
-      <textarea v-model="val"></textarea>
-
-      <h2>Click Result:</h2>
-      <div>path: {{itemPath}}</div>
-      <div>data: <pre>{{itemData}}</pre></div>
+  <div id="app">
+    <div class="example example-1">
+      <h2>EXAMPLE 1</h2>
+      <div class="block">
+        <h3>JSON Input:</h3>
+        <textarea v-model="val"></textarea>
+      </div>
+      <div class="block">
+        <h3>JSON Tree:</h3>
+        <vue-json-pretty
+          :data="json"
+          :path="'res'">
+        </vue-json-pretty>
+      </div>
     </div>
-    <div class="block">
-      <h2>JSON Tree:</h2>
-      <vue-json-pretty
-        :data="json"
-        :path="'res'"
-        :path-checked="['res', 'res.c']"
-        :path-selectable="pathSelectableFn"
-        @click="handleClick">
-      </vue-json-pretty>
+
+    <div class="example example-2">
+      <h2>EXAMPLE 2</h2>
+      <div class="block">
+        <h3>JSON Input:</h3>
+        <textarea v-model="val"></textarea>
+
+        <h3>Click Result:</h3>
+        <div>path: {{itemPath}}</div>
+        <div>data: <pre>{{itemData}}</pre></div>
+      </div>
+      <div class="block">
+        <h3>JSON Tree:</h3>
+        <vue-json-pretty
+          :data="json"
+          :path="'res'"
+          :path-checked="['res', 'res.c']"
+          :path-selectable="pathSelectableFn"
+          :selectable-type="'both'"
+          @click="handleClick">
+        </vue-json-pretty>
+      </div>
     </div>
   </div>
 </template>
@@ -36,17 +55,17 @@ export default {
         status: 200,
         error: '',
         data: [{
-          news_id: '51184',
-          title: '行货iPhone X评测：用真正黑科技革新未来',
-          source: '网易手机'
-        },{
-          news_id: '51183',
-          title: '交通天堂：未来城市如何为人与无人车设计街道？',
-          source: '网易智能'
-        },{
-          news_id: '51182',
-          title: '特斯拉马斯克的美国政商关系：政府不掏一百亿不建厂',
-          source: 'AI财经社'
+          news_id: 51184,
+          title: 'iPhone X Review: Innovative future with real black technology',
+          source: 'Netease phone'
+        }, {
+          news_id: 51183,
+          title: 'Traffic paradise: How to design streets for people and unmanned vehicles in the future?',
+          source: 'Netease smart'
+        }, {
+          news_id: 51182,
+          title: 'Teslamask\'s American Business Relations: The government does not pay billions to build factories',
+          source: 'AI Finance'
         }]
       },
       itemData: {},
@@ -84,27 +103,28 @@ export default {
   html, body {
     margin: 0;
   }
-  h2 {
+  h2, h3 {
     margin: 0 0 10px;
   }
-  .example-app {
+  .example {
     padding: 10px;
     overflow: hidden;
     .block {
       float: left;
       padding: 0 20px;
       width: 50%;
       box-sizing: border-box;
-      textarea {
-        padding: 5px;
-        width: 100%;
-        height: 100px;
-        box-sizing: border-box;
-      }
-      pre{
-        margin: 0;
-        font-family: Consolas;
-      }
+    }
+    textarea {
+      padding: 5px;
+      width: 100%;
+      height: 100px;
+      box-sizing: border-box;
+      font-family: inherit;
+    }
+    pre{
+      margin: 0;
+      font-family: Consolas;
     }
   }
 </style>

src/assets/less/tree.less

@@ -2,7 +2,7 @@
 
 .vjs__tree {
   font-family: "Monaco", "Menlo", "Consolas", "Bitstream Vera Sans Mono";
-  line-height: 1.5;
+  line-height: 1.3;
   .vjs__tree__content {
     padding-left: @content-padding;
     border-left: 1px dotted #ccc;
@@ -21,12 +21,10 @@
     left: -30px;
   }
   .vjs__value__null {
-    font-weight: bold;
     color: #ff4949;
   }
   .vjs__value__number,
   .vjs__value__boolean {
-    font-weight: bold;
     color: #1d8ce0;
   }
   .vjs__value__string {