修改完成待测试

components/AppTabbar.vue

@@ -1,5 +1,10 @@
 <template>
-  <view class="app-tabbar" role="tablist" aria-label="主要导航">
+  <view
+    class="app-tabbar"
+    :class="{ 'app-tabbar--light': tone === 'light' }"
+    role="tablist"
+    aria-label="主要导航"
+  >
     <button
       v-for="item in items"
       :key="item.key"
@@ -26,7 +31,10 @@
 <script setup>
 import { goRoot } from "@/utils/navigation/gateway.js";
 
-const props = defineProps({ active: { type: String, required: true } });
+const props = defineProps({
+  active: { type: String, required: true },
+  tone: { type: String, default: "default" },
+});
 
 const items = [
   {
@@ -39,7 +47,7 @@ const items = [
   },
   {
     key: "family",
-    label: "家族",
+    label: "消息",
     routeKey: "F01",
     icon: "/static/assets/foundation/transparent/tab-family.png",
     activeIcon: "/static/assets/foundation/transparent/tab-family-active.png",
@@ -74,6 +82,11 @@ const switchRoot = (item) => {
   background: $paper-white;
 }
 
+.app-tabbar--light {
+  border-top-color: #e5dac4;
+  background: #fffdf9;
+}
+
 .tab-item {
   display: flex;
   min-width: 0;