feat:底部导航栏

pages.config.ts

@@ -28,35 +28,35 @@ export default defineUniPages({
     spacing: '3px',
     list: [
       {
-        icon: '/static/tabbar/home.png',
+        icon: '/static/tabbar/Parenting.png',
         pagePath: 'pages/index/index',
         text: 'tabbar.home',
         iconType: 'local',
       },
       {
-        icon: '/static/tabbar/category.png',
+        icon: '/static/tabbar/music.png',
         pagePath: 'pages/category/category',
         text: 'tabbar.category',
         iconType: 'local',
       },
+      // {
+      //   icon: '/static/tabbar/cart.png',
+      //   pagePath: 'pages/cart/cart',
+      //   text: 'tabbar.cart',
+      //   iconType: 'local',
+      // },
       {
-        icon: '/static/tabbar/cart.png',
-        pagePath: 'pages/cart/cart',
-        text: 'tabbar.cart',
-        iconType: 'local',
-      },
-      {
-        icon: '/static/tabbar/community.png',
+        icon: '/static/tabbar/user.png',
         pagePath: 'pages/community/community',
         text: 'tabbar.community',
         iconType: 'local',
       },
-      {
-        icon: '/static/tabbar/person.png',
-        pagePath: 'pages/person/person',
-        text: 'tabbar.person',
-        iconType: 'local',
-      },
+      // {
+      //   icon: '/static/tabbar/person.png',
+      //   pagePath: 'pages/person/person',
+      //   text: 'tabbar.person',
+      //   iconType: 'local',
+      // },
     ],
   },
 })

src/components/shop-tabbar/shop-tabbar.vue

@@ -1,58 +1,21 @@
 <template>
   <view class="shop-tabbar-container">
-    <view
-      class="tabbar-item"
-      @click="selectTabBar(category.path, 1)"
-      :class="{ 'tabbar-active': tabbarStore.curIdx === 1 }"
-    >
-      <view class="tabbar-item-wrapper">
-        <view class="tabbar-item-wrapper-active-bg"></view>
-        <image :src="category.icon" class="tabbar-item-img" mode="widthFix"></image>
-      </view>
-      <view class="tabbar-item-text">{{ category.text }}</view>
-    </view>
-    <view
-      class="tabbar-item"
-      @click="selectTabBar(cate.path, 2)"
-      :class="{ 'tabbar-active': tabbarStore.curIdx === 2 }"
-    >
-      <view class="tabbar-item-wrapper">
-        <view class="tabbar-item-wrapper-active-bg"></view>
-        <image :src="cate.icon" class="tabbar-item-img" mode="widthFix"></image>
-      </view>
-      <view class="tabbar-item-text">{{ cate.text }}</view>
-    </view>
-    <view
-      class="home-item"
-      @click="selectTabBar(home.path, 0)"
-      :class="{ 'home-active': tabbarStore.curIdx === 0 }"
-    >
+    <view class="home-item" @click="selectTabBar(Parenting.path, 0)">
       <view class="home-item-wrapper">
-        <image :src="home.icon" class="home-item-img" mode="widthFix"></image>
+        <image :src="Parenting.icon" class="home-item-img" mode="widthFix"></image>
       </view>
-      <view class="home-item-text">{{ home.text }}</view>
     </view>
-    <view
-      class="tabbar-item"
-      @click="selectTabBar(community.path, 3)"
-      :class="{ 'tabbar-active': tabbarStore.curIdx === 3 }"
-    >
-      <view class="tabbar-item-wrapper">
-        <view class="tabbar-item-wrapper-active-bg"></view>
-        <image :src="community.icon" class="tabbar-item-img" mode="widthFix"></image>
+
+    <view class="home-item" @click="selectTabBar(music.path, 0)">
+      <view class="home-item-wrapper">
+        <image :src="music.icon" class="home-item-img" mode="widthFix"></image>
       </view>
-      <view class="tabbar-item-text">{{ community.text }}</view>
     </view>
-    <view
-      class="tabbar-item"
-      @click="selectTabBar(person.path, 4)"
-      :class="{ 'tabbar-active': tabbarStore.curIdx === 4 }"
-    >
-      <view class="tabbar-item-wrapper">
-        <view class="tabbar-item-wrapper-active-bg"></view>
-        <image :src="person.icon" class="tabbar-item-img" mode="widthFix"></image>
+    <!-- 111 -->
+    <view class="home-item" @click="selectTabBar(user.path, 0)">
+      <view class="home-item-wrapper">
+        <image :src="user.icon" class="home-item-img" mode="widthFix"></image>
       </view>
-      <view class="tabbar-item-text">{{ person.text }}</view>
     </view>
   </view>
 </template>
@@ -64,16 +27,18 @@
 
   const tabbarStore = useTabbarStore()
 
-  /** tabbarList 里面的 path 从 pages.config.ts 得到 */
-  const [home, category, cate, community, person] = tabBar.list.map((item) => ({
+  const [Parenting, music, user] = tabBar.list.map((item) => ({
     ...item,
     path: `/${item.pagePath}`,
     text: t(item.text),
   }))
 
   function selectTabBar(url: string, index: number) {
-    tabbarStore.setCurIdx(index)
-    uni.switchTab({ url })
+    console.log(url, '11111111')
+    console.log(index, '222222')
+
+    // tabbarStore.setCurIdx(index)
+    // uni.switchTab({ url })
   }
 
   onLoad(() => {
@@ -107,103 +72,27 @@
     display: flex;
     justify-content: space-between;
     width: 100vw;
-    height: 144rpx;
-    overflow: hidden;
-    background-color: transparent;
-    background-image: url(@/static/images/tabbar-bg.svg);
-    background-size: cover;
-
-    .tabbar-item {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      width: 110rpx;
-      text-align: center;
-
-      .tabbar-item-text {
-        font-family: 'PingFang SC';
-        font-size: 20rpx;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 30rpx; /* 180% */
-        color: var(--333, #333);
-      }
-
-      .tabbar-item-wrapper {
-        position: relative;
-        width: 60rpx;
-        height: 60rpx;
-        margin: 0 auto;
-        border-radius: 50%;
-
-        .tabbar-item-wrapper-active-bg {
-          position: absolute;
-          top: 10rpx;
-          left: 10rpx;
-          display: none;
-          width: 40rpx;
-          height: 40rpx;
-          border-radius: 50%;
-        }
-
-        .tabbar-item-img {
-          width: 56rpx;
-          margin: 5rpx auto;
-        }
-      }
-
-      &.tabbar-active {
-        .tabbar-item-text {
-          color: #ff4c1b;
-        }
-        .tabbar-item-wrapper {
-          .tabbar-item-wrapper-active-bg {
-            display: block;
-            @include shop-box-show(40rpx);
-          }
-        }
-      }
-    }
-
-    .home-item {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      width: 96rpx;
-      text-align: center;
-
-      .home-item-text {
-        font-family: 'PingFang SC';
-        font-size: 20rpx;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 36rpx; /* 180% */
-        color: var(--333, #333);
-      }
-
-      .home-item-wrapper {
-        display: flex;
-        justify-content: center;
-        width: 96rpx;
-        height: 96rpx;
-        background-color: #f2f2f2;
-        border-radius: 24rpx;
-
-        .home-item-img {
-          width: 80rpx;
-          margin-top: 10rpx;
-        }
-      }
-
-      &.home-active {
-        .home-item-wrapper {
-          background-color: #ff4c1b;
-        }
-
-        .home-item-text {
-          color: #ff4c1b;
-        }
-      }
-    }
+    height: 3.5rem;
+    background-color: #fff;
+  }
+  .home-item {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+  .home-item-wrapper {
+    margin-bottom: 5rpx;
+  }
+  .home-item-img {
+    width: 7.125rem;
+    height: 2.5rem;
+    object-fit: contain;
+  }
+  .home-item-img:hover {
+    color: #007aff;
   }
 </style>