提交

马宇豪

2024-07-24 33413c6be7f338ba1ee92b3218e5c078364675dc

 pages/tabBar/tabBarIndex.vue

@@ -6,14 +6,14 @@
            :fixed="false"
            :placeholder="false"
            :safeAreaInsetBottom="false"
            activeColor="#48bff4"
            activeColor="#0f7ff9"
            >
            <u-tabbar-item v-for="(item, index) in tabBarList"
               :key="index"
               :text="item.text"
               :name="item.pagePath"
               @click="click_page"
            >
         :class="{active: currentPagePath == item.pagePath}">
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
            </u-tabbar-item>
@@ -54,17 +54,34 @@
   }
</script>

<style>
<style lang="scss">
.tabBar_css{
   position: fixed;
   bottom: 0;
   background-color: red;
   bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
   z-index: 9999;
   width: 100%;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.05);
   width: calc(100vw - 20px);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: 0 -6px 10px rgba(150, 150, 150, 0.1), 0 6px 10px rgba(150, 150, 150, 0.1);

  /deep/ .u-tabbar .u-border-top{
    border-color: rgba(0,0,0,0) !important;
  }
}
.u-page__item__slot-icon{
   width: 22px;
   height: 22px;
   width: 20px;
   height: 20px;
}
/deep/ .u-tabbar-item__text{
  margin-top: 0 !important;
  line-height: 20px !important;
}

.active{
  /deep/ .u-tabbar-item__text{

  }
}
</style>