88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
|
|
<template>
|
|
<nut-tabbar class="nuttabbar" @tab-switch="tabSwitch"
|
|
bottom active-color="#2BB5ECFF" unactive-color="rgba(0,0,0,0.24)" v-model="activee">
|
|
<nut-tabbar-item
|
|
v-for="item in list"
|
|
:tab-title="item.text"
|
|
:to="item.to"
|
|
>
|
|
<template #icon="props">
|
|
<img :src="props.active ? item.active : item.unactive" alt="" :style="{width:'24px',height:'24px'}"/>
|
|
</template>
|
|
</nut-tabbar-item>
|
|
</nut-tabbar>
|
|
</template>
|
|
<script setup>
|
|
import edu from "../assets/edu.png";
|
|
import edun from "../assets/edun.png";
|
|
import My from "../assets/myn.png";
|
|
import SMy from "../assets/my.png";
|
|
import department from '@/assets/department.png'
|
|
import departmentn from '@/assets/departmentn.png'
|
|
import interact from '@/assets/interact.png'
|
|
import interactn from '@/assets/interactn.png'
|
|
import { ref,onMounted } from 'vue';
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter();
|
|
const cur_path=ref(router.currentRoute.value.path)
|
|
// const props = defineProps({
|
|
// departmentType: {
|
|
// type: String,
|
|
// required: false
|
|
// }
|
|
// });
|
|
// const active = (cur_path.value=='/my-tools')?ref(1):ref(0);
|
|
const activee = active();
|
|
const list = ref([
|
|
{ text: '宣教中心', active:edu,unactive:edun,to:'/education-centre',name:'/education-centre'},
|
|
{ text: '科室服务', active:department,unactive: departmentn,to:'/department',name:'/department'},
|
|
{ text: '健康互动', active:interact,unactive: interactn,to:'/interact',name:'/interact'},
|
|
{ text: '我的', active:SMy,unactive: My,to:'/my',name:'/my'},
|
|
]);
|
|
const tabSwitch= (item,index)=> {
|
|
|
|
// console.log(activee);
|
|
}
|
|
function active()
|
|
{
|
|
if(cur_path.value=='/education-centre')
|
|
{
|
|
return ref(0);
|
|
}
|
|
else if(cur_path.value=='/department')
|
|
{
|
|
return ref(1);
|
|
}
|
|
else if(cur_path.value=='/interact')
|
|
{
|
|
return ref(2);
|
|
}
|
|
else if(cur_path.value=='/my')
|
|
{
|
|
return ref(3);
|
|
}
|
|
else
|
|
{
|
|
return ref(0);
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
document.title = list.value[activee.value].text;
|
|
});
|
|
</script>
|
|
<style scoped>
|
|
.nuttabbar{
|
|
--nut-tabbar-border-top: #fff;
|
|
--nut-tabbar-border-bottom: #ffffff;
|
|
--nut-tabbar-item-text-font-size:12px;
|
|
--nut-tabbar-box-shadow:0px -4px 16px 0px rgba(0,0,0,0.04);
|
|
--nut-tabbar-height:73px;
|
|
|
|
}
|
|
/deep/.nut-tabbar.nut-tabbar-bottom{
|
|
box-shadow: 0px -9px 28px 2px rgba(0,30,69,0.04);
|
|
border-radius: 24px 24px 0px 0px;
|
|
}
|
|
|
|
</style> |