style：底部导航栏及滚动优化

src/components/common/PermissionMenuPage.vue

@@ -24,7 +24,7 @@
     </view>
 
     <scroll-view scroll-y class="content-scroll" :scroll-top="scrollTop" scroll-with-animation @scroll="onScroll">
-      <view class="content-inner">
+      <view class="content-inner" :class="{ 'safe-bottom': safeBottom }">
         <view v-if="filteredModules.length === 0" class="empty-state">
           <text class="empty-title">暂无可用菜单</text>
           <text class="empty-desc">当前账号未返回 {{ title }} 相关权限菜单</text>
@@ -108,6 +108,10 @@ const props = defineProps({
   showGoTop: {
     type: Boolean,
     default: false
+  },
+  safeBottom: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -200,13 +204,13 @@ function handleClick(menu) {
     icon: 'none'
   })
 }
-
-
 </script>
 
 <style lang="scss" scoped>
 .page-container {
-  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   background-color: #f0f2f5;
 }
 
@@ -277,12 +281,15 @@ function handleClick(menu) {
 }
 
 .content-scroll {
-  height: calc(100vh - 240rpx);
+  flex: 1;
 }
 
 .content-inner {
   padding: 24rpx;
-  padding-bottom: 160rpx;
+
+  &.safe-bottom {
+    padding-bottom: calc(24rpx + 120rpx + env(safe-area-inset-bottom));
+  }
 }
 
 .module-section {
@@ -427,7 +434,7 @@ function handleClick(menu) {
   align-items: center;
   justify-content: center;
   box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
-  z-index: 10;
+  z-index: 50;
 }
 
 .go-top-icon {
@@ -435,5 +442,4 @@ function handleClick(menu) {
   color: #ffffff;
   font-weight: bold;
 }
-
 </style>

src/components/common/TabBar.vue

@@ -1,21 +1,7 @@
 <template>
-  <up-tabbar
+  <up-tabbar :value="activeIndex" :activeColor="activeColor" :inactiveColor="inactiveColor" :safeAreaInsetBottom="true"
-    :value="activeIndex"
+    :fixed="true" :placeholder="true" :border="false" @change="handleChange" zIndex="100">
-    :activeColor="activeColor"
+    <up-tabbar-item v-for="(item, index) in tabList" :key="index" :text="item.text" :name="index">
-    :inactiveColor="inactiveColor"
-    :safeAreaInsetBottom="true"
-    :fixed="true"
-    :placeholder="true"
-    :border="false"
-    @change="handleChange"
-    zIndex="100"
-  >
-    <up-tabbar-item
-      v-for="(item, index) in tabList"
-      :key="index"
-      :text="item.text"
-      :name="index"
-    >
       <template #active-icon>
         <image :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
       </template>
@@ -124,3 +110,9 @@ watch(() => useUserStore().menus, () => {
   height: 48rpx;
 }
 </style>
+
+<style>
+.u-tabbar {
+  flex: none !important;
+}
+</style>

src/pages/index.vue

@@ -59,9 +59,8 @@ function goTop() {
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  min-height: 100vh;
   background-color: #f0f2f5;
-  padding-bottom: 100rpx;
 }
 
 .main-scroll {

src/pages/mine.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
+  <view class="mine-container">
     <NavBar :title="pageTitle" />
     <view class="header-section">
       <view class="flex padding justify-between">
@@ -98,7 +98,6 @@ const { t } = useI18n()
 
 const pageTitle = computed(() => t('nav.mine'))
 const avatar = ref(userStore.avatar);
-const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
 const popup = ref(null);
 
 uni.$on('refresh', () => {
@@ -175,8 +174,7 @@ page {
 
 .mine-container {
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
-
 
   .header-section {
     padding: 15px 15px 45px 15px;
@@ -239,8 +237,7 @@ page {
 
 .mine-container {
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
-
 
   .header-section {
     padding: 15px 15px 45px 15px;

src/pages/report.vue

@@ -2,9 +2,11 @@
   <view class="page-container">
     <NavBar :title="pageTitle" />
     <PermissionMenuPage
+      class="flex-fill"
       page-path="pages/report"
       title="报表中心"
       subtitle="数据驱动决策 · 智能分析"
+      :safe-bottom="true"
     />
     <TabBar />
   </view>
@@ -27,6 +29,10 @@ const pageTitle = computed(() => t('tab.report'))
   flex-direction: column;
   height: 100vh;
   background-color: #f5f6f7;
-  padding-bottom: 100rpx;
+}
+
+.flex-fill {
+  flex: 1;
+  overflow: visible;
 }
 </style>

src/pages/work.vue

@@ -1,13 +1,8 @@
 <template>
   <view class="page-container">
     <NavBar :title="pageTitle" />
-    <PermissionMenuPage
+    <PermissionMenuPage class="flex-fill" page-path="pages/work" title="管理中心" subtitle="系统配置与管理" :searchable="true"
-      page-path="pages/work"
+      :show-go-top="true" :safe-bottom="true" />
-      title="管理中心"
-      subtitle="系统配置与管理"
-      :searchable="true"
-      :show-go-top="true"
-    />
     <TabBar />
   </view>
 </template>
@@ -29,6 +24,10 @@ const pageTitle = computed(() => t('tab.work'))
   flex-direction: column;
   height: 100vh;
   background-color: #f5f6f7;
-  padding-bottom: 100rpx;
+}
+
+.flex-fill {
+  flex: 1;
+  overflow: visible;
 }
 </style>