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

调整底部导航栏高度和间距以兼容不同设备的底部安全区域
重构导航图标布局，统一尺寸并优化居中效果
更新阴影样式和文字大小提升视觉一致性

 <template>
 <template>
   <view class="index-nav" :class="[`is-${position}`]">
   <view class="index-nav" :class="[`is-${position}`]">
-    <view class="nav-logo" :class="{ 'is-active': active === 'home' }" @tap="() => on_select('home')">
+    <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" />
         <image class="nav-icon" :src="icons?.home" mode="aspectFit" />
+      </view>
       <text class="nav-text">首页</text>
       <text class="nav-text">首页</text>
     </view>
     </view>
 
 
     <view
     <view
-      class="nav-logo"
+      class="nav-logo is-code"
       :class="[{ 'is-active': active === 'code' }, { 'is-center-raised': center_variant === 'raised' }]"
       :class="[{ 'is-active': active === 'code' }, { 'is-center-raised': center_variant === 'raised' }]"
       @tap="() => on_select('code')"
       @tap="() => on_select('code')"
     >
     >
+      <view class="nav-icon-wrap">
         <image
         <image
           class="nav-icon"
           class="nav-icon"
           :class="{ 'nav-icon--raised': center_variant === 'raised' }"
           :class="{ 'nav-icon--raised': center_variant === 'raised' }"
           :src="icons?.code"
           :src="icons?.code"
           mode="aspectFit"
           mode="aspectFit"
         />
         />
-      <view v-if="center_variant === 'raised'" class="nav-icon-placeholder"></view>
+      </view>
       <text class="nav-text">预约码</text>
       <text class="nav-text">预约码</text>
     </view>
     </view>
 
 
-    <view class="nav-logo" :class="{ 'is-active': active === 'me' }" @tap="() => on_select('me')">
+    <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" />
         <image class="nav-icon" :src="icons?.me" mode="aspectFit" />
+      </view>
       <text class="nav-text">我的</text>
       <text class="nav-text">我的</text>
     </view>
     </view>
   </view>
   </view>
@@ -64,11 +69,15 @@ const on_select = (key) => {
   left: 0;
   left: 0;
   bottom: 0;
   bottom: 0;
   width: 750rpx;
   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;
   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;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-around;
   justify-content: space-around;
   color: #A67939;
   color: #A67939;
   z-index: 99;
   z-index: 99;
@@ -88,14 +97,23 @@ const on_select = (key) => {
     align-items: center;
     align-items: center;
   }
   }
 
 
+  .nav-icon-wrap {
+    position: relative;
+    width: 56rpx;
+    height: 56rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .nav-icon {
   .nav-icon {
-    width: 48rpx;
-    height: 48rpx;
+    width: 56rpx;
+    height: 56rpx;
     display: block;
     display: block;
 
 
     &.nav-icon--raised {
     &.nav-icon--raised {
-      width: 130rpx;
-      height: 130rpx;
+      width: 140rpx;
+      height: 140rpx;
       position: absolute;
       position: absolute;
       top: -100rpx;
       top: -100rpx;
       left: 50%;
       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 {
   .nav-text {
-    font-size: 24rpx;
+    font-size: 26rpx;
     margin-top: 12rpx;
     margin-top: 12rpx;
     line-height: 1;
     line-height: 1;
   }
   }
-
-  .nav-logo.is-center-raised {
-    .nav-text {
-      margin-top: -10rpx;
-    }
-  }
 }
 }
 </style>
 </style>

@@ -264,7 +264,8 @@ useShareAppMessage(() => {
     backdrop-filter: blur(6px);
     backdrop-filter: blur(6px);
   }
   }
   .index-content {
   .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 {
     .index-control {
       position: relative;
       position: relative;
       display: flex;
       display: flex;