[Doc] update vant-demo respo (#318)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

docs/markdown/en-US/theme.md

@@ -1,6 +1,6 @@
 ## Custom Theme (In translation)
 
-`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
+`Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
 
 ### 方案一. PostCSS 插件
 在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：

docs/src/components/DemoList.vue

@@ -15,7 +15,7 @@
 
 <script>
 import docConfig from '../doc.config';
-import MobileNav from './mobile-nav';
+import MobileNav from './MobileNav';
 
 export default {
   data() {
@@ -44,7 +44,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="postcss">
 .side-nav {
   width: 100%;
   box-sizing: border-box;

docs/src/components/DemoPages.vue

@@ -0,0 +1,101 @@
+<template>
+  <section class="van-doc-demo-pages">
+    <h2>示例</h2>
+    <p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
+    <div class="van-doc-demo-pages__gallery">
+      <div
+        :class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
+        v-for="(demo, index) in demos"
+      >
+        <h4>{{ demo.title }}</h4>
+        <a :href="demo.source" target="_blank">源代码</a>
+        <img :src="demo.preview" @click="onChangeDemo(demo, index)" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-demo-pages',
+
+  data() {
+    return {
+      currentDemo: 0,
+      demos: [{
+        title: '商品详情',
+        preview: 'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
+        url: 'https://youzan.github.io/vant-demo/#/goods',
+        source: 'https://github.com/youzan/vant-demo/tree/master/src/view/goods/index.vue'
+      }, {
+        title: '会员中心',
+        preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
+        url: 'https://youzan.github.io/vant-demo/#/user',
+        source: 'https://github.com/youzan/vant-demo/tree/master/src/view/user/index.vue'
+      }, {
+        title: '购物车',
+        preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
+        url: 'https://youzan.github.io/vant-demo/#/cart',
+        source: 'https://github.com/youzan/vant-demo/tree/master/src/view/cart/index.vue'
+      }]
+    };
+  },
+
+  beforeMount() {
+    this.$emit('changeDemoURL', this.demos[0].url);
+  },
+
+  methods: {
+    onChangeDemo(demo, index) {
+      this.currentDemo = index;
+      this.$emit('changeDemoURL', demo.url);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.van-doc-demo-pages {
+  &__gallery {
+    margin-top: 30px;
+  }
+
+  &__item {
+    width: 28%;
+    text-align: center;
+    margin-bottom: 40px;
+    display: inline-block;
+
+    &:nth-child(3n+1),
+    &:nth-child(3n+2) {
+      margin-right: 4%;
+    }
+
+    h4 {
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: normal;
+    }
+
+    img {
+      width: 100%;
+      cursor: pointer;
+      border-radius: 3px;
+      background-color: #f8f8f8;
+      box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+    }
+
+    a {
+      font-size: 12px;
+      margin: 4px 0 7px;
+      display: inline-block;
+    }
+
+    &--active {
+      img {
+        box-shadow: 0 1px 4px rgba(51, 136, 255, .4), 0 0 0 1px rgba(51, 136, 255, .4);
+      }
+    }
+  }
+}
+</style>

docs/src/router.config.js

@@ -1,8 +1,8 @@
 import docConfig from './doc.config';
-import DemoList from './components/demo-list';
+import DemoList from './components/DemoList';
 import componentDocs from '../markdown';
 import componentDemos from '../demos';
-import { Demos } from 'vant-doc';
+import DemoPages from './components/DemoPages';
 import Vue from 'vue';
 import './utils/iframe-router';
 
@@ -50,7 +50,7 @@ const registerRoute = (isExample) => {
         let component;
 
         if (path === '/demo') {
-          component = Demos;
+          component = DemoPages;
         } else {
           component = isExample ? componentDemos[path.replace('/', '')] : componentDocs[name];
         }