113 lines
2.0 KiB
Vue
113 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<view class="footerBox">
|
||
|
|
<view @click="tabClick(index)" class="footerItem" :class="activeIndex==index?'active':''"
|
||
|
|
v-for="(item,index) in tabList" :key="index">
|
||
|
|
<image class="tabIcon tabIcon1" mode="heightFix" :src="'/static/'+item.moduleIcon2+'.png'"></image>
|
||
|
|
<image class="tabIcon tabIcon2" mode="heightFix" :src="'/static/'+item.moduleIcon+'.png'"></image>
|
||
|
|
<view class="desc">
|
||
|
|
{{item.appName}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ['activeTab'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabList: [],
|
||
|
|
userInfo: {
|
||
|
|
accountType: 1
|
||
|
|
},
|
||
|
|
activeIndex: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.activeIndex = this.activeTab;
|
||
|
|
this.tabList.push(
|
||
|
|
{
|
||
|
|
appName: '培训计划',
|
||
|
|
moduleIcon2: 'examIcon1',
|
||
|
|
moduleIcon: 'examIcon1-select',
|
||
|
|
plugin: 'mssage',
|
||
|
|
appShow: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
appName: '规章',
|
||
|
|
moduleIcon2: 'examIcon2',
|
||
|
|
moduleIcon: 'examIcon2-select',
|
||
|
|
plugin: 'projectEnd',
|
||
|
|
appShow: 1
|
||
|
|
} )
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tabClick(index) {
|
||
|
|
this.activeIndex = index
|
||
|
|
console.log(index,666777)
|
||
|
|
switch (index){
|
||
|
|
case 0:
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/personLocation/exam/index/index'
|
||
|
|
})
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/personLocation/exam/rules/rules'
|
||
|
|
})
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.footerBox {
|
||
|
|
background-color: white;
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
height: 110rpx;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 9999;
|
||
|
|
border-top: 1px solid rgba(151, 151, 151, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.footerItem {
|
||
|
|
font-size: 24rpx;
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
color: rgba(148, 149, 173, 1);
|
||
|
|
|
||
|
|
.tabIcon {
|
||
|
|
width: fit-content;
|
||
|
|
height: 35rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabIcon2 {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: $uni-color-primary;
|
||
|
|
|
||
|
|
.tabIcon2 {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabIcon1 {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.desc {
|
||
|
|
padding-top: 5rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|