From 55796a6a41294a4051f4fa050a2d665356dbfd5c Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 19 May 2026 14:05:05 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E5=BA=95=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E5=8F=8A=E6=BB=9A=E5=8A=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PermissionMenuPage.vue | 24 +++++++++++-------
 src/components/common/TabBar.vue             | 26 +++++++-------------
 src/pages/index.vue                          |  3 +--
 src/pages/mine.vue                           |  9 +++----
 src/pages/report.vue                         | 10 ++++++--
 src/pages/work.vue                           | 17 ++++++-------
 6 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/components/common/PermissionMenuPage.vue b/src/components/common/PermissionMenuPage.vue
index f91d237..0730577 100644
--- a/src/components/common/PermissionMenuPage.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/common/TabBar.vue b/src/components/common/TabBar.vue
index f289771..d2d9c2c 100644
--- a/src/components/common/TabBar.vue
+++ b/src/components/common/TabBar.vue
@@ -1,21 +1,7 @@
 <template>
-  <up-tabbar
-    :value="activeIndex"
-    :activeColor="activeColor"
-    :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"
-    >
+  <up-tabbar :value="activeIndex" :activeColor="activeColor" :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>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 3c3847d..ae6fb43 100644
--- a/src/pages/index.vue
+++ b/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 {
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index edb06c0..2f08b35 100644
--- a/src/pages/mine.vue
+++ b/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;
diff --git a/src/pages/report.vue b/src/pages/report.vue
index e22ee2f..4793ae5 100644
--- a/src/pages/report.vue
+++ b/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;
 }
-</style>
\ No newline at end of file
+
+.flex-fill {
+  flex: 1;
+  overflow: visible;
+}
+</style>
diff --git a/src/pages/work.vue b/src/pages/work.vue
index 3e7e4eb..dc84d9a 100644
--- a/src/pages/work.vue
+++ b/src/pages/work.vue
@@ -1,13 +1,8 @@
 <template>
   <view class="page-container">
     <NavBar :title="pageTitle" />
-    <PermissionMenuPage
-      page-path="pages/work"
-      title="管理中心"
-      subtitle="系统配置与管理"
-      :searchable="true"
-      :show-go-top="true"
-    />
+    <PermissionMenuPage class="flex-fill" page-path="pages/work" title="管理中心" subtitle="系统配置与管理" :searchable="true"
+      :show-go-top="true" :safe-bottom="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;
 }
-</style>
\ No newline at end of file
+
+.flex-fill {
+  flex: 1;
+  overflow: visible;
+}
+</style>