From fee661789ab88f5732782a04ba31be33a35f1f08 Mon Sep 17 00:00:00 2001
From: xcbyy <2578898740@qq.com>
Date: Wed, 14 Oct 2026 09:09:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(tabbar):=20=E4=BF=AE=E5=A4=8D=E5=BE=AE?=
 =?UTF-8?q?=E4=BF=A1=E5=B0=8F=E7=A8=8B=E5=BA=8FTabBar=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=84=B1=E8=8A=82=E5=AF=BC=E8=87=B4=E5=9B=BE=E6=A0=87=E8=86=A8?=
 =?UTF-8?q?=E8=83=80=E4=B8=BA320px=E5=B7=A8=E5=9E=8B=E5=9B=BE=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pwuniapp/App.vue                     | 61 ++++++++++++++++++++++++++++
 pwuniapp/components/CustomTabBar.vue | 46 ++++++++++++++-------
 2 files changed, 92 insertions(+), 15 deletions(-)

diff --git a/pwuniapp/App.vue b/pwuniapp/App.vue
index 0f980a8..9fc1191 100644
--- a/pwuniapp/App.vue
+++ b/pwuniapp/App.vue
@@ -179,6 +179,67 @@ view, text, image, input, button {
   color: transparent;
 }
 
+/* 底部自定义 TabBar 全局兜底规范，锁死图标尺寸与定位，杜绝微信小程序中 image 标签退化为 320x240 默认尺寸 */
+.custom-tabbar-root {
+  width: 100%;
+  .tabbar-container {
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin: 0 auto !important;
+    max-width: 450px !important;
+    box-sizing: border-box !important;
+    height: calc(118rpx + env(safe-area-inset-bottom)) !important;
+    display: flex !important;
+    align-items: flex-start !important;
+    justify-content: space-around !important;
+    z-index: 999 !important;
+  }
+  .tab-item {
+    flex: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    height: 118rpx !important;
+  }
+  .tab-icon-svg {
+    width: 50rpx !important;
+    height: 50rpx !important;
+    max-width: 50rpx !important;
+    max-height: 50rpx !important;
+    flex-shrink: 0 !important;
+  }
+  .plus-circle-btn {
+    width: 96rpx !important;
+    height: 96rpx !important;
+    min-width: 96rpx !important;
+    min-height: 96rpx !important;
+    max-width: 96rpx !important;
+    max-height: 96rpx !important;
+    border-radius: 50% !important;
+    flex-shrink: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    .plus-svg {
+      width: 48rpx !important;
+      height: 48rpx !important;
+      flex-shrink: 0 !important;
+    }
+  }
+  .radar-icon-box {
+    width: 52rpx !important;
+    height: 52rpx !important;
+    .radar-svg {
+      width: 52rpx !important;
+      height: 52rpx !important;
+      flex-shrink: 0 !important;
+    }
+  }
+}
+
 /* 移动端与 H5 响应式体验优化 */
 /* #ifdef H5 */
 html, body {
diff --git a/pwuniapp/components/CustomTabBar.vue b/pwuniapp/components/CustomTabBar.vue
index 1bb6dd3..1bd9f98 100644
--- a/pwuniapp/components/CustomTabBar.vue
+++ b/pwuniapp/components/CustomTabBar.vue
@@ -1,19 +1,20 @@
 <template>
   <view class="custom-tabbar-root" :class="{ 'theme-warm': currentThemeKey === 'warm' }">
     <!-- 底部占位块，确保内容不被导航栏遮挡 -->
-    <view class="tabbar-placeholder"></view>
+    <view class="tabbar-placeholder" style="width: 100%; pointer-events: none;"></view>
 
     <!-- 固定在屏幕底部的导航栏实体 -->
-    <view class="tabbar-container">
+    <view class="tabbar-container" style="position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 450px; display: flex; align-items: flex-start; justify-content: space-around; z-index: 999;">
       <!-- 发单人端 (5 项：首页 / 附近活动 / 我要发单+ / 友圈 / 个人中心) -->
       <template v-if="currentRole === 'PLAYER'">
         <!-- 1. 首页 -->
         <view
           class="tab-item btn-active"
           :class="{ active: current === 'home' }"
+          style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
           @click="switchTab('home', '/pages/index/index')"
         >
-          <image class="tab-icon-svg" :src="getTabIcon('home')" mode="aspectFit" />
+          <image class="tab-icon-svg" :src="getTabIcon('home')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
           <text class="tab-label">首页</text>
         </view>
 
@@ -21,16 +22,17 @@
         <view
           class="tab-item btn-active"
           :class="{ active: current === 'activity' }"
+          style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
           @click="switchTab('activity', '/pages/activity/list')"
         >
-          <image class="tab-icon-svg" :src="getTabIcon('activity')" mode="aspectFit" />
+          <image class="tab-icon-svg" :src="getTabIcon('activity')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
           <text class="tab-label">附近活动</text>
         </view>
 
         <!-- 3. 我要发单 (核心大圆圈 + 突出悬浮按键，居中对称) -->
-        <view class="tab-item special-item-wrap btn-active" @click="handlePublish">
-          <view class="plus-circle-btn">
-            <image class="plus-svg" :src="ICONS.tabPlus" mode="aspectFit" />
+        <view class="tab-item special-item-wrap btn-active" style="flex: 1; height: 118rpx; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative;" @click="handlePublish">
+          <view class="plus-circle-btn" style="width: 96rpx; height: 96rpx; min-width: 96rpx; min-height: 96rpx; max-width: 96rpx; max-height: 96rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
+            <image class="plus-svg" :src="ICONS.tabPlus" mode="aspectFit" style="width: 48rpx; height: 48rpx; flex-shrink: 0;" />
           </view>
           <text class="tab-label special-label">我要发单</text>
         </view>
@@ -39,9 +41,10 @@
         <view
           class="tab-item btn-active"
           :class="{ active: current === 'community' }"
+          style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
           @click="switchTab('community', '/pages/community/index')"
         >
-          <image class="tab-icon-svg" :src="getTabIcon('community')" mode="aspectFit" />
+          <image class="tab-icon-svg" :src="getTabIcon('community')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
           <text class="tab-label">友圈</text>
         </view>
 
@@ -49,9 +52,10 @@
         <view
           class="tab-item btn-active"
           :class="{ active: current === 'user' }"
+          style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
           @click="switchTab('user', '/pages/user/index')"
         >
-          <image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" />
+          <image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
           <text class="tab-label">个人中心</text>
         </view>
       </template>
@@ -62,9 +66,10 @@
         <view
           class="tab-item btn-active"
           :class="{ active: current === 'hall' }"
+          style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
           @click="switchTab('hall', '/pages/expert/hall')"
         >
-          <image class="tab-icon-svg" :src="getTabIcon('hall')" mode="aspectFit" />
+          <image class="tab-icon-svg" :src="getTabIcon('hall')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
           <text class="tab-label">接单大厅</text>
         </view>
 
@@ -72,11 +77,12 @@
         <view
           class="tab-item radar-item-wrap btn-active"
           :class="{ active: current === 'radar' }"
+          style="flex: 1; height: 118rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;"
           @click="switchTab('radar', '/pages/expert/radar')"
         >
-          <view class="radar-badge-box">
-            <view class="radar-icon-box" :class="{ 'radar-anim': current === 'radar' }">
-              <image class="radar-svg" :src="getTabIcon('radar')" mode="aspectFit" />
+          <view class="radar-badge-box" style="position: relative; display: flex; align-items: center; justify-content: center;">
+            <view class="radar-icon-box" :class="{ 'radar-anim': current === 'radar' }" style="width: 52rpx; height: 52rpx; display: flex; align-items: center; justify-content: center;">
+              <image class="radar-svg" :src="getTabIcon('radar')" mode="aspectFit" style="width: 52rpx; height: 52rpx; flex-shrink: 0;" />
             </view>
             <text class="radar-pill">附近5km</text>
           </view>
@@ -87,9 +93,10 @@
         <view
           class="tab-item btn-active"
           :class="{ active: current === 'user' }"
+          style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
           @click="switchTab('user', '/pages/user/index')"
         >
-          <image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" />
+          <image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
           <text class="tab-label">个人中心</text>
         </view>
       </template>
@@ -97,6 +104,15 @@
   </view>
 </template>
 
+<script>
+export default {
+  options: {
+    styleIsolation: 'apply-shared',
+    virtualHost: true
+  }
+};
+</script>
+
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import { ICONS, getTabIconUri } from '@/common/icons.js';
@@ -180,7 +196,7 @@ const handlePublish = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .custom-tabbar-root {
   width: 100%;