Browse Source

tabbar样式修改

tanxue 1 month ago
parent
commit
aee9e40c4f

+ 7 - 9
common/styles/global/components.scss

@@ -62,18 +62,16 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 
 
 /***** tabbar  *****/
 /***** tabbar  *****/
 .ezy-custom-tabbar{
 .ezy-custom-tabbar{
-	width: 100%;height: 150rpx;position: fixed;left: 0;right: 0;
-	bottom: var(--window-bottom);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 64rpx;
+	width: 100%;height: 100rpx;position: fixed;left: 0;right: 0;background-color: #f9f9f9;box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
+	bottom: var(--window-bottom);padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;box-sizing: border-box;z-index: 9;
+	display: flex;flex-direction: row;align-items: center;
+	.tabbar-item-box{
+		width: 25%;display: flex;flex-wrap: nowrap;justify-content: space-evenly;
 	}	
 	}	
-	.tabbar-item{width: 135rpx;height: 144rpx;@include ezy-no-repeat-cover;z-index: 2;}
-}
-.ezy-custom-tabbar::before{
-	content: '';width:100%;height: 100rpx;left: 0;right:0;bottom: 0;position: absolute;
-	background-image: url("@/static/images/tabbar/tabbar-bg.png");@include ezy-no-repeat-cover(top);
+	.tabbar-item{width: 60rpx;height: 80rpx;@include ezy-no-repeat-cover;z-index: 2;}
 }
 }
 
 
+
 /***** 标题栏  *****/
 /***** 标题栏  *****/
 // 三个元素
 // 三个元素
 .ezy-navBar-box{
 .ezy-navBar-box{

+ 0 - 1
common/styles/index.scss

@@ -7,7 +7,6 @@
 
 
 .uni-tabbar{
 .uni-tabbar{
 	@include ezy-no-repeat-cover(top);padding: 0 60rpx;box-sizing: border-box;
 	@include ezy-no-repeat-cover(top);padding: 0 60rpx;box-sizing: border-box;
-	background-image: url("@/static/images/tabbar/tabbar-bg.png");
 	.uni-tabbar-border{height: 0;}
 	.uni-tabbar-border{height: 0;}
 	.uni-tabbar__icon{margin: 0 0 64rpx;}
 	.uni-tabbar__icon{margin: 0 0 64rpx;}
 }
 }

+ 10 - 11
components/custom-tabbar/custom-tabbar.vue

@@ -1,8 +1,7 @@
 <template>
 <template>
 	<view class="ezy-custom-tabbar">
 	<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,index)"
+		<view class="tabbar-item-box" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path,index)">
+			<view class="tabbar-item" 
 				:style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }">
 				:style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }">
 			</view>
 			</view>
 		</view>
 		</view>
@@ -36,23 +35,23 @@
 		data() {
 		data() {
 			return {
 			return {
 				tabList: [{
 				tabList: [{
-						iconPath: 'static/images/tabbar/unselect/plan-sj.png',
-						activePath: 'static/images/tabbar/select/plan-sj.png',
+						iconPath: 'static/images/tabbar/unselect/xuanke-sj.png',
+						activePath: 'static/images/tabbar/select/xuanke-sj.png',
 						path: `/pages/study/index`
 						path: `/pages/study/index`
 					},
 					},
 					{
 					{
-						iconPath: 'static/images/tabbar/unselect/xinqing-sj.png',
-						activePath: 'static/images/tabbar/select/xinqing-sj.png',
+						iconPath: 'static/images/tabbar/unselect/xuexi-sj.png',
+						activePath: 'static/images/tabbar/select/xuexi-sj.png',
 						path: `/pages/zhuanti/index`
 						path: `/pages/zhuanti/index`
 					},
 					},
 					{
 					{
-						iconPath: 'static/images/tabbar/unselect/partner-sj.png',
-						activePath: 'static/images/tabbar/select/partner-sj.png',
+						iconPath: 'static/images/tabbar/unselect/faxian-sj.png',
+						activePath: 'static/images/tabbar/select/faxian-sj.png',
 						path: '/pages/game/index'
 						path: '/pages/game/index'
 					},
 					},
 					{
 					{
-						iconPath: 'static/images/tabbar/unselect/my-sj.png',
-						activePath: 'static/images/tabbar/select/my-sj.png',
+						iconPath: 'static/images/tabbar/unselect/wode-sj.png',
+						activePath: 'static/images/tabbar/select/wode-sj.png',
 						path: `/pages/my/index`
 						path: `/pages/my/index`
 					},
 					},
 				],
 				],

BIN
static/images/tabbar/select/faxian-sj.png


BIN
static/images/tabbar/select/my-sj.png


BIN
static/images/tabbar/select/partner-sj.png


BIN
static/images/tabbar/select/plan-sj.png


BIN
static/images/tabbar/select/wode-sj.png


BIN
static/images/tabbar/select/xinqing-sj.png


BIN
static/images/tabbar/select/xuanke-sj.png


BIN
static/images/tabbar/select/xuexi-sj.png


BIN
static/images/tabbar/tabbar-bg.png


BIN
static/images/tabbar/unselect/faxian-sj.png


BIN
static/images/tabbar/unselect/my-sj.png


BIN
static/images/tabbar/unselect/partner-sj.png


BIN
static/images/tabbar/unselect/plan-sj.png


BIN
static/images/tabbar/unselect/wode-sj.png


BIN
static/images/tabbar/unselect/xinqing-sj.png


BIN
static/images/tabbar/unselect/xuanke-sj.png


BIN
static/images/tabbar/unselect/xuexi-sj.png