<template>

  <div id="foot">

    <div class="tabBar">

    <div class="menu"><p class="cont"> <router-link to='/'><img src="./img/tabBar1.png" alt="" class="src" height="47px" ></router-link><span v-bind:class="{active:routerCurrent==1}"> 首页</span> </p></div>

    <div class="menu"><p class="cont"> <router-link to='/SignIn'><img src="./img/tabBar2.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==2}"> 签到</span> </p></div>

    <div class="menu"><p class="cont"> <router-link to='/prize'><img src="./img/tabBar3.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==3}"> 福利</span> </p></div>

    <div class="menu"><p class="cont"> <router-link to='/my'><img src="./img/tabBar4.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==4}"> 我的</span> </p></div>

    </div>

  </div>

</template>

<script>

export default {

  data(){

    return{

      routerCurrent :1 ,

    }

  },

  created () {

    this.getRouter();

  },

  watch: {

    $route() {

      this.getRouter();

    }

  },

   methods: {

     //获取当前处于哪一个路由

    getRouter() {

      if (this.$route.path == "/") {

        this.routerCurrent = 1;

      }

      if (this.$route.path == "/SignIn") {

        this.routerCurrent = 2;

      }

      if (this.$route.path == "/prize") {

        this.routerCurrent = 3;

      }

      if (this.$route.path == "/my") {

        this.routerCurrent = 4;

      }

      console.log(this.$route.path);

    },

  },

  mounted () {

  }

}

</script>

<style scoped lang="scss">

  #foot{

    height: 1.47rem;

    position: fixed;

    width: 100vw;

    background: #fff;

    bottom: 0;

    .active{

      color: #e4007f;

    }

    .tabBar{

      margin: 0 0.2rem;

      height:100%;

      display: flex;

      text-align:center;

      display:-webkit-flex;

      flex-wrap:nowrap;

      flex-direction:reverse;

      justify-content:space-between;

      .menu{

        a{

          display: block;

          margin: 0.1rem auto -0.25rem;

        }

        span{

          font-size: 16px;

        }

      }

    }

  }

</style>

<template>

  <div id="my">

    <div class="head"></div>

    <div class="pic">

      <div class="cover">

        <i class="el-icon-message"></i>

      </div>

    </div>

      <!-- 底部nav -->

    <foot  :parentMessage="routerPath"></foot>

  </div>

</template>

<script>

import foot from '@/components/foot/foot'

export default {

  data(){

    return{

      routerPath:''

    }

  },

  components: {

    foot

  },

  mounted () {

    this.routerPath=this.$route.path

    // console.log(this.$route.path);background: url('../assets/img/my-bg.png') no-repeat;

  }

}

</script>

<style scoped lang="scss">

   #my{

     .pic{

       height: 6.53rem;

        position: relative;

       background-size:cover;

       .cover{

        width: 100%;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

        z-index: 999;

        background: rgba(0, 0, 0, 0.5);

       }

     }

   }

</style>