自定义tabbar修改

components/CusTabbar/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="bottom_tabbar">
-		<view v-for="(item,index) in list" :key="index" @tap="changeTabbar(index)">
+		<view v-for="(item,index) in list" :key="index" @tap="changeTabbar(index)" :class="{'fb':index===1}">
 			<image :src="tabbarIndex===index?item.activeImg:item.inactiveImg"></image>
 			<text :class="{'active':tabbarIndex===index}">{{item.text}}</text>
 		</view>
@@ -17,14 +17,20 @@
 				tabbarValue: 0,
 				list: [
 					{
-						inactiveImg: require('@/static/tab_home.png'),
-						activeImg: require('@/static/tab_home_active.png'),
+						inactiveImg: this.$imgBase+'tab_home1.png',
+						activeImg: this.$imgBase+'tab_home2.png',
 						text: '首页',
 						path: '/pages/home'
 					},
 					{
-						inactiveImg: require('@/static/tab_my.png'),
-						activeImg: require('@/static/tab_my_active.png'),
+						inactiveImg: this.$imgBase+'tab_publish.png',
+						activeImg: this.$imgBase+'tab_publish.png',
+						text: '发布问卷',
+						path: '/pages/publish'
+					},
+					{
+						inactiveImg: this.$imgBase+'tab_user1.png',
+						activeImg: this.$imgBase+'tab_user2.png',
 						text: '我的',
 						path: '/pages/my'
 					}
@@ -46,43 +52,52 @@
 	}
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 	.bottom_tabbar {
 		width: 100%;
-		height: 172rpx;
+		height: 174rpx;
+		background-image: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/tab_bg.png');
+		background-position: left bottom;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
 		background: #FFFFFF;
 		display: flex;
 		position: fixed;
 		left: 0;
 		bottom: 0;
 		z-index: 999;
-		padding-top: 18rpx;
-		box-sizing: border-box;
-		box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0,0,0,0.06);
 
 		&>view {
-			width: calc(100% / 2);
+			width: calc(100% / 3);
 			height: 100%;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 
 			image {
-				width: 48rpx;
-				height: 48rpx;
+				width: 42rpx;
+				height: 46rpx;
+				margin-top: 37rpx;
+			}
+			&.fb{
+				image{
+					width: 72rpx;
+					height: 72rpx;
+					margin-top: 12rpx;
+				}
 			}
 
 			text {
-				margin-top: 12rpx;
-				font-family: PingFangSC, PingFang SC;
-				font-weight: 400;
+				margin-top: 14rpx;
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
 				font-size: 22rpx;
-				color: #808080;
+				color: #7C909F;
 				line-height: 22rpx;
 				text-align: center;
 				&.active{
 					font-weight: bold;
-					color: #761E6A;
+					color: #002846;
 				}
 			}
 		}

pages.json

@@ -6,6 +6,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/publish",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/login",
 			"style": {

pages/publish.vue

@@ -0,0 +1,22 @@
+<template>
+	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		methods:{
+			
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	
+</style>