<template>
<div class="footer">
<div class="foot">
<div class="bottom-tab">
<div class="tab-item" @click="switchTo('/job')">
<img :src="'/job' === $route.path|| '/' === $route.path? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="职位">
<span :class="{footSelect: '/job' === $route.path}">职位</span>
</div>
<div class="tab-item" @click="switchTo('/company')">
<img :src="'/company' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="公司">
<span :class="{footSelect: '/company' === $route.path}">公司</span>
</div>
<div class="tab-item" @click="switchTo('/message')">
<img :src="'/message' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="消息">
<span :class="{footSelect: '/message' === $route.path}">消息</span>
</div>
<div class="tab-item" @click="switchTo('/my')">
<img :src="'/my' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="我的">
<span :class="{footSelect: '/my' === $route.path}">我的</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"foot",
data() {
return {
tabBarImgArr:[
{selected:require("@/assets/img/ic_main_tab_find_pre.png"),normal:require("@/assets/img/ic_main_tab_find_nor.png")},
{selected:require("@/assets/img/ic_main_tab_company_pre.png"),normal:require("@/assets/img/ic_main_tab_company_nor.png")},
{selected:require("@/assets/img/ic_main_tab_contacts_pre.png"),normal:require("@/assets/img/ic_main_tab_contacts_nor.png")},
{selected:require("@/assets/img/ic_main_tab_my_pre.png"),normal:require("@/assets/img/ic_main_tab_my_nor.png")},
]
};
},
methods:{
switchTo: function (path) {
this.$router.replace(path)
}
}
};
</script>
<style scoped>
.bottom-tab{
position: fixed;
bottom: 0;
left: 0;
display: flex;
border-top: 1px solid #D9D9D9;
padding-top: 6px;
padding-bottom: 6px;
}
.bottom-tab .tab-item{
flex: 1;
text-align: center;
}
.bottom-tab .tab-item img{
display: block;
width: 30%;
margin: 0 auto;
}
.bottom-tab .tab-item span{
font-size: 12px;
color: #B3B3B3;
}
.footSelect{
color: #58CDC6!important;
}
</style>