tabbar开发

common/styles/global/components.scss

@@ -27,6 +27,17 @@ view{box-sizing: border-box;}
   background-position: $position;background-size: contain;background-repeat: no-repeat;
 }
 
+/***** tabbar  *****/
+.phone-custom-tabbar{
+	width: 100%;height: 150rpx;background-color: #fff;border-top: 1rpx solid #e5e4e4;z-index: 9;
+	position: fixed;left: var(-window-left);right: var(-window right);bottom: var(--window-bottom);
+	box-sizing: border-box;padding-bottom: env(safe-area-inset-bottom);display: flex;justify-content: space-around;align-items: center;
+	.tabbar-item{text-align: center;width: 160rpx;}
+	.tabbar-item-icon{width: 50rpx;height: 50rpx;display: block;@include ezy-no-repeat-cover();margin: 0 auto 8rpx;}
+	.tabbar-item-text{font-size: 28rpx;color: #333;}
+}
+
+
 /***** 富文本处理  *****/
 @mixin ezy-rich-text() {
 	div,p,span{margin: 0;padding: 0;}

common/styles/global/pages.scss

@@ -3,7 +3,7 @@
 .phone-login-page{
 	width:100%;height:100vh; background-color: #fff;
 	.login-wrap-box{
-		width:100%;height: 1283rpx;background-image: url("@/static/images/login/login-bj.png");@include ezy-no-repeat-cover(top);
+		width:100%;height: 1283rpx;background-image: url("@/static/images/login/login-bj-img.png");@include ezy-no-repeat-cover(top);
 	}
 	.bjcx-head-box{width: 100%;text-align: center;margin-bottom: 100rpx;
 	margin-top: calc(180rpx + var(--status-bar-height));display: inline-block;}

components/custom-tabbar/custom-tabbar-admin.vue

@@ -1,17 +1,17 @@
 <template>
-	<view class="ezy-custom-tabbar">
-		<view class="tabbar-item-box">
+	<view class="phone-custom-tabbar">
 			<!-- <view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path,index)"
 				:style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }">
 			</view> -->
 			<view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path,index)">
-				{{item.text}}
+				<icon class="tabbar-item-icon" :style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }"></icon>
+				<text class="tabbar-item-text">{{item.text}}</text>
 			</view>
 		</view>
-	</view>
 </template>
 
 <script>
+	import {getStaticUrl} from '@/utils/common.js';
 	import {
 		useTabBarHistory
 	} from '@/utils/emitEvents.js';
@@ -37,15 +37,15 @@
 						], */
 				tabList: [{
 						text: '首页',
-						path: `/pages/study/index`
+						path: `/pages/study/index`,
+						iconPath: getStaticUrl('static/images/tabbar/unselect/index-icon.png'),
+						activePath: getStaticUrl('static/images/tabbar/select/index-icon.png'),
 					},
 					{
-						text: '家政人员',
-						path: '/pages/game/index'
-					},
-					{
-						text: '考证人员',
-						path: `/pages/my/index`
+						text: '我的',
+						path: `/pages/my/index`,
+						iconPath: getStaticUrl('static/images/tabbar/unselect/my-icon.png'),
+						activePath: getStaticUrl('static/images/tabbar/select/my-icon.png'),
 					},
 				],
 				currentTab: 0,

components/custom-tabbar/custom-tabbar-client.vue

@@ -1,14 +1,14 @@
 <template>
-	<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)"
-				:style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }">
-			</view>
+	<view class="phone-custom-tabbar">
+		<view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path,index)">
+			<icon class="tabbar-item-icon" :style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }"></icon>
+			<text class="tabbar-item-text">{{item.text}}</text>
 		</view>
 	</view>
 </template>
 
 <script>
+	import {getStaticUrl} from '@/utils/common.js';
 	import {
 		useTabBarHistory
 	} from '@/utils/emitEvents.js';
@@ -17,19 +17,22 @@
 		data() {
 			return {
 				tabList: [{
-						iconPath: 'static/images/tabbar/unselect/plan-sj.png',
-						activePath: 'static/images/tabbar/select/plan-sj.png',
-						path: `/pages/study/index`
+						text: '首页',
+						path: `/pages/study/index`,
+						iconPath: getStaticUrl('static/images/tabbar/unselect/index-icon.png'),
+						activePath: getStaticUrl('static/images/tabbar/select/index-icon.png'),
 					},
 					{
-						iconPath: 'static/images/tabbar/unselect/partner-sj.png',
-						activePath: 'static/images/tabbar/select/partner-sj.png',
-						path: '/pages/game/index'
+						text: '家政',
+						path: '/pages/game/index',
+						iconPath: getStaticUrl('static/images/tabbar/unselect/jz-icon.png'),
+						activePath: getStaticUrl('static/images/tabbar/select/jz-icon.png'),
 					},
 					{
-						iconPath: 'static/images/tabbar/unselect/my-sj.png',
-						activePath: 'static/images/tabbar/select/my-sj.png',
-						path: `/pages/my/index`
+						text: '我的',
+						path: `/pages/my/index`,
+						iconPath: getStaticUrl('static/images/tabbar/unselect/my-icon.png'),
+						activePath: getStaticUrl('static/images/tabbar/select/my-icon.png'),
 					},
 				],
 				currentTab: 0,
@@ -54,20 +57,3 @@
 </script>
 
 
-<style scoped>
-	.custom-tabbar {
-		display: flex;
-		justify-content: space-around;
-		align-items: center;
-		/* 其他样式 */
-	}
-
-	.tab-item {
-		flex: 1;
-		/* 样式 */
-	}
-
-	.tab-icon {
-		/* 图标样式 */
-	}
-</style>

utils/common.js

@@ -71,5 +71,17 @@ export  function formatDuration(duration = 0) {
       return Math.round(duration / 60);
     }
 	
+		
+export function getStaticUrl(url) {
+	let result = '';
+	// #ifdef H5
+	result = `/mdist/${url}`
+	// #endif
 	
+	// #ifdef APP-PLUS
+	result = url
+	// #endif
+	
+	return result;
+}