mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] update mobile index page (#3077)
This commit is contained in:
neverland
GitHub
parent
89ccdfe63b
commit
ee5e49bda0
@ -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-nav-bar__right {
|
||||
.van-icon {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.van-nav-bar__right {
|
||||
font-size: 16px;
|
||||
|
||||
.van-icon {
|
||||
vertical-align: -3px;
|
||||
}
|
||||
color: @gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user