tabbar第一版

common/styles/global/components.scss

@@ -40,6 +40,21 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
   background-position: $position;background-size: contain;background-repeat: no-repeat;
 }
 
+/***** tabbar  *****/
+.ezy-custom-tabbar{
+	width: 100%;height: 150rpx;position: fixed;left: var(-window-left);right: var(-window right);
+	bottom: 0;padding-bottom: env(safe-area-inset-bottom);box-sizing: border-box;z-index: 9;
+	.tabbar-item-box{display: flex;flex-wrap: nowrap;justify-content: space-evenly;
+	box-sizing: border-box;padding: 0 46rpx;
+	}	
+	.tabbar-item{width: 135rpx;height: 144rpx;@include ezy-no-repeat-cover;z-index: 2;}
+}
+.ezy-custom-tabbar::before{
+	content: '';width: 750rpx;height: 100rpx;left: 0;bottom: 0;position: absolute;
+	background-image: url("@/static/images/tabbar/tabbar-bg.png");@include ezy-no-repeat-cover(top);
+}
+
+
 /***** 模拟标题栏 *****/
 .ezy-title-bar {
 	height: calc(44px + env(safe-area-inset-top));

components/custom-tabbar/custom-tabbar.vue

@@ -1,10 +1,9 @@
 <template>
-  <view class="custom-tabbar">
-    <view class="tab-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path)">
-      <!-- 使用图标和文本来表示每个 Tab 项 -->
-      <image :src="item.iconPath" class="tab-icon"></image>
-      <text>{{ item.text }}</text>
-    </view>
+  <view class="ezy-custom-tabbar">
+	  <view class="tabbar-item-box">
+		  <view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path)"
+		  :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></view>
+	  </view>
   </view>
 </template>
 
@@ -13,10 +12,10 @@ export default {
   data() {
     return {
       tabList: [
-        { text: '学习计划', iconPath: 'static/images/tabbar/unselect/plan-sj.png',path:'/pages/study/index' },
-        { text: '成长', iconPath: 'static/images/tabbar/unselect/develop-sj.png',path:'/pages/study/index' },
-        { text: '伙伴', iconPath: 'static/images/tabbar/unselect/partner-sj.png',path:'/pages/study/index' },
-        { text: '搜索', iconPath: 'static/images/tabbar/unselect/my-sj.png',path:'/pages/my/index' },
+        {iconPath: 'static/images/tabbar/unselect/plan-sj.png',path:'/pages/study/index' },
+        {iconPath: 'static/images/tabbar/unselect/develop-sj.png',path:'/pages/study/index' },
+        {iconPath: 'static/images/tabbar/unselect/partner-sj.png',path:'/pages/study/index' },
+        {iconPath: 'static/images/tabbar/unselect/my-sj.png',path:'/pages/my/index' },
         // 更多 Tab 项...
       ]
     };