Skip to content

Commit 9fd88ac

Browse files
dolymooddolymood
committed
update(doc): site UI
1 parent 70fa59d commit 9fd88ac

File tree

18 files changed

+181
-77
lines changed

18 files changed

+181
-77
lines changed

‎build/webpack.base.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ module.exports = {
4646
{
4747
test: /\.js$/,
4848
loader: 'babel-loader',
49-
include: allSource
49+
include: allSource.concat(resolve('node_modules/lodash-es'))
5050
},
5151
{
5252
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

‎document/App.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,6 @@ export default {
6262
width: 100%
6363
height: 100%
6464
background-color: white
65+
.ov-hidden
66+
overflow: hidden
6567
</style>

‎document/components/viewport/back.svg‎ renamed to ‎document/components/back/back.svg‎

File renamed without changes.

‎document/components/back/back.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<img class="to-home" @click="toHome" src="./back.svg">
3+
</template>
4+
<script>
5+
export default{
6+
methods: {
7+
toHome() {
8+
this.$router.push('/')
9+
}
10+
}
11+
}
12+
</script>
13+
<style lang="stylus">
14+
.to-home
15+
display: none
16+
@media screen and (max-width: 960px)
17+
.to-home
18+
display: block
19+
z-index: 5
20+
position: fixed
21+
right: auto
22+
top: 4px
23+
left: 3px
24+
width: 20px
25+
height: 20px
26+
padding: 10px
27+
</style>

‎document/components/badge/badge.vue‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<template>
2-
<a class="badge" href="https://github.com/didi/cube-ui" target="_blank" :class="badgeValue&&'badge-visible'">
2+
<a class="badge" href="https://github.com/didi/cube-ui" target="_blank">
33
<span class="badge-left">{{badgeName||type}}</span>
4-
<span class="badge-right">
5-
{{badgeValue}}</span>
4+
<span class="badge-right">{{badgeValue || '...'}}</span>
65
</a>
76
</template>
87
<script>
98
import ajax from '../../common/js/ajax.js'
109
const urlMap = {
11-
Star: 'https://img.shields.io/github/stars/didi/cube-ui.json',
12-
Fork: 'https://img.shields.io/github/forks/didi/cube-ui.json',
13-
Watch: 'https://img.shields.io/github/watchers/didi/cube-ui.json'
10+
star: 'https://img.shields.io/github/stars/didi/cube-ui.json',
11+
fork: 'https://img.shields.io/github/forks/didi/cube-ui.json',
12+
watch: 'https://img.shields.io/github/watchers/didi/cube-ui.json'
1413
}
1514
export default{
1615
data() {
@@ -47,7 +46,6 @@
4746
.badge
4847
display: inline-block
4948
text-align: center
50-
visibility: hidden
5149
border: 1px #4AA8FF solid
5250
border-radius: 3px
5351
color: #545454
@@ -66,6 +64,4 @@
6664
padding: 4px 10px
6765
border-left: 1px #4AA8FF solid
6866
background-color: white
69-
.badge-visible
70-
visibility: visible
7167
</style>

‎document/components/example/example.vue‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="home-example">
33
<div class="example-main">
4+
<back />
45
<display></display>
56
<div class="example-desc">
67
<a :href="baseUrl" class="online-link">Online Example</a>
@@ -13,38 +14,34 @@
1314
<script>
1415
import { baseUrl } from '../../common/js/utils'
1516
import Display from '../display/display.vue'
17+
import Back from '../back/back.vue'
1618
export default {
1719
data() {
1820
return {
1921
baseUrl
2022
}
2123
},
24+
mounted() {
25+
window.scrollTo(0, 0)
26+
},
2227
components: {
23-
Display
28+
Display,
29+
Back
2430
}
2531
}
2632
</script>
2733
<style lang="stylus">
2834
.home-example
2935
position: relative
3036
text-align: center
31-
&::before
32-
content: ""
33-
position: relative
34-
z-index: 5
35-
display: block
36-
width: 100%
37-
height: 1px
38-
margin-top: -1px
39-
box-shadow: 0 1px 2px rgba(0, 0, 0, .15)
4037
.example-main
4138
display: flex
4239
align-items: center
4340
justify-content: center
4441
// width: 348px
4542
// margin: auto
4643
padding: 50px 0
47-
overflow: hidden
44+
// overflow: hidden
4845
@media screen and (max-width: 960px)
4946
width: 330px
5047
flex-wrap: wrap
@@ -55,12 +52,12 @@
5552
margin: 0 auto 30px
5653
.example-desc
5754
margin-left: 100px
58-
.online-link, img
59-
display: block
60-
margin-bottom: 20px
61-
img
62-
width: 280px
63-
height: 280px
55+
img
56+
width: 280px
57+
height: 280px
58+
.online-link, img
59+
display: block
60+
margin-bottom: 20px
6461
.page-display
6562
.display-wrapper
6663
margin: auto

‎document/components/home/home.vue‎

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="home-view" :class="{'home-view-docs': isDocs}">
3-
<div class="navigator" :class="{ active: showTabs }">
2+
<div class="home-view" :class="{'home-view-docs': isDocs, 'home-view-demo': isExample, opacity1: opacity1}">
3+
<div class="navigator" ref="navigator" :class="{ active: showTabs }">
44
<div class="logo">
55
<router-link to="/"><img src="./didi-logo.svg" alt="DiDi"></router-link>
66
</div>
@@ -21,19 +21,58 @@
2121
<script>
2222
import Lang from '../lang/lang.vue'
2323
import NavLoading from '../nav-loading/nav-loading.vue'
24+
import throttle from 'lodash-es/throttle'
25+
2426
export default {
2527
data() {
2628
return {
2729
showTabs: false,
28-
isDocs: this.$route.path.indexOf('/docs') > -1
30+
opacity1: false,
31+
isDocs: this.$route.path.indexOf('/docs') > -1,
32+
isExample: this.$route.path.indexOf('/example') > -1
33+
}
34+
},
35+
computed: {
36+
isIndex() {
37+
return !this.isDocs && !this.isExample
2938
}
3039
},
3140
watch: {
3241
$route(val) {
3342
this.isDocs = val.path.indexOf('/docs') > -1
43+
this.isExample = val.path.indexOf('/example') > -1
3444
this.showTabs = false
45+
},
46+
isIndex: {
47+
handler: function (newVal) {
48+
if (newVal) {
49+
document.addEventListener('touchmove', this.checkScrollTop, false)
50+
window.addEventListener('scroll', this.checkScrollTop, false)
51+
} else {
52+
document.removeEventListener('touchmove', this.checkScrollTop, false)
53+
window.removeEventListener('scroll', this.checkScrollTop, false)
54+
this.$refs.navigator && (this.$refs.navigator.style.backgroundColor = '')
55+
}
56+
},
57+
immediate: true
3558
}
3659
},
60+
beforeCreate() {
61+
this.checkScrollTop = throttle(() => {
62+
const y = window.scrollY
63+
const h = 48
64+
const opacity = y / h
65+
this.opacity1 = opacity >= 0.98
66+
this.$refs.navigator.style.backgroundColor = `rgba(255, 255, 255, ${opacity})`
67+
}, 10, {
68+
leading: true
69+
})
70+
},
71+
mounted() {
72+
setTimeout(() => {
73+
this.isIndex && this.checkScrollTop()
74+
})
75+
},
3776
components: {
3877
SiteLang: Lang,
3978
NavLoading
@@ -58,25 +97,31 @@
5897
transition: all 250ms ease
5998
@media screen and (max-width: 960px)
6099
padding-top: 48px
61-
&.home-view-docs
100+
&.home-view-docs, &.home-view-demo
62101
overflow: hidden
63102
height: auto
64103
.toggle-nav
65104
display: none!important
66105
.router-view
67106
height: 100%
107+
.home-view-docs, .home-view-demo, .opacity1
108+
.navigator
109+
box-shadow: 0 1px 2px rgba(0, 0, 0, .15)
68110
.navigator
69-
position: relative
111+
z-index: 5
112+
position: fixed
113+
top: 0
114+
left: 0
115+
right: 0
70116
height: 70px
71117
line-height: 70px
72118
padding: 0 100px
73-
margin-top: -70px
74-
transition: all 0.3s ease
119+
margin-top: 0
120+
background-color: #fff
75121
@media screen and (max-width: 960px)
76122
padding: 0
77123
height: 48px
78124
line-height: 48px
79-
margin-top: -48px
80125
&.active
81126
.tabs
82127
transition: transform .2s
@@ -111,6 +156,10 @@
111156
float: left
112157
padding: 0 16px
113158
height: 100%
159+
a
160+
display: block
161+
height: 100%
162+
margin: 0 80px
114163
@media screen and (max-width: 960px)
115164
float: none
116165
text-align: center
@@ -123,7 +172,7 @@
123172
padding: 0 30px
124173
box-shadow: none
125174
@media screen and (max-width: 960px)
126-
position: absolute
175+
position: fixed
127176
z-index: 10
128177
right: 10px
129178
padding: 0 0 0 2px
@@ -161,7 +210,7 @@
161210
transition: color .2s
162211
@media screen and (max-width: 960px)
163212
display: block
164-
line-height: 36px
213+
line-height: 45px
165214
color: black
166215
&:hover
167216
color: $color-orange

‎document/components/index/en-US.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<home-index>
33
<template slot="desc">A fantastic mobile ui lib implement by Vue.js</template>
44
<template slot="rec-btns">
5-
<router-link to="/en-US/docs/introduction" class="btn-link"><span>Introduction</span></router-link>
6-
<router-link to="/en-US/docs/quick-start" class="btn-link btn-active"><span>Quick Start</span></router-link>
5+
<router-link to="/en-US/docs/quick-start" class="btn-link"><span>Quick Start</span></router-link>
6+
<router-link to="/en-US/docs/introduction" class="btn-link btn-active"><span>Introduction</span></router-link>
77
</template>
88
<template slot="feature-1">
99
<h1 class="h1">High Quality</h1>

‎document/components/index/index.vue‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<slot name="desc"></slot>
77
</p>
88
<div class="ghbtns">
9-
<Badge type="Star"></Badge>
10-
<Badge type="Fork"></Badge>
11-
<Badge type="Watch"></Badge>
9+
<Badge type="star"></Badge>
10+
<Badge type="fork"></Badge>
11+
<Badge type="watch"></Badge>
1212
</div>
1313
<div class="rec-btns">
1414
<slot name="rec-btns"></slot>
@@ -51,6 +51,9 @@
5151
import Sfooter from '../footer/footer.vue'
5252
5353
export default {
54+
mounted() {
55+
window.scrollTo(0, 0)
56+
},
5457
components: {
5558
Badge,
5659
Sfooter
@@ -78,9 +81,6 @@
7881
text-align: left
7982
background-position: 6% 0
8083
background-size: 186%
81-
.ghbtns
82-
margin-left: -5px
83-
margin-right: -5px
8484
.btn-link
8585
width: 140px
8686
margin-right: 15px
@@ -92,14 +92,20 @@
9292
@media screen and (max-width: 960px)
9393
font-size: 30px
9494
> p
95-
margin: 30px 0 20px 0
95+
margin: 23px 0 6px 0
9696
font-size: 18px
97+
line-height: 32px
9798
@media screen and (max-width: 960px)
9899
font-size: 12px
100+
line-height: 18px
99101
.ghbtns
100102
font-size: 0
103+
margin-left: -5px
104+
margin-right: -5px
101105
.rec-btns
102106
margin-top: 36px
107+
@media screen and (max-width: 960px)
108+
margin-top: 26px
103109
.btn-link
104110
display: inline-block
105111
box-sizing: border-box
@@ -159,6 +165,13 @@
159165
.text
160166
flex: 1
161167
margin-top: -7px
168+
&:first-child
169+
img
170+
transform: translate(-6px,0)
171+
&:nth-child(2)
172+
img
173+
transform: scale(0.90) translate(0,8px)
174+
transform-origin: top center
162175
img
163176
width: 130px
164177
margin-bottom: 13px
@@ -172,8 +185,9 @@
172185
.text
173186
transition: all .5s
174187
.h1
175-
padding: 7px 0
188+
padding: 7px 0 0
176189
font-size: 22px
190+
font-weight: 500
177191
color: #333
178192
.h2
179193
font-size: 18px

‎document/components/index/zh-CN.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<home-index>
33
<template slot="desc">基于 Vue.js 实现的精致移动端组件库</template>
44
<template slot="rec-btns">
5-
<router-link to="/zh-CN/docs/introduction" class="btn-link"><span>介绍</span></router-link>
6-
<router-link to="/zh-CN/docs/quick-start" class="btn-link btn-active"><span>快速上手</span></router-link>
5+
<router-link to="/zh-CN/docs/quick-start" class="btn-link"><span>快速上手</span></router-link>
6+
<router-link to="/zh-CN/docs/introduction" class="btn-link btn-active"><span>介绍</span></router-link>
77
</template>
88
<template slot="feature-1">
99
<h1 class="h1">质量可靠</h1>

0 commit comments

Comments
 (0)