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

<template>
  <view class="tab-box">
    <view class="tab-item " :class="{'tab-check':tabIndex===1}" @click="setTab(1)">
      <view class="tab-content">
        <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" :class="{'tab-check':tabIndex===2}" @click="setTab(2)">
      <view class="tab-content">
        <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" :class="{'tab-check':tabIndex===3}" @click="setTab(3)">
      <view class="tab-content">
        <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" :class="{'tab-check':tabIndex===4}" @click="setTab(3)">
      <view class="tab-content">
        <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>



  </view>
</template>

<script>
export default {
  name:'en-tab',
  props:{
    'tabIndex':{
      default:1
    }
  },
  data() {
    return {};
  },
  methods: {
    setTab(tabIndex){
      if(this.tabIndex!==tabIndex){

      }
    }
  },

}
</script>

<style lang="scss">
.tab-box{
  display: flex;
  justify-content: space-between;
  height: 120rpx;
  padding-bottom: 14rpx;

  .tab-item{
    width: 25%;
    display: flex;
    justify-content: center;
    .tab-content{
      padding-top: 25rpx;
      width: 108rpx;
      height: 130rpx;
      box-sizing: border-box;
      border-radius: 0 0 100rpx 100rpx;
      text-align: center;
      .tab-img{
        width: 42rpx;
        height: 42rpx;
      }
      .tab-text{
        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>