app自定义图标 vue_移动端vue项目底部导航可以切换icon自定义图标

移动端vue项目中经常用的底部导航，可以切换icon自定义图标，也可换成img切换图片

首页

掏牌

牌友汇

策划

我的

export default {

name:'footbar',

data() {

return {

}

},

mounted(){

}

}

.footbar{

width: 100%;

height: 2.613333rem;

position: fixed;

bottom: 0;

display: flex;

align-items: center;

background: white;

border-top: 1px solid #eeeeee;

color: #102099;

}

.footbar span{

display: block;

font-size: .64rem;

}

.footbar div{

flex: 1;

text-align: center;

}

.footbar .router-link-exact-active{

color: #FABE00;

}

.router-link-active{

color: #FABE00;

}

.footbar .active{

color: #FABE00;

}