128 lines
3.1 KiB
Vue
128 lines
3.1 KiB
Vue
<template>
|
|
<view class="tab_bar">
|
|
<view class="tabbarBox">
|
|
<view class="handleBox" @click="goPages('/pages/index/index')">
|
|
<view class="menuIcon">
|
|
<image
|
|
v-if="selectIndex === '/pages/index/index'"
|
|
class="second"
|
|
src="/static/images/tabBar/company_active.png"
|
|
></image>
|
|
<image
|
|
v-else-if="selectIndex !== '/pages/index/index'"
|
|
class="second"
|
|
src="/static/images/tabBar/company_normal.png"
|
|
></image>
|
|
<text v-if="selectIndex === '/pages/index/index'" class="text red">驿达</text>
|
|
<text v-else-if="selectIndex !== '/pages/index/index'" class="text">驿达</text>
|
|
</view>
|
|
</view>
|
|
<view class="handleBox" @click="goPages('/pages/userCenter/userCenter')">
|
|
<view class="menuIcon">
|
|
<image
|
|
v-if="selectIndex === '/pages/userCenter/userCenter'"
|
|
class="second"
|
|
src="/static/images/tabBar/user_active.svg"
|
|
></image>
|
|
<image
|
|
v-else-if="selectIndex !== '/pages/userCenter/userCenter'"
|
|
class="second"
|
|
src="/static/images/tabBar/user_normal.svg"
|
|
></image>
|
|
<text v-if="selectIndex === '/pages/userCenter/userCenter'" class="text red">我的</text>
|
|
<text v-else-if="selectIndex !== '/pages/userCenter/userCenter'" class="text">我的</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
phone:'',
|
|
selectIndex:'/pages/index/index'
|
|
}
|
|
},
|
|
props:{
|
|
page:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
},
|
|
watch:{
|
|
page:{
|
|
handler(value){
|
|
this.selectIndex = value
|
|
},
|
|
deep:true,
|
|
immediate:true
|
|
}
|
|
},
|
|
onLoad(){},
|
|
methods:{
|
|
goPages(pageIndex){
|
|
console.log('pageIndex',pageIndex)
|
|
// uni.switchTab({
|
|
// url: pageIndex,
|
|
// })
|
|
this.$util.toNextRoute('switchTab', pageIndex)
|
|
// this.selectIndex = pageIndex
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tab_bar {
|
|
width: 100vw;
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
background: #ffffff;
|
|
border-top: 1px solid #e8e8ea;
|
|
box-sizing: border-box;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
z-index: 99999;
|
|
.tabbarBox {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 5rpx;
|
|
|
|
.handleBox {
|
|
width: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60px;
|
|
.menuIcon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.first {
|
|
width: 30px;
|
|
height: 43px;
|
|
}
|
|
.second {
|
|
width: 30px;
|
|
height: 26px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.text {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #a69e9f;
|
|
line-height: 12px;
|
|
}
|
|
.red {
|
|
color: #d7000f;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|