122 lines
2.7 KiB
Vue
122 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="tabbar_container">
|
||
|
|
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
|
||
|
|
<view class="item-top" >
|
||
|
|
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"
|
||
|
|
:class="[item.centerItem ? 'center-item-img' : '']"></image>
|
||
|
|
</view>
|
||
|
|
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
|
||
|
|
<text>{{ item.text }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let listSrc = require('../../static/img/tabbar/list.png');
|
||
|
|
let listSrc2 = require('../../static/img/tabbar/avtiveList.png');
|
||
|
|
let newsSrc = require('../../static/img/tabbar/news.png');
|
||
|
|
let newsSrc2 = require('../../static/img/tabbar/activeNews.png');
|
||
|
|
let recruitSrc = require('../../static/img/tabbar/recruit.png');
|
||
|
|
let recruitSrc2 = require('../../static/img/tabbar/activeRecruit.png');
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentItem: 0,
|
||
|
|
tabbarList: [{
|
||
|
|
id: 0,
|
||
|
|
text: "招工列表",
|
||
|
|
path: '/pages/recruit/subPage/index',
|
||
|
|
iconPath: listSrc2,
|
||
|
|
selectedIconPath: listSrc,
|
||
|
|
centerItem: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
text: "发布招工",
|
||
|
|
path: '/pages/recruit/subPage/recruit',
|
||
|
|
iconPath: recruitSrc2,
|
||
|
|
selectedIconPath:recruitSrc,
|
||
|
|
centerItem: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
text: "消息",
|
||
|
|
path: '/pages/recruit/subPage/MessageList',
|
||
|
|
iconPath: newsSrc2,
|
||
|
|
selectedIconPath: newsSrc,
|
||
|
|
centerItem: false,
|
||
|
|
}],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
currentpage: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
default: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.currentItem = this.currentpage
|
||
|
|
uni.hideTabBar()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeItem(item) {
|
||
|
|
// uni.switchTab({
|
||
|
|
// url: item.path
|
||
|
|
// })
|
||
|
|
uni.navigateTo({
|
||
|
|
url: item.path
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.tabbar_container{
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0rpx;
|
||
|
|
left: 0rpx;
|
||
|
|
width: 100%;
|
||
|
|
height: 100rpx;
|
||
|
|
box-shadow: 0 0 5px #999;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 5rpx 0;
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
.tabbar_item{
|
||
|
|
width: 33.33%;
|
||
|
|
height: 100rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
.item-top{
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
image{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-bottom{
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.center-item-img{
|
||
|
|
position: absolute;
|
||
|
|
top: -58rpx;
|
||
|
|
left: calc(50% - 53rpx);
|
||
|
|
width: 106rpx !important;
|
||
|
|
height: 106rpx !important;
|
||
|
|
}
|
||
|
|
.item-active{
|
||
|
|
color: #4071f8;
|
||
|
|
}
|
||
|
|
</style>
|