[Doc] update mobile index page (#3077)

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
-      v-for="item in navList"
-      v-if="item.showInMobile"
-    >
+
+    <h1 class="vant-title">
+      <img src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png" >
+      <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,
-  .zanui-desc {
-    text-align: center;
+  .vant-title,
+  .vant-desc {
     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;
-    margin: 0 0 60px;
+    color: #7d7e80;
+    margin: 0 0 40px;
   }
 }
 
 .mobile-switch-lang {
   position: absolute;
-  top: 15px;
-  right: 15px;
-  font-size: 11px;
-  border: 1px solid @blue;
-  border-radius: 3px;
+  top: 24px;
+  right: 24px;
   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
-        v-if="!navItem.disabled"
-        v-for="(navItem, index) in group.list"
-        :key="index"
-        :to="'/' + base + navItem.path"
-        :title="navItem.title"
-        is-link
+      <van-icon
+        :name="group.icon"
+        slot="right-icon"
+        class="mobile-nav__icon"
       />
+      <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 {
-    display: none;
+  &__icon {
+    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>