<template>

    <div class="myfooter flex-betweenCenter">

      <router-link tag="div" to='/home'>

        <img class="img" :src="isRouter('/home')?index0:index1"  alt="">

        <span>消息</span>

      </router-link>

      <div>扫一扫</div>

      <router-link tag="div" to='/my'>

        <img class="img" :src="isRouter('/my')?my0:my1"  alt="">

        <span>我的</span>

      </router-link>

    </div>

</template>

<script>

export default{

  data(){

    return{

      index0: require("@/assets/images/mine_check_s.png"),

      index1: require("@/assets/images/mine_check_n.png"),

      my0: require("@/assets/images/order_check_s.png"),

      my1: require("@/assets/images/order_check_n.png"),

    }

  },

  methods:{

    isRouter(str){

      let path=this.$route.path;

      return path.includes(str)

    }

  }

}

</script>

<style scoped>

.myfooter{

  margin: 0 auto;

  height: 49px;

  padding: 0 58px;

  background: #FFFFFF;

  box-shadow: 0px -4px 4px 1px rgba(0, 0, 0, 0.03);

}

.myfooter div{

  display: flex;

  flex-direction: column;

  text-align: center;

}

.img{

  width: 20px;

  height: 20px;

  margin-left: 4px;

}

.router-link-exact-active, .router-link-active{

  color: red;

}

</style>