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

<template>
  <view class="tab-box">
    <view class="tab-item">
      <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>
      </view>
    </view>
    <view class="tab-item">
      <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>
      </view>
    </view>
    <view class="tab-item">
      <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>
      </view>
    </view>
    <view class="tab-item">
      <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>
      </view>
    </view>



  </view>
</template>

<script>
export default {
  name:'en-tab',
  props:{
    'tabIndex':{
      default:1
    }
  },
  data() {
    return {};
  },

}
</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: 120rpx;
      box-sizing: border-box;
      box-shadow: 0 4rpx 20rpx 0 rgba(192,192,192,0.55);
      border-radius: 0 0 100rpx 100rpx;
      .tab-img{
        width: 42rpx;
        height: 42rpx;
        margin-left: 38rpx;
      }
      .tab-text{
        text-align: center;
      }
    }

  }
}

</style>