04-开发底部导航
1 为项目下载修改全局样式文件 /static/css/reset.css
这个样式文件能够让整体项目保持全局一致性，原本的网址http://meyerweb.com/eric/tools/css/reset/
在原本的内容中，添加自定义的部分
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
body {
line-height:1;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* 自定义 */
a {
color:#7e8c8d;
text-decoration:none;
-webkit-backface-visibility:hidden;
}
li {
list-style:none;
}
::-webkit-scrollbar {
width:5px;
height:5px;
}
::-webkit-scrollbar-track-piece {
background-color:rgba(0,0,0,0.2);
-webkit-border-radius:6px;
}
::-webkit-scrollbar-thumb:vertical {
height:5px;
background-color:rgba(125,125,125,0.7);
-webkit-border-radius:6px;
}
::-webkit-scrollbar-thumb:horizontal {
width:5px;
background-color:rgba(125,125,125,0.7);
-webkit-border-radius:6px;
}
html,body {
width:100%;
height:100%;
}
body {
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/*显示省略号*/
.ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
2 修改项目入口页面index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--添加移动端的支持-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>HBIS</title>
<!--引入reset文件-->
<link rel="stylesheet" href="./static/css/reset.css">
<!--引入自定义的阿里自定义字体库-->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_983381_cqucs5xbbxv.css">
<!--解决移动设备.3秒延迟问题-->
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded',function() {
FastClick.attach(document.body);
},false);
}if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
3 修改底部导航组件内容，src/components/FooterGuide/FooterGuide.vue
<template>
<footer class="footer_guide border_1px">
<a href="javascript:;" class="guide_item" @click="goto('/home')" :class="{on:isCurrent('/home')}">
<span class="item_icon">
<i class="iconfont icon-ios-home"></i>
</span>
<span>首页</span>
</a>
<a href="javascript:;" class="guide_item" @click="goto('/search')" :class="{on:isCurrent('/search')}">
<span class="item_icon ">
<i class="iconfont icon-ios-search"></i>
</span>
<span>搜索</span>
</a>
<a href="javascript:;" class="guide_item" @click="goto('/order')" :class="{on:isCurrent('/order')}">
<span class="item_icon ">
<i class="iconfont icon-ios-list-box"></i>
</span>
<span>订单</span>
</a>
<a href="javascript:;" class="guide_item" @click="goto('/profile')" :class="{on:isCurrent('/profile')}">
<span class="item_icon ">
<i class="iconfont icon-ios-contact"></i>
</span>
<span>我的</span>
</a>
</footer>
</template>
<script>
export default {
name:"FooterGuide",
methods:{
goto(path){
this.$router.replace(path)
},
isCurrent(path){
return this.$route.path===path
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.footer_guide
top-border-1px(#e4e4e4)
position:fixed
z-index 1000
left 0
right 0
bottom 0
background #fff
width 100%
height 50px
display flex
.guide_item
display:flex
flex 1
text-align center
flex-direction column
align-items center
margin 5px
& .on
color #0000ff
span
font-size 12px
margin-top 2px
margin-bottom 2px
.iconfont
font-size 25px
</style>
