no message

components/en-utils/en-tab/en-tab.vue

@@ -1,27 +1,31 @@
 <template>
   <view class="tab-box">
-    <view class="tab-item">
+    <view class="tab-item " :class="{'tab-check':tabIndex===1}" @click="setTab(1)">
       <view class="tab-content">
-        <image class="tab-img" src="/static/img/tabBar/home-select.png"></image>
-        <view class="tab-text sys-size-24 text-color-dominant sys-weight-500">工作台</view>
+        <image v-if="tabIndex===1" class="tab-img" src="/static/img/tabBar/home-select.png"></image>
+        <image v-else class="tab-img" src="/static/img/tabBar/home-default.png"></image>
+        <view class="tab-text sys-size-24 text-color-dominant">工作台</view>
       </view>
     </view>
-    <view class="tab-item">
+    <view class="tab-item" :class="{'tab-check':tabIndex===2}" @click="setTab(2)">
       <view class="tab-content">
-        <image class="tab-img" src="/static/img/tabBar/home-select.png"></image>
-        <view class="tab-text sys-size-24 text-color-dominant sys-weight-500">任务</view>
+        <image v-if="tabIndex===2" class="tab-img" src="/static/img/tabBar/task-select.png"></image>
+        <image v-else class="tab-img" src="/static/img/tabBar/task-default.png"></image>
+        <view class="tab-text sys-size-24 text-color-dominant">任务</view>
       </view>
     </view>
-    <view class="tab-item">
+    <view class="tab-item" :class="{'tab-check':tabIndex===3}" @click="setTab(3)">
       <view class="tab-content">
-        <image class="tab-img" src="/static/img/tabBar/home-select.png"></image>
-        <view class="tab-text sys-size-24 text-color-dominant sys-weight-500">贷后</view>
+        <image v-if="tabIndex===3" class="tab-img" src="/static/img/tabBar/loan-select.png"></image>
+        <image v-else class="tab-img" src="/static/img/tabBar/loan-default.png"></image>
+        <view class="tab-text sys-size-24 text-color-dominant ">贷后</view>
       </view>
     </view>
-    <view class="tab-item">
+    <view class="tab-item" :class="{'tab-check':tabIndex===4}" @click="setTab(3)">
       <view class="tab-content">
-        <image class="tab-img" src="/static/img/tabBar/home-select.png"></image>
-        <view class="tab-text sys-size-24 text-color-dominant sys-weight-500">统计</view>
+        <image v-if="tabIndex===4" class="tab-img" src="/static/img/tabBar/statistics-select.png"></image>
+        <image v-else class="tab-img" src="/static/img/tabBar/statistics-default.png"></image>
+        <view class="tab-text sys-size-24 text-color-dominant ">统计</view>
       </view>
     </view>
 
@@ -41,6 +45,13 @@ export default {
   data() {
     return {};
   },
+  methods: {
+    setTab(tabIndex){
+      if(this.tabIndex!==tabIndex){
+
+      }
+    }
+  },
 
 }
 </script>
@@ -59,21 +70,31 @@ export default {
     .tab-content{
       padding-top: 25rpx;
       width: 108rpx;
-      height: 120rpx;
+      height: 130rpx;
       box-sizing: border-box;
-      box-shadow: 0 4rpx 20rpx 0 rgba(192,192,192,0.55);
       border-radius: 0 0 100rpx 100rpx;
+      text-align: center;
       .tab-img{
         width: 42rpx;
         height: 42rpx;
-        margin-left: 38rpx;
       }
       .tab-text{
-        text-align: center;
+        font-weight: 400;
+        line-height: 34rpx;
+        color: #333333;
       }
     }
 
   }
+  .tab-check{
+    .tab-content{
+      background-color: rgba(15, 177, 128, 0.1);
+      .tab-text{
+        font-weight: 500;
+        color:#0FB180;
+      }
+    }
+  }
 }
 
 </style>

pages/index/index.vue

@@ -1,9 +1,14 @@
 <template>
 	<view class="page-box page-box-bg-fff" >
-    <view class="top-data"></view>
-    <view class="content-data "></view>
+    <view class="top-data">
+      <view class="top-row">
+
+      </view>
+      <view class="content-row "></view>
+    </view>
+
     <view class="bottom-data  sys-background-fff">
-      <en-tab ></en-tab>
+      <en-tab :tab-index="1"></en-tab>
     </view>
 	</view>
 
@@ -56,12 +61,13 @@
   display: flex;
   flex-direction: column;
   .top-data{
-
-  }
-  .content-data{
     flex: 1;
     overflow: hidden;
+    .top-row{
+
+    }
   }
+
   .bottom-data{
 
   }