<template>
  <div>
    <div class="tabbar-b">
      <div :class="type == 1 ? 'btn active' : 'btn'" @click="goHome">
        <div class="home-icon"></div>
        <div class="txt">首页</div>
      </div>
      <div :class="type == 2 ? 'btn active' : 'btn'" @click="goMy">
        <div class="my-icon"></div>
        <div class="txt">我</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: String
  },
  mounted() {},
  methods: {
    goHome() {
      this.$router.push({
        path: '/index'
      })
    },
    goMy() {
      this.$router.push({
        path: '/my'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tabbar-b{
  width: 100%;
  height: 1.08rem;
  background: #fff;
  box-shadow: 0 -1px 15px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  .btn{
    text-align: center;
    flex: 1;
    .home-icon{
      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto;
      background: url(../assets/images/my/tab-i4.png);
      background-size: 100% 100%;
    }
    .my-icon{
      width: 0.32rem;
      height: 0.4rem;
      margin: 0 auto;
      background: url(../assets/images/my/tab-i2.png);
      background-size: 100% 100%;
    }
    .txt{
      color: #ccc;
      font-size: .2rem;
      line-height: 100%;
      margin-top: .12rem;
    }
    &.active{
      .home-icon{
        background: url(../assets/images/my/tab-i3.png);
        background-size: 100% 100%;
      }
      .my-icon{
        background: url(../assets/images/my/tab-i1.png);
        background-size: 100% 100%;
      }
      .txt{
        color: #AF1B40;
      }
    }
  }
}
</style>
