<template>
<div class="index">
<div class="mainContent">
<router-view></router-view>
</div>
<div class="bottomBar">
<ul>
<li @click="toColor" > <router-link :to="{name:'MapPlat'}">
![](../assets/images/ic_map_nor@2x.png)![](../assets/images/ic_map@2x.png)
<p :class="{bottomBarColorActive:isColor}">展图</p></router-link></li>
<li @click="toColor2"> <router-link :to="{name:'Agenda'}">
![](../assets/images/ic_yicheng_nor@2x.png)![](../assets/images/ic_yicheng@2x.png)
<p :class="{bottomBarColorActive:isColor2}">议程</p></router-link></li>
<li @click="toColor3"> <router-link :to="{name:'Recommend'}">
![](../assets/images/ic_tuijian_nor@2x.png)![](../assets/images/ic_tuijian@2x.png)
<p :class="{bottomBarColorActive:isColor3}">推荐</p></router-link></li>
<li @click="toColor4"> <router-link :to="{name:'Attention'}">
![](../assets/images/ic_guanzhu_nor@2x.png)
![](../assets/images/ic_guanzhu@2x.png)
<p :class="{bottomBarColorActive:isColor4}">关注</p></router-link></li>
<li @click="toColor5"> <router-link :to="{name:'Intro'}">
![](../assets/images/ic_jianjie_nor@2x.png)
![](../assets/images/ic_jianjie@2x.png)
<p :class="{bottomBarColorActive:isColor5}">简介</p></router-link></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
isColor:true,
isColor2:false,
isColor3:false,
isColor4:false,
isColor5:false
}
},
methods:{
toColor:function(){
this.isColor=true;
this.isColor2=false;
this.isColor3=false;
this.isColor4=false;
this.isColor5=false;
},
toColor2:function(){
this.isColor=false;
this.isColor2=true;
this.isColor3=false;
this.isColor4=false;
this.isColor5=false;
},
toColor3:function(){
this.isColor=false;
this.isColor2=false;
this.isColor3=true;
this.isColor4=false;
this.isColor5=false;
},
toColor4:function(){
this.isColor=false;
this.isColor2=false;
this.isColor3=false;
this.isColor4=true;
this.isColor5=false;
},
toColor5:function(){
this.isColor=false;
this.isColor2=false;
this.isColor3=false;
this.isColor4=false;
this.isColor5=true;
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
height: 100%;
}
.bottomBar {
height: 100px;
width: 100%;
border: 1px solid #ccc;
bottom: 0;
background: rgba(255,255,255,0.90);
position: fixed;
bottom: 0;
}
.bottomBar ul {
display: flex;
width: 100%;
justify-content:space-around;
}
.bottomBar ul li {
/*width: 20%;*/
}
.bottomBar ul li img {
margin: 8px 0;
}
.bottomBar ul li p {
font-family: "PingFangSC-Regular";
font-size: 20px;
color: #D2D7E8;
letter-spacing: 0;
line-height: 20px;
}
.mainContent {
height:-webkit-calc(100% - 100px);
height:-moz-calc(100% - 100px);
height:calc(100% - 100px);
}
.bottomBarColorActive {
color: #4D81EE !important;
}
</style>
网友评论