mobile nav

This commit is contained in:
cookfront 2017-04-18 21:07:28 +08:00
parent 674084534f
commit d3bb97eb34

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mobile-nav-group"> <div class="mobile-nav-group">
<div <div
class="mobile-nav-group__title" class="mobile-nav-group__title mobile-nav-group__basetitle"
:class="{ :class="{
'mobile-nav-group__title--open': isOpen 'mobile-nav-group__title--open': isOpen
}" }"
@ -15,8 +15,10 @@
v-if="!navItem.disabled"> v-if="!navItem.disabled">
<router-link <router-link
active-class="active" active-class="active"
:to="base + navItem.path" :to="base + navItem.path">
v-text="navItem.title"> <p>
{{ navItem.title }}
</p>
</router-link> </router-link>
<zan-icon name="arrow"></zan-icon> <zan-icon name="arrow"></zan-icon>
</li> </li>
@ -50,10 +52,13 @@ export default {
@b nav-group { @b nav-group {
border-radius: 2px; border-radius: 2px;
margin-bottom: 15px; margin-bottom: 15px;
padding-left: 20px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
@e basetitle {
padding-left: 20px;
}
@e title { @e title {
font-size: 16px; font-size: 16px;
color: #333; color: #333;
@ -68,8 +73,17 @@ export default {
a { a {
color: #333; color: #333;
display: block; display: block;
border-top: 1px solid #e5e5e5;
user-select: none; user-select: none;
padding-left: 20px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:active {
background: #ECECEC;
}
> p {
border-top: 1px solid #e5e5e5;
}
} }
.zan-icon-arrow { .zan-icon-arrow {