docs: update demo project intro (#4238)

docs/markdown/quickstart.zh-CN.md

@@ -19,16 +19,6 @@ vue ui
 
 在图形化界面中，点击`依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
 
-### 示例工程
-
-我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容：
-
-- 基于 vant 搭建单页面应用，配置按需引入
-- 配置 rem 适配方案
-- 配置 viewport 适配方案
-- 配置 TypeScript 工程
-- 配置自定义主题色方案
-
 ### 安装
 
 ```bash

docs/site/components/DemoPages.vue

@@ -1,24 +1,36 @@
 <template>
   <section class="van-doc-demo-pages">
-    <h1>{{ $t('title') }}</h1>
+    <h1>示例工程</h1>
+
     <div class="card">
-      <p>{{ $t('description') }}</p>
+      <h3>介绍</h3>
+      <p>
+        我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为
+        <a
+          href="https://github.com/youzan/vant-demo"
+          target="_blank"
+        >Vant Demo</a>，示例工程会帮助你了解如下内容：
+      </p>
+      <ul>
+        <li>基于 Vant 搭建单页面应用，配置按需引入组件</li>
+        <li>配置基于 rem 的适配方案</li>
+        <li>配置基于 viewport 的适配方案</li>
+        <li>配置基于 TypeScript 的工程</li>
+        <li>配置自定义主题色方案</li>
+      </ul>
+    </div>
+
+    <div class="card">
+      <h3>示例页面</h3>
+      <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
+          <a :href="demo.source" target="_blank">源代码</a>
-            :href="demo.source"
+          <img :src="demo.preview" @click="onChangeDemo(demo, index)">
-            target="_blank"
-          >
-            {{ $t('source') }}
-          </a>
-          <img
-            :src="demo.preview"
-            @click="onChangeDemo(demo, index)"
-          >
         </div>
       </div>
     </div>
@@ -26,31 +38,6 @@
 </template>
 
 <script>
-import { Locale } from '../../../src';
-
-Locale.add({
-  'zh-CN': {
-    vanDocDemoPages: {
-      title: '示例',
-      source: '源代码',
-      description: '下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。',
-      goodsDetail: '商品详情',
-      userCenter: '会员中心',
-      shoppingCart: '购物车'
-    }
-  },
-  'en-US': {
-    vanDocDemoPages: {
-      title: 'Demo Pages',
-      source: 'Source code',
-      description: 'Here are some of the demo pages built using Vant, click on the picture to switch to the corresponding demo.',
-      goodsDetail: 'Goods Detail',
-      userCenter: 'User Center',
-      shoppingCart: 'Shopping Cart'
-    }
-  }
-});
-
 export default {
   name: 'van-doc-demo-pages',
 
@@ -62,22 +49,32 @@ export default {
 
   computed: {
     demos() {
-      return [{
+      return [
-        title: this.$t('goodsDetail'),
+        {
-        preview: 'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
+          title: '商品详情',
-        url: '/vant-demo/#/goods',
+          preview:
-        source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue'
+            'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
-      }, {
+          url: '/vant-demo/#/goods',
-        title: this.$t('userCenter'),
+          source:
-        preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
+            'https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue'
-        url: '/vant-demo/#/user',
+        },
-        source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/user/index.vue'
+        {
-      }, {
+          title: '用户中心',
-        title: this.$t('shoppingCart'),
+          preview:
-        preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
+            'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
-        url: '/vant-demo/#/cart',
+          url: '/vant-demo/#/user',
-        source: 'https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue'
+          source:
-      }];
+            'https://github.com/youzan/vant-demo/blob/master/base/src/view/user/index.vue'
+        },
+        {
+          title: '购物车',
+          preview:
+            'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
+          url: '/vant-demo/#/cart',
+          source:
+            'https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue'
+        }
+      ];
     }
   },
 
@@ -106,8 +103,8 @@ export default {
     margin-bottom: 40px;
     text-align: center;
 
-    &:nth-child(3n+1),
+    &:nth-child(3n + 1),
-    &:nth-child(3n+2) {
+    &:nth-child(3n + 2) {
       margin-right: 4%;
     }
 
@@ -133,7 +130,7 @@ export default {
 
     &--active {
       img {
-        box-shadow: 0 1px 4px rgba(51, 136, 255, .4), 0 0 0 1px rgba(51, 136, 255, .4);
+        box-shadow: 0 1px 4px rgba(51, 136, 255, 0.4), 0 0 0 1px rgba(51, 136, 255, 0.4);
       }
     }
   }

docs/site/doc.config.js

@@ -77,7 +77,7 @@ export default {
               },
               {
                 path: '/demo',
-                title: '示例页面'
+                title: '示例工程'
               },
               {
                 path: '/locale',
@@ -423,10 +423,6 @@ export default {
                 path: '/theme',
                 title: 'Custom Theme'
               },
-              {
-                path: '/demo',
-                title: 'Demo pages'
-              },
               {
                 path: '/locale',
                 title: 'Internationalization'