|
|
@@ -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;
|
