提交 a2a60414 编写于 作者: D dolymood

doc

上级 0b6e9c23
......@@ -2,6 +2,7 @@
"en-US": {
"overview": {
"name": "Overview",
"angle": "01",
"subList": {
"introduction": "Introduction",
"quick-start": "QuickStart",
......@@ -12,6 +13,7 @@
},
"components": {
"name": "Components",
"angle": "02",
"subList": {
"basic": {
"name": "Basic",
......@@ -62,6 +64,7 @@
},
"modules": {
"name": "Modules",
"angle": "03",
"subList": {
"style": "style",
"create-api": "create-api",
......
......@@ -6,25 +6,29 @@
<router-link to="/en-US/docs/quick-start" class="btn-link btn-active"><span>Quick Start</span></router-link>
</template>
<template slot="feature-1">
<h1>Quality</h1>
<h1 class="h1">High Quality</h1>
<h1 class="h2">Quality</h1>
<p>
From DiDi interior component library and has been put to business test for more than one year. Every component has full unit tests to provide assurance for continuous integration.
</p>
</template>
<template slot="feature-2">
<h1>Experience</h1>
<h1 class="h1">Good Experience</h1>
<h1 class="h2">Experience</h1>
<p>
Make quick response, fluent animation and close to native components as the goal, and pursue the perfection of the interactive experience.
</p>
</template>
<template slot="feature-3">
<h1>Standard</h1>
<h1 class="h1">Keep Standard</h1>
<h1 class="h2">Standard</h1>
<p>
Follow a uniform design interaction standard and highly restore the design; Standardize the interface and unify the way of use, making development more simple and efficient.
</p>
</template>
<template slot="feature-4">
<h1>Scalability</h1>
<h1 class="h1">Design Scalability</h1>
<h1 class="h2">Scalability</h1>
<p>
Lightweight and flexible: support <router-link to="/en-US/docs/post-compile">post-compile</router-link> and importing on demand; High scalability: it is easy to implement secondary development based on existing components.
</p>
......
......@@ -144,7 +144,7 @@
li
flex: 1
max-width: 220px
padding: 60px 16px 20px
padding: 60px 16px 10px
margin: 0 10px
font-size: 13px
line-height: 1.4
......@@ -154,6 +154,7 @@
align-items: center
max-width: initial
padding-top: 20px
padding-bottom: 20px
text-align: left
.text
flex: 1
......@@ -161,6 +162,7 @@
img
width: 130px
margin-bottom: 13px
transform-origin: center 0
transition: all .5s
@media screen and (max-width: 960px)
width: 90px
......@@ -169,11 +171,11 @@
margin-bottom: 0
.text
transition: all .5s
.ch
.h1
padding: 7px 0
font-size: 22px
color: #333
.en
.h2
font-size: 18px
transition: all .5s
p
......@@ -182,9 +184,9 @@
opacity: 0
transition: all .5s
@media screen and (max-width: 960px)
.ch
.h1
font-size: 15px
.en
.h2
display: none
p
margin-top: 0
......@@ -196,8 +198,8 @@
opacity:1
img
transform: scale(0.5,0.5)
.en
.h2
opacity: 0
.text
transform: translateY(-50px)
transform: translateY(-75px)
</style>
......@@ -5,48 +5,30 @@
<router-link to="/zh-CN/docs/introduction" class="btn-link"><span>介绍</span></router-link>
<router-link to="/zh-CN/docs/quick-start" class="btn-link btn-active"><span>快速上手</span></router-link>
</template>
<template slot="features">
<li>
<h1>质量可靠</h1>
由滴滴内部组件库精简提炼而来,历经考验,并且每个组件都有充分单元测试,为后续集成提供保障。
</li>
<li>
<h1>体验极致</h1>
以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。
</li>
<li>
<h1>标准规范</h1>
遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。
</li>
<li>
<h1>扩展性强</h1>
支持按需引入和<router-link to="/zh-CN/docs/post-compile">后编译</router-link>,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
</li>
</template>
<template slot="feature-1">
<h1 class="ch">质量可靠</h1>
<h1 class="en">Quality</h1>
<h1 class="h1">质量可靠</h1>
<h1 class="h2">Quality</h1>
<p>
由滴滴内部组件库精简提炼而来,历经考验,并且每个组件都有充分单元测试,为后续集成提供保障。
</p>
</template>
<template slot="feature-2">
<h1 class="ch">体验极致</h1>
<h1 class="en">Experience</h1>
<h1 class="h1">体验极致</h1>
<h1 class="h2">Experience</h1>
<p>
以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。
</p>
</template>
<template slot="feature-3">
<h1 class="ch">标准规范</h1>
<h1 class="en">Standard</h1>
<h1 class="h1">标准规范</h1>
<h1 class="h2">Standard</h1>
<p>
遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。
</p>
</template>
<template slot="feature-4">
<h1 class="ch">扩展性强</h1>
<h1 class="en">Scalability</h1>
<h1 class="h1">扩展性强</h1>
<h1 class="h2">Scalability</h1>
<p>
支持按需引入和<router-link to="/zh-CN/docs/post-compile">后编译</router-link>,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
</p>
......
......@@ -7,6 +7,8 @@
<script>
import SideNav from '../side-nav/side-nav.vue'
let rootNav = {}
export default {
props: {
navList: {
......@@ -23,13 +25,19 @@
let docPath = ''
let root = ''
const navList = this.navList
let rootNav = {}
this.$watch('$route.path', (newPath) => {
docPath = newPath.split('/').pop()
root = this.seekRoot(navList, docPath)
if (rootNav) {
rootNav.hasActived = false
if (!root) {
rootNav.isRootActive = false
setTimeout(() => {
const el = document.querySelector('.page-sidelist .nav-active')
el && el.scrollIntoView()
}, 0)
}
}
root = this.seekRoot(navList, docPath)
rootNav = root && navList[root]
this.$set(rootNav, 'isRootActive', true)
this.$set(rootNav, 'hasActived', true)
......
......@@ -143,6 +143,7 @@
.arrow
top: 27px
.page-doc
position: relative
flex: 1
height: 100%
padding: 54px 30px 30px
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册