133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
||
<view
|
||
class="app-tabbar"
|
||
:class="{ 'app-tabbar--light': tone === 'light' }"
|
||
role="tablist"
|
||
aria-label="主要导航"
|
||
>
|
||
<button
|
||
v-for="item in items"
|
||
:key="item.key"
|
||
class="tab-item"
|
||
role="tab"
|
||
:aria-selected="active === item.key"
|
||
:aria-label="`${item.label}${active === item.key ? '，当前页面' : ''}`"
|
||
hover-class="tab-item--pressed"
|
||
@click="switchRoot(item)"
|
||
>
|
||
<image
|
||
class="tab-icon"
|
||
:src="active === item.key ? item.activeIcon : item.icon"
|
||
mode="aspectFit"
|
||
aria-hidden="true"
|
||
/>
|
||
<text :class="['tab-label', 'app-single-line', { active: active === item.key }]">{{
|
||
item.label
|
||
}}</text>
|
||
</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { goRoot } from "@/utils/navigation/gateway.js";
|
||
|
||
const props = defineProps({
|
||
active: { type: String, required: true },
|
||
tone: { type: String, default: "default" },
|
||
});
|
||
|
||
const items = [
|
||
{
|
||
key: "genealogy",
|
||
label: "家谱",
|
||
routeKey: "G01",
|
||
icon: "/static/assets/foundation/transparent/tab-genealogy.png",
|
||
activeIcon:
|
||
"/static/assets/foundation/transparent/tab-genealogy-active.png",
|
||
},
|
||
{
|
||
key: "family",
|
||
label: "消息",
|
||
routeKey: "F01",
|
||
icon: "/static/assets/foundation/transparent/tab-family.png",
|
||
activeIcon: "/static/assets/foundation/transparent/tab-family-active.png",
|
||
},
|
||
{
|
||
key: "profile",
|
||
label: "我的",
|
||
routeKey: "M01",
|
||
icon: "/static/assets/foundation/transparent/tab-profile.png",
|
||
activeIcon: "/static/assets/foundation/transparent/tab-profile-active.png",
|
||
},
|
||
];
|
||
|
||
const switchRoot = (item) => {
|
||
if (item.key === props.active) return;
|
||
return goRoot(item.routeKey);
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-tabbar {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 20;
|
||
display: flex;
|
||
min-height: 112rpx;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
box-sizing: content-box;
|
||
border-top: 1rpx solid $gold-soft;
|
||
background: $paper-white;
|
||
}
|
||
|
||
.app-tabbar--light {
|
||
border-top-color: #e5dac4;
|
||
background: #fffdf9;
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
min-width: 0;
|
||
min-height: 88rpx;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0;
|
||
padding: 4rpx 0;
|
||
box-sizing: border-box;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
line-height: normal;
|
||
}
|
||
.tab-item::after {
|
||
border: 0;
|
||
}
|
||
.tab-item--pressed {
|
||
opacity: 0.72;
|
||
}
|
||
|
||
.tab-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin-bottom: 2rpx;
|
||
}
|
||
|
||
.tab-label {
|
||
max-width: 100%;
|
||
color: $ink-muted;
|
||
font-size: clamp(17px, 30rpx, 22px);
|
||
letter-spacing: 2rpx;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-label.active {
|
||
color: $brand-red;
|
||
font-weight: 700;
|
||
}
|
||
</style>
|