rain
66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<!-- 公共组件：根页面底部导航；仅维护家谱、家族、我的三项已确认入口及其透明图标。 -->
|
||
<template>
|
||
<view class="app-tabbar">
|
||
<view v-for="item in items" :key="item.key" class="tab-item" @click="switchTab(item)">
|
||
<image class="tab-icon" :src="active === item.key ? item.activeIcon : item.icon" mode="aspectFit" />
|
||
<text :class="['tab-label', { active: active === item.key }]">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({ active: { type: String, required: true } })
|
||
|
||
const items = [
|
||
{ key: 'genealogy', label: '家谱', path: '/pages/genealogy/g01-my-genealogies', icon: '/static/assets/foundation/transparent/tab-genealogy.png', activeIcon: '/static/assets/foundation/transparent/tab-genealogy-active.png' },
|
||
{ key: 'family', label: '家族', path: '/pages/family/f01-family-feed', icon: '/static/assets/foundation/transparent/tab-family.png', activeIcon: '/static/assets/foundation/transparent/tab-family-active.png' },
|
||
{ key: 'profile', label: '我的', path: '/pages/profile/m01-profile-home', icon: '/static/assets/foundation/transparent/tab-profile.png', activeIcon: '/static/assets/foundation/transparent/tab-profile-active.png' }
|
||
]
|
||
|
||
const switchTab = (item) => {
|
||
if (item.key !== props.active) uni.reLaunch({ url: item.path })
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-tabbar {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 20;
|
||
display: flex;
|
||
height: 112rpx;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
box-sizing: content-box;
|
||
border-top: 1rpx solid $gold-soft;
|
||
background: $paper-white;
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
min-height: 88rpx;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 4rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tab-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin-bottom: 2rpx;
|
||
}
|
||
|
||
.tab-label {
|
||
color: $ink-muted;
|
||
font-size: 30rpx;
|
||
letter-spacing: 2rpx;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.tab-label.active { color: $brand-red; font-weight: 700; }
|
||
</style>
|