提交

马宇豪

2024-08-14 e3172de7866b5d04e4d3a4d5eea400c7b3eea227

 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>
@@ -39,6 +39,9 @@
         return {
         }
      },
    mounted(){

    },
      methods: {
         click_page(item){
            let page = '/' + item;
@@ -51,17 +54,36 @@
   }
</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);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

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

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

  }
}
</style>