hookehuyr

fix(布局): 调整底部导航栏样式以适应安全区域

调整底部导航栏高度和间距以兼容不同设备的底部安全区域
重构导航图标布局,统一尺寸并优化居中效果
更新阴影样式和文字大小提升视觉一致性
<template>
<view class="index-nav" :class="[`is-${position}`]">
<view class="nav-logo" :class="{ 'is-active': active === 'home' }" @tap="() => on_select('home')">
<image class="nav-icon" :src="icons?.home" mode="aspectFit" />
<view class="nav-logo is-home" :class="{ 'is-active': active === 'home' }" @tap="() => on_select('home')">
<view class="nav-icon-wrap">
<image class="nav-icon" :src="icons?.home" mode="aspectFit" />
</view>
<text class="nav-text">首页</text>
</view>
<view
class="nav-logo"
class="nav-logo is-code"
:class="[{ 'is-active': active === 'code' }, { 'is-center-raised': center_variant === 'raised' }]"
@tap="() => on_select('code')"
>
<image
class="nav-icon"
:class="{ 'nav-icon--raised': center_variant === 'raised' }"
:src="icons?.code"
mode="aspectFit"
/>
<view v-if="center_variant === 'raised'" class="nav-icon-placeholder"></view>
<view class="nav-icon-wrap">
<image
class="nav-icon"
:class="{ 'nav-icon--raised': center_variant === 'raised' }"
:src="icons?.code"
mode="aspectFit"
/>
</view>
<text class="nav-text">预约码</text>
</view>
<view class="nav-logo" :class="{ 'is-active': active === 'me' }" @tap="() => on_select('me')">
<image class="nav-icon" :src="icons?.me" mode="aspectFit" />
<view class="nav-logo is-me" :class="{ 'is-active': active === 'me' }" @tap="() => on_select('me')">
<view class="nav-icon-wrap">
<image class="nav-icon" :src="icons?.me" mode="aspectFit" />
</view>
<text class="nav-text">我的</text>
</view>
</view>
......@@ -64,11 +69,15 @@ const on_select = (key) => {
left: 0;
bottom: 0;
width: 750rpx;
height: 134rpx;
height: calc(134rpx + constant(safe-area-inset-bottom));
height: calc(134rpx + env(safe-area-inset-bottom));
padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
background: #FFFFFF;
box-shadow: 0 -10rpx 8rpx 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 -8rpx 8rpx 0 rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
align-items: flex-end;
justify-content: space-around;
color: #A67939;
z-index: 99;
......@@ -88,14 +97,23 @@ const on_select = (key) => {
align-items: center;
}
.nav-icon-wrap {
position: relative;
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-icon {
width: 48rpx;
height: 48rpx;
width: 56rpx;
height: 56rpx;
display: block;
&.nav-icon--raised {
width: 130rpx;
height: 130rpx;
width: 140rpx;
height: 140rpx;
position: absolute;
top: -100rpx;
left: 50%;
......@@ -103,21 +121,18 @@ const on_select = (key) => {
}
}
.nav-icon-placeholder {
width: 48rpx;
height: 48rpx;
.nav-logo.is-home,
.nav-logo.is-me {
.nav-icon {
width: 56rpx;
height: 56rpx;
}
}
.nav-text {
font-size: 24rpx;
font-size: 26rpx;
margin-top: 12rpx;
line-height: 1;
}
.nav-logo.is-center-raised {
.nav-text {
margin-top: -10rpx;
}
}
}
</style>
......
......@@ -264,7 +264,8 @@ useShareAppMessage(() => {
backdrop-filter: blur(6px);
}
.index-content {
height: calc(100vh - 134rpx);
height: calc(100vh - 134rpx - constant(safe-area-inset-bottom));
height: calc(100vh - 134rpx - env(safe-area-inset-bottom));
.index-control {
position: relative;
display: flex;
......