81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<template>
|
|
<view class="supervisor-tabbar">
|
|
<view
|
|
v-for="item in items"
|
|
:key="item.key"
|
|
class="supervisor-tab"
|
|
:class="{ active: active === item.key }"
|
|
@click="open(item.path)"
|
|
>
|
|
<uni-icons
|
|
:type="active === item.key ? item.activeIcon : item.icon"
|
|
size="22"
|
|
:color="active === item.key ? 'var(--supervisor-nav-active)' : 'var(--supervisor-nav-muted)'"
|
|
/>
|
|
<text>{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{ active: 'today' | 'team' | 'review' | 'profile' }>();
|
|
|
|
const items = [
|
|
{ key: 'today', label: '今日', icon: 'home', activeIcon: 'home-filled', path: '/pages/supervisor/index/index' },
|
|
{ key: 'team', label: '团队', icon: 'staff', activeIcon: 'staff-filled', path: '/pages/supervisor/team/index' },
|
|
{ key: 'review', label: '复盘', icon: 'list', activeIcon: 'list', path: '/pages/supervisor/reviews/index' },
|
|
{ key: 'profile', label: '我', icon: 'person', activeIcon: 'person-filled', path: '/pages/supervisor/profile/index' }
|
|
] as const;
|
|
|
|
const open = (path: string) => {
|
|
const pages = getCurrentPages();
|
|
const current = pages[pages.length - 1]?.route;
|
|
if (current === path.replace(/^\//, '')) return;
|
|
uni.redirectTo({ url: path });
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.supervisor-tabbar {
|
|
--supervisor-nav-active: #e60012;
|
|
--supervisor-nav-muted: #858991;
|
|
--supervisor-nav-radius: 18px;
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 12px;
|
|
left: 20px;
|
|
z-index: 20;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
padding: 10px 8px 9px;
|
|
border: 1px solid rgba(24, 34, 48, 0.06);
|
|
border-radius: var(--supervisor-nav-radius);
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0 10px 28px rgba(24, 34, 48, 0.1);
|
|
}
|
|
|
|
.supervisor-tab {
|
|
display: flex;
|
|
min-height: 44px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
color: var(--supervisor-nav-muted);
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.supervisor-tab.active {
|
|
color: var(--supervisor-nav-active);
|
|
font-weight: 800;
|
|
}
|
|
|
|
@media (min-width: 520px) {
|
|
.supervisor-tabbar {
|
|
right: calc((100vw - var(--mobile-shell-max-width)) / 2 + 20px);
|
|
left: calc((100vw - var(--mobile-shell-max-width)) / 2 + 20px);
|
|
}
|
|
}
|
|
</style>
|