feat: tabbar 样式

src/components/MTabBar/index.vue

@@ -15,12 +15,17 @@
     :safe-area-inset-bottom="true"
     @change="handleChange"
   >
-    <up-tabbar-item v-for="(item, index) in tabbarList" :key="index" :text="item.text">
+    <up-tabbar-item v-for="(item, index) in tabbarList" :key="index">
       <template #active-icon>
-        <image class="tabbar-icon" :src="`/${item.selectedIconPath}`"></image>
+        <view class="flex items-center gap-4px bg-bg-page rounded-18px px-20px py-4px duration-300">
+          <image class="tabbar-icon" :src="`/${item.selectedIconPath}`"></image>
+          <view class="text-14px">{{ item.text }}</view>
+        </view>
       </template>
       <template #inactive-icon>
-        <image class="tabbar-icon" :src="`/${item.iconPath}`"></image>
+        <view>
+          <image class="tabbar-icon" :src="`/${item.iconPath}`"></image>
+        </view>
       </template>
     </up-tabbar-item>
   </up-tabbar>
@@ -45,10 +50,16 @@
 
 <style scoped lang="scss">
   .m-tabbar {
-    @apply h-50px;
+    @apply h-55px;
     :deep(.u-tabbar__content) {
-      @apply bg-bg-card;
+      @apply bg-bg-card h-55px duration-300;
       border-color: var(--border-color-1) !important;
+      .u-tabbar__content__item-wrapper {
+        @apply h-55px;
+        .u-tabbar-item__icon {
+          @apply w-full;
+        }
+      }
     }
     .tabbar-icon {
       @apply wh-32px;

src/pages.json

@@ -23,7 +23,7 @@
 				"pagePath": "pages/index/index",
 				"iconPath": "static/images/main/work.png",
 				"selectedIconPath": "static/images/main/work_1.png",
-				"text": "工作台"
+				"text": "首页"
 			},
 			{
 				"pagePath": "pages/mine/index",