86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<template>
|
|
<view class="surface-card tabbar">
|
|
<view
|
|
v-for="item in tabs"
|
|
:key="item.id"
|
|
class="tab-item"
|
|
:class="{ active: current === item.id }"
|
|
@click="navigate(item)"
|
|
>
|
|
<view class="tab-dot" :style="{ background: current === item.id ? item.color : 'var(--line-soft)' }"></view>
|
|
<text class="tab-label">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
current: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
})
|
|
|
|
const tabs = [
|
|
{ id: 'home', label: '首页', path: '/pages/home/index', color: '#1f6f5f' },
|
|
{ id: 'bills', label: '账单', path: '/pages/bills/index', color: '#d36c43' },
|
|
{ id: 'budget', label: '预算', path: '/pages/budget/index', color: '#5f8df5' },
|
|
{ id: 'stats', label: '报表', path: '/pages/stats/index', color: '#7f56d9' },
|
|
{ id: 'mine', label: '我的', path: '/pages/mine/index', color: '#44546a' }
|
|
]
|
|
|
|
function navigate(item) {
|
|
if (item.id === props.current) {
|
|
return
|
|
}
|
|
|
|
uni.redirectTo({
|
|
url: item.path
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tabbar {
|
|
position: fixed;
|
|
left: 24rpx;
|
|
right: 24rpx;
|
|
bottom: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18rpx 12rpx calc(env(safe-area-inset-bottom));
|
|
z-index: 20;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
padding: 14rpx 0;
|
|
border-radius: 22rpx;
|
|
}
|
|
|
|
.tab-item.active {
|
|
background: var(--brand-soft);
|
|
}
|
|
|
|
.tab-dot {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.tab-label {
|
|
font-size: 22rpx;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tab-item.active .tab-label {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
</style>
|