初始化素材

App.vue

@@ -12,4 +12,7 @@
 
 <style>
 	/*每个页面公共css */
+	body{
+		background-color: #f7f7f7;
+	}
 </style>

components/base/tabbar.vue

@@ -10,9 +10,7 @@
 				item.iconPath" class="icon-image" mode=""></image>
 			</view>
 			<view class="title">
-				<image :src="item.selectedTextPath"
-				v-if="select == index"></image>
-				<text v-else>{{ item.title }}</text>
+				{{ item.title }}
 			</view>
 		</view>
 	</view>
@@ -30,19 +28,16 @@
 						"iconPath": "/static/image/tabbar/2.png",
 						"pagePath": "/pages/index/index",
 						"title": "首页",
-						"selectedTextPath": "/static/image/tabbar/1t.png",
 					},{
 						"selectedIconPath": "/static/image/tabbar/3.png",
 						"iconPath": "/static/image/tabbar/4.png",
 						"pagePath": "/pages/index/publish",
 						"title": "发布",
-						"selectedTextPath": "/static/image/tabbar/3t.png",
 					},{
 						"selectedIconPath": "/static/image/tabbar/5.png",
 						"iconPath": "/static/image/tabbar/6.png",
 						"pagePath": "/pages/index/center",
 						"title": "我的",
-						"selectedTextPath": "/static/image/tabbar/5t.png",
 					}
 				]
 			};
@@ -64,7 +59,7 @@
 .tabbar{
 	position: fixed;
 	width: 750rpx;
-	background-color: #f7f7f7;
+	background-color: #fff;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -95,15 +90,12 @@
 			// text-overflow: ellipsis;
 			// -o-text-overflow: ellipsis;
 			font-size: 23rpx;
-			image{
-				width: 50rpx;
-				height: 35rpx;
-				margin-top: 10rpx;
-			}
 		}
 	}
 }
-.active{
-	// color: #03c061 !important;x
+.active .title{
+	background: $uni-linear-gradient-color; /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+	-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
+	-webkit-text-fill-color: transparent;/*给文字设置成透明*/
 }
 </style>

uni.scss

@@ -13,6 +13,19 @@
  */
 /* 颜色变量 */
 
+
+
+
+
+// 渐变主题色
+$uni-linear-gradient-color : linear-gradient(to right, #99b9f3, #af9cfa);
+// 渐变按钮颜色
+$uni-linear-gradient-btn-color : linear-gradient(to right, #3c69f1, #5f3bf5);
+
+
+
+
+
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;
 $uni-color-success: #4cd964;