样式优化

pages/index/game/gameList.vue

@@ -74,22 +74,22 @@
                 >
                 <u-icon
                   name="arrow-down"
-                  color="#00B78F"
+                  color="#016bf6"
                   size="16"
                   @click="goNavs('/package/jobIntention/city')"
                 ></u-icon>
               </view>
 
               <!-- 筛选 -->
-              <view class="topbg-sx-box-filter flex align-center">
+              <view class="topbg-sx-box-filter flex align-center" :class="{ activeColor: filledFieldsCount }">
                 <text
                   style="margin-right: 10rpx"
                   @click="goNavs('/package/screen/screen')"
-                  >筛选</text
+                  >筛选{{filledFieldsCount}}</text
                 >
                 <u-icon
                   name="arrow-down"
-                  color="#999999"
+                  :color="filledFieldsCount?'#016bf6':'#999999'"
                   size="16"
                   @click="goNavs('/package/screen/screen')"
                 ></u-icon>
@@ -312,6 +312,13 @@ export default {
 	  companyPeople : '' //公司规模
     };
   },
+  computed: {
+  	filledFieldsCount() {
+         const fields = [this.education, this.experience, this.industry, this.salaryRange, this.companyPeople];
+         const count = fields.filter(item => item).length;
+         return count > 0 ? '·' + count : '';
+  	}
+    },
   onLoad() {
     // 获取状态栏高度
     let systemInfo = uni.getSystemInfoSync();
@@ -1182,6 +1189,7 @@ page {
   height: 19vh;
 }
 
+
 .topbg-type.fixed {
   position: fixed;
   top: 9vh;
@@ -1191,4 +1199,9 @@ page {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10rpx);
 }
+.activeColor{
+	color: #016bf6 !important;
+	border:1rpx solid #016bf6;
+	background: #fce9dc !important;
+}
 </style>

pages/index/index.vue

@@ -142,26 +142,26 @@
 									<view class="topbg-sx-box-r-i flex align-center" style="">
 										<text style="margin-right: 10rpx;"
 											@click="goNavs('/package/jobIntention/city')">{{city?city:'选择城市'}}</text>
-										<u-icon name="arrow-down" color="#00B78F" size="16"
+										<u-icon name="arrow-down" color="#016bf6" size="16"
 											@click="goNavs('/package/jobIntention/city')"></u-icon>
 									</view>
 
 									<!-- <text style="color: #CCCCCC;margin-left: 30rpx;margin-right: 30rpx;">|</text> -->
 									<block v-if="current != typeList.length - 1">
 										<!-- 筛选 -->
-										<view class="topbg-sx-box-filter flex align-center">
+										<view class="topbg-sx-box-filter flex align-center" :class="{ activeColor: filledFieldsCount }">
 											<text style="margin-right: 10rpx;"
-												@click="goNavs('/package/screen/screen')">筛选</text>
-											<u-icon name="arrow-down" color="#999999" size="16"
+												@click="goNavs('/package/screen/screen')">筛选{{filledFieldsCount}}</text>
+											<u-icon name="arrow-down" :color="filledFieldsCount?'#016bf6':'#999999'" size="16"
 												@click="goNavs('/package/screen/screen')"></u-icon>
 										</view>
 									</block>
 									<block v-else>
 										<!-- 筛选 -->
-										<view class="topbg-sx-box-filter flex align-center">
+										<view class="topbg-sx-box-filter flex align-center" :class="{ activeColor: filledFieldsCount }">
 											<text style="margin-right: 10rpx;"
-												@click="goNavs('/package/screen/screenComp')">筛选</text>
-											<u-icon name="arrow-down" color="#999999" size="16"
+												@click="goNavs('/package/screen/screenComp')">筛选{{filledFieldsCount}}</text>
+											<u-icon name="arrow-down" color="filledFieldsCount?'#016bf6':'#999999'" size="16"
 												@click="goNavs('/package/screen/screenComp')"></u-icon>
 										</view>
 									</block>
@@ -627,6 +627,13 @@
 				imageUrl: this.bgImg
 			}
 		},
+		computed: {
+			filledFieldsCount() {
+		       const fields = [this.education, this.experience, this.industry, this.salaryRange, this.companyPeople];
+		       const count = fields.filter(item => item).length;
+		       return count > 0 ? '·' + count : '';
+			}
+		},
 		watch: {
 			current(newData, oldData) {
 				console.log(this.current)
@@ -2137,7 +2144,7 @@
 			border-radius: 6px;
 			background: #D6E7FD;
 			padding: 8rpx 12rpx;
-			display: inline-block;
+			// display: inline-block;
 			min-width: 60rpx;
 			white-space: nowrap;
 			cursor: pointer;
@@ -2156,7 +2163,7 @@
 			border-radius: 6px;
 			background: rgba(198, 198, 198, 0.1);
 			padding: 8rpx 12rpx;
-			display: inline-block;
+			// display: inline-block;
 			min-width: 60rpx;
 			white-space: nowrap;
 			cursor: pointer;
@@ -2687,4 +2694,9 @@
 		color: #333333;
 		font-size: 24upx;
 	}
+	.activeColor{
+		color: #016bf6 !important;
+		border:1rpx solid #016bf6;
+		background: #D6E7FD !important;
+	}
 </style>