[Doc] update mobile index page (#3077)

docs/src/WapApp.vue

@@ -4,6 +4,7 @@
       v-show="title"
       class="van-doc-nav-bar"
       :title="title"
+      :border="false"
       :left-arrow="showNav"
       @click-left="onBack"
     >
@@ -65,28 +66,24 @@ export default {
 body {
   line-height: 1;
   color: @text-color;
-  background-color: #fafafa;
+  background-color: #f2f3f5;
   font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
 .van-doc-nav-bar {
+  height: 56px;
+  line-height: 56px;
+
   .van-nav-bar__title {
-    font-size: 15px;
+    font-size: 18px;
     text-transform: capitalize;
   }
 
-  .van-nav-bar__left,
+  .van-icon {
-  .van-nav-bar__right {
+    font-size: 24px;
     cursor: pointer;
-  }
+    color: @gray-dark;
-
-  .van-nav-bar__right {
-    font-size: 16px;
-
-    .van-icon {
-      vertical-align: -3px;
-    }
   }
 }
 

docs/src/components/DemoList.vue

@@ -1,28 +1,26 @@
 <template>
   <div class="side-nav">
-    <h1 class="zanui-title">
-      <img src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png" >
-      <span>Vant</span>
-    </h1>
     <div class="mobile-switch-lang">
-      <span
-        :class="{ active: $vantLang === 'en-US' }"
-        @click="switchLang('en-US')"
-      >
-        EN
-      </span>
       <span
         :class="{ active: $vantLang === 'zh-CN' }"
         @click="switchLang('zh-CN')"
       >
         中文
       </span>
+      <span
+        :class="{ active: $vantLang === 'en-US' }"
+        @click="switchLang('en-US')"
+      >
+        EN
+      </span>
     </div>
-    <h2 class="zanui-desc">{{ description }}</h2>
+
-    <template
+    <h1 class="vant-title">
-      v-for="item in navList"
+      <img src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png" >
-      v-if="item.showInMobile"
+      <span>Vant</span>
-    >
+    </h1>
+    <h2 class="vant-desc">{{ description }}</h2>
+    <template v-for="item in navList">
       <mobile-nav
         v-for="(group, index) in item.groups"
         :group="group"
@@ -51,7 +49,7 @@ export default {
 
   computed: {
     navList() {
-      return this.docConfig[this.$vantLang].nav || [];
+      return (this.docConfig[this.$vantLang].nav || []).filter(item => item.showInMobile);
     },
 
     description() {
@@ -75,16 +73,16 @@ export default {
 .side-nav {
   width: 100%;
   box-sizing: border-box;
-  padding: 60px 15px 20px;
+  padding: 64px 20px 20px;
 
-  .zanui-title,
+  .vant-title,
-  .zanui-desc {
+  .vant-desc {
-    text-align: center;
     font-weight: normal;
     user-select: none;
+    padding-left: 15px;
   }
 
-  .zanui-title {
+  .vant-title {
     margin: 0 0 15px;
 
     img,
@@ -98,37 +96,50 @@ export default {
     }
 
     span {
-      font-size: 40px;
+      font-size: 36px;
+      font-weight: 500;
       margin-left: 15px;
-      font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
     }
   }
 
-  .zanui-desc {
+  .vant-desc {
     font-size: 14px;
-    color: #455a64;
+    color: #7d7e80;
-    margin: 0 0 60px;
+    margin: 0 0 40px;
   }
 }
 
 .mobile-switch-lang {
   position: absolute;
-  top: 15px;
+  top: 24px;
-  right: 15px;
+  right: 24px;
-  font-size: 11px;
-  border: 1px solid @blue;
-  border-radius: 3px;
   color: @blue;
+  font-size: 12px;
   cursor: pointer;
+  overflow: hidden;
 
   span {
-    width: 32px;
+    color: @gray-dark;
+    width: 48px;
     line-height: 22px;
     text-align: center;
     display: inline-block;
+    border: 1px solid #dcdee0;
+    background-color: #f7f8fa;
+
+    &:first-child {
+      border-right: none;
+      border-radius: 3px 0 0 3px;
+    }
+
+    &:last-child {
+      border-left: none;
+      border-radius: 0 3px 3px 0;
+    }
 
     &.active {
       color: @white;
+      border-color: @blue;
       background-color: @blue;
     }
   }

docs/src/components/MobileNav.vue

@@ -1,6 +1,7 @@
 <template>
   <van-collapse
     v-model="active"
+    :border="false"
     class="mobile-nav"
   >
     <van-collapse-item
@@ -8,14 +9,20 @@
       :title="group.groupName"
       :name="group.groupName"
     >
-      <van-cell
+      <van-icon
-        v-if="!navItem.disabled"
+        :name="group.icon"
-        v-for="(navItem, index) in group.list"
+        slot="right-icon"
-        :key="index"
+        class="mobile-nav__icon"
-        :to="'/' + base + navItem.path"
-        :title="navItem.title"
-        is-link
       />
+      <template v-for="(navItem, index) in group.list">
+        <van-cell
+          v-if="!navItem.disabled"
+          :key="index"
+          :to="'/' + base + navItem.path"
+          :title="navItem.title"
+          is-link
+        />
+      </template>
     </van-collapse-item>
   </van-collapse>
 </template>
@@ -38,11 +45,15 @@ export default {
 <style lang="less">
 .mobile-nav {
   &__item {
-    margin-bottom: 20px;
+    margin-bottom: 16px;
   }
 
-  &::after {
+  &__icon {
-    display: none;
+    font-size: 24px;
+
+    img {
+      width: 100%;
+    }
   }
 
   .van-collapse-item__content {
@@ -51,8 +62,10 @@ export default {
 
   .van-collapse-item__title {
     font-size: 16px;
-    line-height: 36px;
+    font-weight: 500;
+    line-height: 40px;
     align-items: center;
+    border-radius: 2px;
   }
 }
 </style>

docs/src/doc.config.js

@@ -77,6 +77,7 @@ module.exports = {
         groups: [
           {
             groupName: '基础组件',
+            icon: 'https://img.yzcdn.cn/vant/basic-0401.svg',
             list: [
               {
                 path: '/button',
@@ -102,6 +103,7 @@ module.exports = {
           },
           {
             groupName: '表单组件',
+            icon: 'https://img.yzcdn.cn/vant/form-0401.svg',
             list: [
               {
                 path: '/checkbox',
@@ -163,6 +165,7 @@ module.exports = {
           },
           {
             groupName: '反馈组件',
+            icon: 'passed',
             list: [
               {
                 path: '/actionsheet',
@@ -196,6 +199,7 @@ module.exports = {
           },
           {
             groupName: '展示组件',
+            icon: 'photo-o',
             list: [
               {
                 path: '/circle',
@@ -245,6 +249,7 @@ module.exports = {
           },
           {
             groupName: '导航组件',
+            icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
             list: [
               {
                 path: '/badge',
@@ -274,6 +279,7 @@ module.exports = {
           },
           {
             groupName: '业务组件',
+            icon: 'ellipsis',
             list: [
               {
                 path: '/address-edit',
@@ -378,6 +384,7 @@ module.exports = {
         groups: [
           {
             groupName: 'Basic Components',
+            icon: 'https://img.yzcdn.cn/vant/basic-0401.svg',
             list: [
               {
                 path: '/button',
@@ -403,6 +410,7 @@ module.exports = {
           },
           {
             groupName: 'Form Components',
+            icon: 'https://img.yzcdn.cn/vant/form-0401.svg',
             list: [
               {
                 path: '/checkbox',
@@ -464,6 +472,7 @@ module.exports = {
           },
           {
             groupName: 'Action Components',
+            icon: 'passed',
             list: [
               {
                 path: '/actionsheet',
@@ -497,6 +506,7 @@ module.exports = {
           },
           {
             groupName: 'Display Components',
+            icon: 'photo-o',
             list: [
               {
                 path: '/circle',
@@ -546,6 +556,7 @@ module.exports = {
           },
           {
             groupName: 'Navigation Components',
+            icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
             list: [
               {
                 path: '/badge',
@@ -575,6 +586,7 @@ module.exports = {
           },
           {
             groupName: 'Business Components',
+            icon: 'ellipsis',
             list: [
               {
                 path: '/address-edit',

packages/icon/demo/index.vue

@@ -90,18 +90,21 @@ export default {
       display: block;
       padding: 0 5px;
       font-size: 12px;
-      line-height: 14px;
+      line-height: 18px;
+      color: @gray-darker;
     }
   }
 
   .van-icon {
     font-size: 32px;
-    margin: 15px 0;
+    margin: 20px 0 10px;
     color: @text-color;
   }
 
   .van-tab__pane {
-    padding-top: 10px;
+    width: auto;
+    margin: 20px;
+    background-color: #fff;
   }
 }
 </style>