<template>
      <view class="tabBottom">
          <navigator url="/pages/index/index" class="con" hover-class="none"  open-type="reLaunch">
               <image class="img" v-if="stateTab=='index'" src="../static/homea.png" mode=""></image>
             <image class="img" v-else src="../static/home.png" mode=""></image>
                <view class="text">
                     首页
                </view>
          </navigator>
          <navigator url="/pages/classify/classify" class="con" hover-class="none"  open-type="reLaunch">
               <image class="img" v-if="stateTab=='classify'" src="../static/fla.png" mode=""></image>
                            <image class="img" v-else src="../static/fl.png" mode=""></image>
                <view class="text">
                     分类
                </view>
          </navigator>
          <navigator  class="con" hover-class="none"  url="/pages/personalCenter/personalCenter" open-type="reLaunch">
               <image class="img" v-if="stateTab=='center'" src="../static/may.png" mode=""></image>
                <image class="img" v-else src="../static/my.png" mode=""></image>
                <view class="text"  :class="stateTab=='center'?'on':''">
                    我的
                </view>
          </navigator>
      </view>
</template>

<script>
    export default {
        props:{
            stateTab:String
        },
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
.tab{
 
}
.tabBottom{
      width: 100%; 
      position: fixed;
      bottom: 0px;
      left: 0px;
       height: 130rpx; 
        background-color: #FFFFFF;
        padding: 0 105rpx;
        box-sizing: border-box;
        padding-top: 35rpx;
        display: flex;
        justify-content: space-between;
      
}
    
.tabBottom .con{
    padding: 0 30rpx;
}
.tabBottom .img{
    width: 40rpx;
    height: 40rpx;
    display: block;
    
    margin: auto;
}
.tabBottom .text{
    text-align: center;
    color: #8c8c9b;
    margin-top: 15rpx;
    font-size: 24rpx
}
.tabBottom  .on{
     color:#d33333;
}
</style>
