first commit

This commit is contained in:
编码猿
2024-09-27 00:57:27 +08:00
commit 18df0f5e4b
2548 changed files with 253280 additions and 0 deletions

View File

@@ -0,0 +1 @@
2ac1d033-d3a3-4e0c-bfd7-d9f0d1b5a9e5

View 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>

View 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>

View 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>

View File

@@ -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>

View 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>

View File

@@ -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>