first commit
This commit is contained in:
1
vant/packages/vant-cli/site/mobile/components/.pydio
Normal file
1
vant/packages/vant-cli/site/mobile/components/.pydio
Normal file
@@ -0,0 +1 @@
|
||||
2ac1d033-d3a3-4e0c-bfd7-d9f0d1b5a9e5
|
||||
12
vant/packages/vant-cli/site/mobile/components/ArrowRight.vue
Normal file
12
vant/packages/vant-cli/site/mobile/components/ArrowRight.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 1024 1024">
|
||||
<path
|
||||
fill="#B6C3D2"
|
||||
d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"
|
||||
/>
|
||||
<path
|
||||
fill="#B6C3D2"
|
||||
d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
37
vant/packages/vant-cli/site/mobile/components/DemoBlock.vue
Normal file
37
vant/packages/vant-cli/site/mobile/components/DemoBlock.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="van-doc-demo-block">
|
||||
<h2 class="van-doc-demo-block__title">{{ title }}</h2>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'demo-block',
|
||||
|
||||
props: {
|
||||
title: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-demo-block {
|
||||
&__title {
|
||||
margin: 0;
|
||||
padding: 32px 16px 16px;
|
||||
color: @van-doc-text-light-blue;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
99
vant/packages/vant-cli/site/mobile/components/DemoHome.vue
Normal file
99
vant/packages/vant-cli/site/mobile/components/DemoHome.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="demo-home">
|
||||
<h1
|
||||
class="demo-home__title"
|
||||
:class="{ 'demo-home__title--small': smallTitle }"
|
||||
>
|
||||
<img :src="config.logo" />
|
||||
<span>{{ config.title }}</span>
|
||||
</h1>
|
||||
<h2 v-if="config.description" class="demo-home__desc">
|
||||
{{ config.description }}
|
||||
</h2>
|
||||
<template v-for="(group, index) in config.nav">
|
||||
<demo-home-nav :group="group" :lang="lang" :key="index" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { config } from 'site-mobile-shared';
|
||||
import DemoHomeNav from './DemoHomeNav';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DemoHomeNav,
|
||||
},
|
||||
|
||||
computed: {
|
||||
lang() {
|
||||
const { lang } = this.$route.meta;
|
||||
return lang;
|
||||
},
|
||||
|
||||
config() {
|
||||
const { locales } = config.site;
|
||||
|
||||
if (locales) {
|
||||
return locales[this.lang];
|
||||
}
|
||||
|
||||
return config.site;
|
||||
},
|
||||
|
||||
smallTitle() {
|
||||
return this.config.title.length >= 8;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.demo-home {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 46px 20px 20px;
|
||||
background: #fff;
|
||||
|
||||
&__title,
|
||||
&__desc {
|
||||
padding-left: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 32px;
|
||||
|
||||
img,
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&--small {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin: 0 0 40px;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="demo-home-nav">
|
||||
<div class="demo-home-nav__title">{{ group.title }}</div>
|
||||
<div class="demo-home-nav__group">
|
||||
<router-link
|
||||
class="demo-home-nav__block"
|
||||
v-for="navItem in group.items"
|
||||
:key="navItem.path"
|
||||
:to="`${base}/${navItem.path}`"
|
||||
>
|
||||
{{ navItem.title }}
|
||||
<arrow-right class="demo-home-nav__icon" />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArrowRight from './ArrowRight';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ArrowRight,
|
||||
},
|
||||
|
||||
props: {
|
||||
lang: String,
|
||||
group: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
base() {
|
||||
return this.lang ? `/${this.lang}` : '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.demo-home-nav {
|
||||
&__title {
|
||||
margin: 24px 0 8px 16px;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__block {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0 0 12px;
|
||||
padding-left: 20px;
|
||||
color: #323233;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 99px;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: darken(#f7f8fa, 3%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken(#f7f8fa, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
vant/packages/vant-cli/site/mobile/components/DemoNav.vue
Normal file
58
vant/packages/vant-cli/site/mobile/components/DemoNav.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div v-show="title" class="demo-nav">
|
||||
<div class="demo-nav__title">{{ title }}</div>
|
||||
<svg class="demo-nav__back" viewBox="0 0 1000 1000" @click="onBack">
|
||||
<path fill="#969799" fill-rule="evenodd" :d="path" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable max-len */
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
path:
|
||||
'M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
title() {
|
||||
const { name } = this.$route.meta || {};
|
||||
return name ? name.replace(/-/g, '') : '';
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onBack() {
|
||||
history.back();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-nav {
|
||||
position: relative;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__back {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<section class="van-doc-demo-section" :class="demoName">
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { decamelize } from '../../common';
|
||||
|
||||
export default {
|
||||
name: 'demo-section',
|
||||
|
||||
computed: {
|
||||
demoName() {
|
||||
const { meta } = this.$route || {};
|
||||
if (meta && meta.name) {
|
||||
return `demo-${decamelize(meta.name)}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.van-doc-demo-section {
|
||||
box-sizing: border-box;
|
||||
min-height: calc(100vh - 56px);
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user