You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.3 KiB
79 lines
2.3 KiB
<template> |
|
<view class="maxtabbox"> |
|
<view v-for="(item,index) in tabberlist" @click="gopath(item.router)" :key='index'> |
|
<image :src="state==item.phname?item.checkicon:item.icon"></image> |
|
<view :class="state==item.phname?'xz':''">{{item.name}}</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { tabberT } from '@/interfaces/compoment/Tabber' |
|
import { reactive, defineProps, toRefs,watchEffect } from "vue" |
|
let details = reactive<tabberT>({ |
|
tabberlist: [ |
|
{ phname:'home',icon: '/static/TabberIcon/icon1.png', checkicon: '/static/TabberIcon/icon1check.png', name: '工作台',router:'/pages/index/index' }, |
|
{ phname:'task',icon: '/static/TabberIcon/icon2.png', checkicon: '/static/TabberIcon/icon2check.png', name: '任务',router:'/pages/taskList/taskList' }, |
|
{ phname:'report',icon: '/static/TabberIcon/icon3.png', checkicon: '/static/TabberIcon/icon3check.png', name: '报表',router:'/pages/reportForms/reportForms' }, |
|
{ phname:'news',icon: '/static/TabberIcon/icon4.png', checkicon: '/static/TabberIcon/icon4check.png', name: '信息',router:'/pages/news/news' }, |
|
{ phname:'user',icon: '/static/TabberIcon/icon5.png', checkicon: '/static/TabberIcon/icon5check.png', name: '我的',router:'/pages/user/user' }, |
|
], |
|
state: 'home' |
|
}) |
|
let props=defineProps<{checkstate?:string}>() |
|
// console.log(props.checkstate); |
|
watchEffect(()=>{ |
|
details.state=props.checkstate |
|
}) |
|
function gopath(path:string){ |
|
uni.switchTab({ |
|
url:path |
|
}) |
|
// // #ifdef MP-WEIXIN |
|
// uni.switchTab({ |
|
// url:path |
|
// }) |
|
// // #endif |
|
// // #ifndef MP-WEIXIN |
|
// uni.reLaunch({ |
|
// url:path |
|
// }) |
|
// // #endif |
|
} |
|
const {tabberlist,state} =toRefs(details) |
|
</script> |
|
|
|
<style lang="scss"> |
|
.maxtabbox{ |
|
display: grid; |
|
grid-template-columns: 20% 20% 20% 20% 20%; |
|
position: fixed; |
|
left: 0; |
|
bottom: -50upx; |
|
z-index: 9999999999; |
|
background-color: #fff; |
|
width: 100vw; |
|
padding: 10upx 0; |
|
box-sizing: border-box; |
|
// border-top: 1upx solid #dddddd; |
|
padding-top: 15upx; |
|
>view{ |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding-bottom: 10upx; |
|
>image{ |
|
width: 45upx; |
|
height: 45upx; |
|
margin-bottom: 5upx; |
|
} |
|
>view{ |
|
font-size: 24upx; |
|
color: #AFB4BA; |
|
} |
|
.xz{ |
|
color: #092C4D !important; |
|
} |
|
} |
|
} |
|
</style> |