标签数字提示颜色修改

pages/index/index.vue

@@ -19,10 +19,15 @@
 			</view>
 		</view>
 		<view class="tabs">
-			<u-tabs-swiper bg-color="#7c59fc" bar-width="200" inactive-color="#ffffff" active-color="#ffffff"
-				:is-scroll="false" :current="titleCurrent" :list="titleTabs" @change="titleTabsChange"
-				:class="{'u-badge': titleCurrent===2}">
-			</u-tabs-swiper>
+			<view class="deom-flex">
+				<view class="defa" :class="{'active': titleCurrent==index}" v-for="(item,index) in titleTabs"
+					:key="index" @tap="titleTabsChange(index)">
+					<text class="Tcenter">
+						{{item.name}}
+					</text>
+					<text class="radius" :class="{'show': titleCurrent===2}" v-if="item.count>0">{{item.count}}</text>
+				</view>
+			</view>
 		</view>
 		<view class="container">
 			<!-- <u-button @click="navigator('../register/register')">跳转注册页(测试用)</u-button> -->
@@ -488,4 +493,41 @@
 		width: 35rpx;
 		font-size: 35rpx;
 	}
+	.defa {
+		/* 		width: 250rpx; */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		flex: 1;
+		margin-bottom: 5rpx;
+	}
+	
+	.active {
+		/* 		width: 250rpx; */
+		border-bottom: 2px solid #f7f8f9;
+		}
+		.radius {
+			margin-left: 10rpx;
+			display: inline-block;
+			width: 45rpx;
+			height: 45rpx;
+			border: 3rpx none #ff9900;
+			background-color: #ff9900;
+			color: white;
+			border-radius: 50%;
+		}
+		
+		.show {
+			background-color: #00ff00
+		}
+		.deom-flex {
+			text-align: center;
+			vertical-align: middle;
+			height: 60rpx;
+			display: flex;
+			flex-direction: row;
+			font-size: 35rpx;
+			background-color: #7D5AFC;
+			color:#ffffff;
+		}
 </style>