tabbar调整

components/PositionList/index.vue

@@ -21,12 +21,12 @@
                 <span v-else class="salary-text MiSans-Bold">{{ item.job?.payFrom }}-{{ item.job?.payTo }}{{ item.job?.payName ? '/' + item.job?.payName : '' }}</span>
             </view>
             <view class="font-size-13">
-              <span class="desc-tag MiSans-Normal">
-                <span>{{item.job?.area?.str ?? '全国' }}</span>
+              <span class="desc-tag">
+                <span class="MiSans-Normal">{{item.job?.area?.str ?? '全国' }}</span>
                 <span class="divider-mx" v-if="item.job?.eduName">|</span>
-                <span>{{item.job?.eduName }}</span>
+                <span class="MiSans-Normal">{{item.job?.eduName }}</span>
                 <span class="divider-mx" v-if="item.job?.expName">|</span>
-                <span>{{item.job?.expName }}</span>
+                <span class="MiSans-Normal">{{item.job?.expName }}</span>
               </span>
             </view>
           </view>

custom-tab-bar/index.js

@@ -2,8 +2,8 @@ Component({
   data: {
     selected: 0,
 		show: true,
-    color: "#7A7E83",
-    selectedColor: "#00B760",
+    color: "#7B8193 ",
+    selectedColor: "#0E100F ",
     list: [
 			{
 				"pagePath": "/pages/index/position",
@@ -19,8 +19,7 @@ Component({
 			},
 			{
 				"pagePath": "/pages/index/welfare",
-				"text": "会员福利",
-        "center": true,
+				"text": '',
 				"iconPath": "/static/img/welfare.png",
 				"selectedIconPath": "/static/img/welfare.png"
 			},

custom-tab-bar/index.wxml

@@ -3,12 +3,14 @@
   <view
     wx:for="{{list}}"
     wx:key="index"
-    class="tab-bar-item {{ item.center ? 'center' : ''}}"
+    class="tab-bar-item MiSans-Medium {{ !item.text ? 'center' : ''}}"
     data-path="{{item.pagePath}}"
     data-index="{{index}}"
     bindtap="switchTab"
   >
     <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
-    <view style="color: {{selected === index ? selectedColor : color}};z-index: 1;">{{item.text}}</view>
+    <view style="color: {{selected === index ? selectedColor : color}};z-index: 1;margin-top: {{ item.text ? '6rpx' : '0'}}">
+      {{item.text}}
+    </view>
   </view>
 </view>

custom-tab-bar/index.wxss

@@ -32,43 +32,17 @@
   position: relative;
 }
 
-.tab-bar-item.center {
-  margin-top: -20px;
-}
 .tab-bar-item.center image {
-  width: 56px;
-  height: 56px;
-  z-index: 3;
-  border-radius: 50%;
-}
-.tab-bar-item.center::before {
-  content: '';
-  width: 64px;
-  height: 32px;
-  position: absolute;
-  left: 50%;
-  top: 0;
-  transform: translate(-50%, 0px);
-  background: #FFF;
-  border-radius: 180px 180px 0 0 ;
-  box-shadow: 0px 8px 20px 0px rgba(0,0,0,.5);
-  /* clip-path: inset(0 0 66.66% 0); 裁剪三分之一高度 */
-}
-.tab-bar-item.center::after {
-  content: '';
-  width: 100px;
-  height: 40px;
-  position: absolute;
-  left: 50%;
-  top: 20px;
-  background: #FFF;
-  transform: translate(-50%, 0px);
+  width: 84rpx;
+  height: 84rpx;
 }
+
 .tab-bar-item image {
-  width: 27px;
-  height: 27px;
+  width: 40rpx;
+  height: 40rpx;
 }
 
 .tab-bar-item view {
-  font-size: 12px;
+  font-size: 24rpx;
+  font-family: MiSans-Medium;
 }

pages.json

@@ -389,8 +389,8 @@
 		"backgroundColor": "#ffffff"
 	},
 	"tabBar": {
-		"color": "#7A7E83",
-		"selectedColor": "#00B760",
+		"color": "#7B8193",
+		"selectedColor": "#0E100F",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"height": "65px",
@@ -411,7 +411,7 @@
 			},
 			{
 				"pagePath": "pages/index/welfare",
-				"text": "会员福利",
+				"text": "",
 				"iconPath": "/static/img/welfare.png",
 				"selectedIconPath": "/static/img/welfare.png"
 			},