forked from didi/mand-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathApp.vue
More file actions
139 lines (134 loc) · 3.1 KB
/
App.vue
File metadata and controls
139 lines (134 loc) · 3.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<template>
<div class="mand">
<template v-if="isHome">
<router-view></router-view>
</template>
<template v-else>
<div class="md-nav">
<p class="home" @click="goToCategory">
<md-icon name="home" size="lg"></md-icon>
</p>
<p class="name" v-text="navTitle"></p>
<p class="name-zh" v-text="navSubTitle"></p>
</div>
<div class="md-example-wrapper">
<router-view></router-view>
</div>
</template>
</div>
</template>
<script>
import Icon from '../components/icon'
import './assets/responsive'
export default {
name: 'app',
components: {
[Icon.name]: Icon,
},
computed: {
navTitle() {
return this.$route.name
},
navSubTitle() {
return this.$route.meta.description
},
isHome() {
const path = this.$route.path
return path === '/' || path === '/home' || path === '/category'
},
},
methods: {
goToCategory() {
this.$router.push('/category')
},
},
}
</script>
<style lang="stylus">
block()
float left
width 100%
.mand
position relative
min-height 100%
max-width 750px
font-size 28px
font-size-adjust none
-webkit-text-size-adjust 100%
-webkit-overflow-scrolling touch
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
background color-primary-background
.md-nav
position relative
display flex
padding 32px 20px
p
position relative
display inline-block
line-height 1
&.home
top 10px
.md-icon
color color-text-base
&.name
margin-left h-gap-lg
font-size font-heading-large
font-weight font-weight-medium
color color-text-base
&.name-zh
top 9px
margin-left h-gap-sm
font-size font-body-large
font-weight font-weight-normal
color color-text-minor
.md-example-wrapper
position relative
z-index 3
padding 20px
clearfix()
.md-example
.md-example-section
clearfix()
margin-bottom 30px
color color-text-base
.md-example-title
block()
font-size font-body-normal
font-weight font-weight-medium
a
margin-right 5px
background color-primary
color #fff
padding 5px 10px
border-radius radius-normal
font-size font-minor-large
font-weight 300
line-height 28px
text-decoration none
.md-example-describe
block()
margin-top 15px
font-size font-minor-large
font-weight 300
color color-text-minor
.md-example-content
block()
position relative
margin-top 20px
box-sizing border-box
font-size 28px
.md-dialog pre
width 100%
padding 20px 10px
box-sizing border-box
white-space pre-wrap
word-wrap break-word
font-size font-minor-normal
background color-primary-background
border-radius radius-normal
@media screen and (min-width: 749px)
.mand
margin-left -360px
left 50%
</style>